Not found page (404) with app directory

[mareson]

Hi, I'm using this library with the next.js app directory and would like to localize not-found.tsx. But the problem is that if the user visits some non-existing page, next.js tries to redirect him to not-found.tsx which is in the root of the app directory (and root layout is in [locale] directory). But I would need to get him to not-found.tsx in the [locale] directory or get translations in /app/not-found.tsx.

• app
• not-found.tsx <– This is where the user ends up, but I don't have the translations available here.
• [locale]
• • layout.tsx <– Root layout
• • page.tsx
• • template.tsx
• • not-found.tsx <– This is ignored.

Thank you very much for your advice.

[amannn]

You can check out the official example which supports this: https://next-intl-example-app-router.vercel.app

Edit: We now have official docs on error handling: https://next-intl-docs.vercel.app/docs/environments/error-files

[kylemorena]

@amannn Hi,
Is there any chance to get the current locale inside the not-found page?
thanks in advance!

[aXenDeveloper]

Hm, It's looks like doesn't work for next in 13.4.10+ version.

[Egor-Dubovik]

You need to add:
// app/[locale]/[...rest]/page.tsx

import {notFound} from 'next/navigation';

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

P.S. read the documentation https://next-intl-docs.vercel.app/docs/environments/error-files

[JunkyDeLuxe]

I confirm this method is working. Thanks

[daywison-flapper]

It's doesn't work for next 14

[aXenDeveloper]

@daywison-flapper Please, provide an example repo. But please read this: https://next-intl-docs.vercel.app/docs/environments/error-files

[nicKondratiev]

Thanks, works for me. But what's weird is that if I don't wrap whole NotFound component in the html tag it doesn't display the comp. properly.