Global 404 page is not available for internationalization

[kjxbyz]

Link to the code that reproduces this issue or a replay of the bug

https://github.com/kjxbyz/next-app-i18n-404

To Reproduce

1. yarn && yarn dev
2. http://localhost:3000/test/zh/
3. 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

[devjiwonchoi]

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

[kjxbyz]

If not-found.tsx is placed in the app directory instead of the [lng] directory, how can the not-found page be internationalized?

[devjiwonchoi]

Oh, my bad. So you want /[lng]/not-found to act as global not-found for sub dirs right?

[kjxbyz]

Sorry, the title of the issue I submitted may have caused misunderstanding. I created the not-found.tsx file in the /app/[lng] directory, so when accessing a route that does not exist in the /app/[lng] directory, the not-found.tsx file in the /app/[lng] directory should be rendered.

[kjxbyz]

Oh, my bad. So you want /[lng]/not-found to act as global not-found for sub dirs right?

yep

[devjiwonchoi]

So I guess you are aware that non-root not-found handles only pre-defined URLs.

Good to know: In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the app/not-found.js file.

IMO the not-found should basically be passed down by default with a starting route such as /test/not-found should match /test/**/*, or explicitly support for i18n.

Reference

• not-found

[kjxbyz]

basePath is set to "/test", and the project structure is as follows,

I visit http://localhost:3000/test/blog/detail/, it’s normal
When I visit http://localhost:3000/test/blog/detail/aaa, app/blog/not-found.tsx should be displayed.

Is there something wrong with my understanding?

[devjiwonchoi]

Try to throw notFound on /blog/detail - it'll render your not-found, but if you access /blog/detail2, it'll render a default 404 since /blog/detail is predefined, but /blog/detail2 is not.

[kjxbyz]

I see, thank you.

[devjiwonchoi]

@kjxbyz Do you mind if I open a feature request and PR about this issue?

[kjxbyz]

I do not mind

[davidkartuzinski]

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.

[marlonschlosshauer]

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.

[davidkartuzinski]

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.

Thanks. I think the issue was fixed since my comment. But thank you.