next.js: Global 404 page is not available for internationalization
Link to the code that reproduces this issue or a replay of the bug
https://github.com/kjxbyz/next-app-i18n-404
To Reproduce
yarn && yarn dev
http://localhost:3000/test/zh/
- Accessing a non-existent route returns no custom 404 page
Current vs. Expected behavior
Current behavior
: Accessing a non-existent route returns no custom 404 page.
Expected behavior
: Access a non-existent route and return a custom 404 page.
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64
Binaries:
Node: 18.17.1
npm: 9.6.7
Yarn: 1.22.19
pnpm: 8.6.12
Relevant Packages:
next: 13.4.19
eslint-config-next: 13.4.19
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)
App Router
Additional context
No response
About this issue
- Original URL
- State: open
- Created 10 months ago
- Reactions: 6
- Comments: 15 (5 by maintainers)
I was able to get a 404 working but as the
not-found.js
file does not accept and is unable to useuse client
, we cannot access the language from the URL or do any other internationalization.I tried the following by putting language
[fr]
routes, and then within them anot-found.js
, but that didn’t work either. I thought this might be an acceptable way forward.For example,
I tried the above and it doesn’t work for me.
Related, but maybe a separate issue.
The 404 page kicks in just fine under nearly every circumstance, except one.
If I type in
https://myawesomenextjssite.com/en/2
I get a 404 error (if there is no page)If I type in
https://myawesomenextjssite.com/en2
I get a 505 error. However I get the default 500 Error page and neither the error.js nor the global-error.js files kick in.I know @devjiwonchoi is going to make a PR or suggestion, but I struggled enormously on this and wanted to comment on my ideas.
According to the Next docs the not-found file can be “use client”. If that doesn’t work you can try to use the headers function and read the language from the
accept-language
header.I do not mind
It is because your not-found is not global, but rather confined to
[lng]
. Therefore your not-found will only be viewed on/test/[lng]
, which is never since it’s a dynamic route segment.Move your
not-found
to the root segment of your project if that’s what you’re looking for.Reference