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)

Commits related to this issue

chore: fix autolabeler (#54916) ### What? Follow-up of #54824 ### Why? Correctly detect the section to look for while autolabeling. The text currently being searched is not present in the issue bo... — committed to vercel/next.js by balazsorban44 10 months ago

Most upvoted comments

I was able to get a 404 working but as the not-found.js file does not accept and is unable to use use 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 a not-found.js, but that didn’t work either. I thought this might be an acceptable way forward.

For example,

app /
----/ layout.js              <--- essentially just a RootLayout wrapper
----/ not-found.js           <--- UI recreated using only server side components 
----/ [LANG]
---- / ---- / layout.js      <--- where the bulk of the app sits
----/[EN]
----/----/not-found.js       <--- in English
----/[FR]
----/----/not-found.js       <--- in French

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.

davidkartuzinski on Sep 22, 2023

I was able to get a 404 working but as the not-found.js file does not accept and is unable to use use client, we cannot access the language from the URL or do any other internationalization.

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.

marlonschlosshauer on Feb 28, 2024

I do not mind

kjxbyz on Sep 5, 2023

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

not-found.js

devjiwonchoi on Sep 4, 2023