Route specific "not-found.tsx" 404 Pages
Answered
Argente Brun posted this in #help-forum
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!
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.
2 Replies
@Argente Brun 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!
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
[slug1] / not-found.tsx this only show when you call
[slug1] / not-found.tsx this only show when you call
notFound() in [slug1] / page.tsxthe 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