Next.js Discord

Discord Forum

Route specific "not-found.tsx" 404 Pages

Answered
Argente Brun posted this in #help-forum
Open in Discord
Argente BrunOP
Multiple "not-found" Pages

Hey, I have a problem that I want to have multiple not-found pages based on the current route.

My routes are like this:

app/
└── page.tsx
└── [slug1] / page.tsx
└── [slug1] / not-found.tsx // not-found page for [slug1] route (Should say something like "[slug1] does not exist. Click here to go back to /page.tsx")
└── [slug1] / [slug2] / page.tsx
└── [slug1] / [slug2] / not-found.tsx // not-found page for [slug2] route (Should say something like "[slug2] does not exist in [slug1]. Click here to go back to [slug1]/page.tsx")

But sadly I only see the default "404 | This page could not be found." Page by nextjs.
I tried to create the not-found page on the base route next to the default page, it works and I see the custom page, but I want to have multiple not-found pages based on the current route.
I think I could just use the params of the slugs in the base route not-found page but that doesn't seem like the best solution for me.

I hope you can help me, thanks in advance!
Answered by Ray
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.
View full answer

2 Replies

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