search

amannn / next-intl

🌐 Internationalization (i18n) for Next.js
https://next-intl-docs.vercel.app
MIT License
2.58k stars 236 forks source link

NextJS 14 with Next-intl (3.23.5) making every page dynamic #1477

Closed mycvlnn closed 2 weeks ago

mycvlnn commented 2 weeks ago

Description

I followed the instructions in the documentation for the latest version. However, when I build, all my pages switch to dynamic rendering (even though my pages are not in a dynamic route like [locale]). Even though I used setRequestLocale, it still doesn’t switch to static rendering. You can check the screenshot below.

image image

Verifications

Mandatory reproduction URL

https://github.com/amannn/next-intl/tree/main/examples/example-app-router

Reproduction description

Steps to reproduce:

Clone this example Next.js project from next-intl: https://github.com/amannn/next-intl/tree/main/examples/example-app-router

Create a new page in the app folder, for example: app/test/page.tsx.

After creating the page, run npm run build in the project’s terminal.

You'll notice in the terminal that my test page is now set to dynamic rendering, even though it’s not part of a dynamic [locale] route.

Expected behaviour

Pages that are not within a dynamic route should, by default, be statically rendered during the build process.

tosh79kt commented 2 weeks ago

I can confirm this behavior with next 15.0.1 and next-intl 3.23.5.

github-actions[bot] commented 2 weeks ago

Thank you for your report!

Unfortunately, the reproduction is missing or incomplete, and as such we cannot investigate this issue. Please add a reproduction to the issue, otherwise it will be closed automatically.

Templates:

Creating a good reproduction takes time.

To help us resolve the issue quickly, please simplify the reproduction as much as possible by removing any unnecessary code, files, and dependencies that are not directly related to the problem. The easier it is for us to see the issue, the faster we can help you.

Apart from the reproduction, make sure to include the precise steps on how to reproduce the issue, e.g.:

  1. Open reproduction
  2. Click on …
  3. See error: …

Thank you for your understanding!

FAQ **"I've included a reproduction, what is missing?"** This comment might have been added because your reproduction doesn't point to a destination where the issue can be reproduced. Please make sure that the latest changes were saved in the reproduction and that the link is correct.
reiv commented 2 weeks ago

Can confirm this happening as well. Next 15.0.2 with next-intl 3.23.5. I'm explicitly setting locale in all getTranslations(), but headers() still seems to be getting used to get the locale from the middleware.

Edit: patched in some logging and it looks like receiveRuntimeConfigImpl is getting called twice, the first time with localeOverride set to the specified locale and the second time undefined. Not sure what's going here.

mycvlnn commented 2 weeks ago

I resolved this by adding the setRequestLocale(routing.defaultLocale)function inside the not-found.tsx file in the app directory. You can check the screenshot for details.

Thank you all very much! 🇻🇳

image
amannn commented 2 weeks ago

Interesting, could be this bug in Next.js: https://github.com/vercel/next.js/issues/71623

chrilis commented 1 week ago

While this resolves the static rendering I don't think it allows localized not-found.tsx pages. Adding setRequestLocale(routing.defaultLocale) to next-intl/examples/example-app-router/src/app/not-found.tsx results in english translations and routing (routing.defaultLocale == 'en') for URLs like http://localhost:3000/de/unknown-route.

Is there another way to make localized not-found.tsx pages work without breaking static rendering or do we have to wait for the Next.js team to confirm and fix this issue first? Thank you!

PS: I'm happy to create a repro if that helps!

amannn commented 5 days ago

Is there another way to make localized not-found.tsx pages work without breaking static rendering or do we have to wait for the Next.js team to confirm and fix this issue first? Thank you!

@chrilis As far as I know this is still possible in Next.js 14 (see App Router example):

In Next.js 15 I haven't found a way to achieve this yet, related to the bug that's mentioned above.

Note that the Next.js team is working on a new API specifically for cases like i18n to improve locale handling (see https://github.com/amannn/next-intl/issues/663#issuecomment-2464840120). I think this could help to solve this in a clean way in the future without having to rely on setRequestLocale.

chrilis commented 4 days ago

Thank you for your quick reply @amannn! Maybe I'm wrong, but I think it's also relevant for Next.js 14, see [repro] (https://github.com/chrilis/next-intl/tree/repro/localized-404-static-rendering).

amannn commented 4 days ago

Why would you want to add setRequestLocale to app/not-found.tsx in the example? Your comment in the commit says it "fixes static rendering of all pages (and the build error)" but I don't see which problems the example has with static rendering/building in the first place. Can you point to a practical issue that the example has on Next.js 14?

As a side note, it seems like we can get rid of setRequestLocale in the long run as the Next.js team is working on an official API for reading the [locale] param deeply: https://github.com/amannn/next-intl/issues/663#issuecomment-2464840120.