not-found.jsx file in app/[lang] ignored for non-existent inner folders (with Internationalization)

[pranavks]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/nextjs-404-page-bug-internationalization-zpmm4z

To Reproduce

1. Follow instructions on internationalization here https://nextjs.org/docs/app/building-your-application/routing/internationalization. (Move all files from /app to /app/[lang] folder).
2. Create not-found.jsx file in app/[lang] folder.
3. Access any first level url path in browser which trigger 404 : /en/ => not-found.jsx works
4. Access any "non-existent" second level url path in browser : /en/pricing/ => not-found.jsx does not work. Instead default nextjs 404 page appears.

Current vs. Expected behavior

By default root level not-found.jsx catches all the 404 errors from non-existent inner folders. (As mentioned in docs). But after setting up internationalization by moving all files from /app to /app/[lang] folder, the not-found.jsx is not catching 404 errors from "non-existent" inner paths. It should catch them.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
Binaries:
  Node: 18.19.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.2
  eslint-config-next: 14.1.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Internationalization (i18n)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

No response

[stefanprobst]

i think not-found pages are only shown when the notFound() function is thrown. see next.js docs.

to display the nested [locale]/not-found page, you can add a catch-all route segment at [locale]/[...404]/page.tsx which calls notFound(). this is what e.g. next-intl recommends - see their docs for an example.

[pranavks]

i think not-found pages are only shown when the notFound() function is thrown. see next.js docs.

to display the nested [locale]/not-found page, you can add a catch-all route segment at [locale]/[...404]/page.tsx which calls notFound(). this is what e.g. next-intl recommends - see their docs for an example.

The linked doc also say it catches all the unmatched urls with this not-found.jsx;

And it does that well in our project without the [lang] folder. Only when we add the [lang] folder does this issue happen.

Will try out this catch-all route segment approach but this issue needs to be resolved on the root cause itself.

[elartix]

@pranavks, used like this example

.
└── src/
    ├── app
    └── [...not_found]/
        ├── page.tsx
        └── layout.tsx