Not found page on App Router
Answered
West African Lion posted this in #help-forum
West African LionOP
Good morning everyone, is there any way to capture the next event of going to the 404 page? Another question is whether it is possible to have more than one 404 page without depending on the main page of next.
Answered by not-milo.tsx
From the docs:
It's subtle, but it's there
Good to know: In addition to catching expectednotFound()errors, the rootapp/not-found.jsfile 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 theapp/not-found.jsfile.
It's subtle, but it's there
32 Replies
you can have multiple
not-found.tsx files in your project but there has to be only one per route segmentand you can export your custom 404 UI from there, it will override the default one provided by Next
West African LionOP
I see, but I always need to have the "main" not-found page, right?
take a look at the docs here: https://nextjs.org/docs/app/api-reference/file-conventions/not-found
West African LionOP
Yes, I followed this tutorial. However, I cannot display my different 404 per route. Always displays the default of next.
@West African Lion I see, but I always need to have the "main" not-found page, right?
not necessarily, you can place a not-found file in
/app/blog for example and leave the root not-found as isWest African LionOP
For example, I need to have two 404s per layout here, but all that is displayed is the black default of next.
any custom defined
not-found.tsx file only catches missing routes from the segment it's in downwards. So if you need a global 404 page you have to place it at the root of your app directoryWest African LionOP
What I needed was for all 404s within the /orange/* path to go to the custom one of this layout and the rest to the root one. It's possible?
@West African Lion For example, I need to have two 404s per layout here, but all that is displayed is the black default of next.
you're using route groups here which map to the same segment (in this case it's the root of your app, e.g.
locahost:3000/) once the app is running so you can only have one 404 page for both of those groupsWest African LionOP
I see
in this case I can have only one and use map by url path to handle differente layouts
you can move the
not-found.tsx file in /(exchange) to the root and you'll see it if you try to access something like localhost:300/thisdoesnotexistand keep the one inside
/orange as is, and that'll catch non existent paths under that specific segment, e.g. localhost:3000/orange/thisdoesnotexistWest African LionOP
hmmmm, ok. I'll test
asap
@West African Lion in this case I can have only one and use map by url path to handle differente layouts
not really, at run time you have no way of knowing what group a route belongs to... those are only visible to you while you're developing the app and once its built they disappear
West African LionOP
I see
well I tried the way you told me, but it didn't work 😕
how come? did you get any errors?
West African LionOP
its redirecting to main not-found page
in root app path
weird, I'm going to do some digging to understand why it does that...
West African LionOP
ok, thanks man
So, apparently any nested
not-found.tsx file only catches missing routes if you explicitly call the [notFound function](https://nextjs.org/docs/app/api-reference/functions/not-found) meaning that for you to be able to see the custom 404 page defined inside /orange you'd have to call notFound from either the layout.tsx or page.tsx files inside /orange/[vertical]See this as an example
If you don't call it and leave it up to Next it will use the root
not-found.tsx or the prebuilt one it comes with.West African LionOP
hmmmm, I see
I thought that would be it
thanks a lot
From the docs:
It's subtle, but it's there
Good to know: In addition to catching expectednotFound()errors, the rootapp/not-found.jsfile 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 theapp/not-found.jsfile.
It's subtle, but it's there
Answer
@West African Lion thanks a lot
No problem ✌ï¸