[NEXT-1180] App directory with root [locale] parameter, i18n enabled for pages

[nayaabkhan]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.6.0
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: 7.6.0
    Relevant packages:
      next: 13.3.1-canary.16
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Internationalization (i18n)

Link to the code that reproduces this issue

https://github.com/nayaabkhan/i18n-appdir-repro

To Reproduce

Local (Works as expected)

1. npm run dev
2. Opening http://localhost:3000/en shows Current locale: en

Preview URL (Bug)

1. Opening https://i18n-appdir-repro.vercel.app/en shows 404, should show Current locale: en

Disabling i18n (Cause)

1. Remove i18n from next.config.js
2. Commit and push
3. Opening https://i18n-appdir-repro.vercel.app/en correctly shows Current locale: en

Describe the Bug

Having i18n enabled with a root param in app directory causes pages from app directory to become inaccessible (404).

Expected Behavior

Having i18n enabled with a root param in app directory should keep app pages working as expected.

Which browser are you using? (if relevant)

Safari Version 16.3 (18614.4.6.1.6)

How are you deploying your application? (if relevant)

Vercel

_NEXT-1180

[dmgawel]

@nayaabkhan The reproduction repository you've provided returns 404: https://github.com/nayaabkhan/i18n-appdir-repro. Could you recheck if it's correct?

[nayaabkhan]

@dmgawel Should be okay now, forgot to make the repo public.

[nayaabkhan]

Issue persists with latest release (13.4.0):

• https://github.com/nayaabkhan/i18n-appdir-repro/pull/1
• https://i18n-appdir-repro-d0y9ve61d-nayaabkhan.vercel.app

[fernandojbf]

I'm trying to study the migration of an application to the new routing app directory.

Using an empty project, using the i18n documentation, I've created a app/[lang]/... here all the application sits.

Different from the docs, I want to make sure that / does not auto detect and returns the default language (en). I do not have any app/page.tsx (intended) so I want to rewrite / to rewrite in /en. I've made a middleware where that logic is done. When the locale param is missing, I return the Response.rewrite with the new url with the missing param (/ -> /en). That way is always found page in app directory.

As soon I configure i18n in next.config.js, trying to add ability to any old pages directory to work with i18n, the middleware rewrite stops working for app directory. This will be important to enable a gradual migration between routing strategies.

I believe is about the same bug @nayaabkhan is opening.

There is more examples:

next-translate has an example of something similar. Is not the same use case, since they are not using the locale parameter, but the error seems to be related.

The rewrite middleware they created (removing locale parameter) stoped working since i18n is added in next.config.js via their plugin. It was working in nextjs 13.2.0 (version used in the example) but when updating to 13.4.0 its stop working.

[marcobusemann]

I noticed the same problem today while trying to incrementally migrate a few pages to the app directory. This unfortunately blocks any further work.

By default all pages should have "de" as locale. So I need a rewrite from "/a" to "/de/a" which results in a 404 if there's an i18n configured in next.config.js.

[nayaabkhan]

@timneutkens It seems this issue has been migrated to Linear. Is it possible for people interested to track the progress somehow?