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!

[ashoshari]

import { getLocale } from "next-intl/server";

[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.

[YHADJRABIA]

Works for me as well. Thank you!

It seems the not-found.tsx page cannot be nested inside a [locale]/(error)/not-found/page.tsx folder for better readibility.

This prevents it from having its dedicated layout.tsx and generateMetadata function.

If generateMetadata is added within [locale]/not-found.tsx itself then the metadata show for a split second before being "overtaken" by the application's global layout

[JJablonski02]

is there any solution to use Translation when i go to url for example localhost:3000/badurl ? I want to use translation in not found component but it doesn't work. Not found is same level with [locale] folder. I do not use localePrefix in url. i have urls like /login, but if I hit /en it switches to eng language and url redirects to /, thats fine. If i hit /fdasd it redirects not-found but i cant use translation in this level, can I avoid this ?

[andrema13]

I believe you're missing this configuration at the middleware and also add the configuration present in the configuration above

next-intl/examples/example-app-router/src/middleware.ts

Line 22 in ba067df

'/((?!_next|_vercel|.*\\..*).*)'

[da-kicks-87]

I'm looking at the guide (https://next-intl-docs.vercel.app/docs/environments/error-files) I am wondering if there is an easy way to deal with "Catching non-localized requests".
Without the implementation a path like '/unknown.txt' wont work but '/unknown' will.

The method involves adding extra files and code. Seems redundant. Shouldn't the middleware be able to detect this?