not found doesn't catch after dynamic param

[darklight9811]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Mon Apr 24 2023 02:05:22 GMT-0300 (Horário Padrão de Brasília)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 8.2.0
    Relevant packages:
      next: 13.3.1-canary.19
      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)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-pqwxgu?file=app/[locale]/not-found.tsx

To Reproduce

Create a not-found file after a dynamic param [locale] for example, like this: [locale]/not-found.tsx, visit any route like /en-US/yay, it will show next default not found route.

Describe the Bug

It shows next default not found route instead of the custom one created.

Expected Behavior

To show the not found created by the not-found file.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[zartinn]

I am also struggeling with this problem and created a discussion to see how others have solved the problem: #48725

I think there is right now no real solution for it when you want to have a not-found page which is probably utilizing the language and based on that the layout that is shared in a [lang] folder.

[darklight9811]

@zartinn I saved it as a component and I do both not-found.tsx and [...notfound]/page.tsx as a fallback. I need both because the second one is not triggered when I call notFound(). But this is indeed a bug to be solved.

[zartinn]

Newest 13.4.0 version does NOT fixed this. The PR #49095 sounded kind of promising.

[leonbe02]

Kind of crazy that Next doesn't support localized 404 pages out of the box. Is there any ETA on a fix for this?

[zartinn]

13.4.4 version did not fixed that.

[kyleatcolenso]

We need this resolved asap too, not-found.tsx was working until we added a top level [lang] folder. Now we're getting the default Nextjs 404 page.

[Israeltheminer]

Came across this same problem using the [locale] directory within the app directory. This should be tagged as important

[p00000001]

A possible to workaround this if you don't have any dynamic routes directly below the [lang] is to add a catch-all route (will match only if static routes don't match):

/[lang]/[...notFound]/page.js

Then inside page.js have a method call:

export default function NotFoundCatchAllPage() { notFound(); }

This will then trigger the segment's not-found.js instead of the default root one.

[MuhammadMinhaj]

Still not resolved?😒 Waiting for this fixing! I think it should be important, especially for i18n!

[MuhammadMinhaj]

Regarding the custom metadata for the not-found.js page, maybe I've found a workaround! here you can go:
#45620 (comment)

[trickreich]

this case isn't working..

@timneutkens @leerob we have this issue in production sites.. could we have a hint how we can solve this?
thanks!

[timneutkens]

Looking at the reproduction it seems there's a misunderstanding about how/when not-found.tsx is triggered. The not-found.tsx boundaries currently only apply to calling notFound(). Only app/not-found.tsx is used to render the default 404 page (i.e. when you go to /my-non-existent-page or /dashboard/my-non-existent-page).

Calling notFound() correctly triggers the not-found boundary in app/[locale]/not-found.tsx. The reproduction did not have any notFound() calls so I've added one here: https://stackblitz.com/edit/vercel-next-js-sbvl7a?file=app%2F[locale]%2Fpage.tsx and you can see it working when going to /en. It's currently expected that /en/my-non-existent-page does not match/render app/[locale]/not-found.tsx.

This is definitely something we're going to add support for in the future but it's working as expected currently. Would recommend opening a discussion feature request for this change so that we can keep track of interest in the feature.

[darklight9811]

@timneutkens, discussion created for this: #53486

[trickreich]

@timneutkens Sorry, but it's still not working. I think the problem is now (next 13.4.13), when the layout is a async component. For me it looks like it's not awaited.

[timneutkens]

@trickreich Feel free to open an issue and provide a reproduction. Please don't @ mention me with comments that are not actionable. Try reading your comment by itself, there is no context on what you're doing besides "I'm on the latest version and have a component".

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.