Having multiple not-found pages in Next15 App dir not working. (Help Needed)
Answered
Goldstripe sardinella posted this in #help-forum
Goldstripe sardinellaOP
Im trying to make a not-found page for different layouts in next 15 App directory but I keep seeing the root layout's not found component. only. My file tree looks something like this:
(if neccessary, ask me to share the contents in these files tho i dont think they're much important since it's just simple contents inside them).
# ISSUE
When I'm in a path lets say
# What im trying to achieve
I want to make the
/app
|- layout.tsx
|- page.tsx
|- not-found.tsx
|- /about
|- layout.tsx
|- page.tsx
|- not-found.tsx
|- /info
|- layout.tsx
|- page.tsx
|- not-found.tsx(if neccessary, ask me to share the contents in these files tho i dont think they're much important since it's just simple contents inside them).
# ISSUE
When I'm in a path lets say
about/randompage or info/randompage it shows me the Root layout's not-found component instead of the about one or info one depending on the path.# What im trying to achieve
I want to make the
not-found components work for the different routes.
52 Replies
Goldstripe sardinellaOP
also, please ping me I do not mind if i get @mentioned.
@Goldstripe sardinella What your showing as your example should work...
app/
├── int/
│ ├── not-found.js // This will be used for /int/ and its sub-routes
│ └── page.js
├── ext/
│ ├── not-found.js // This will be used for /ext/ and its sub-routes
│ └── page.js
└── not-found.js // This will be used for all other routes
Can you ensure your going to /int/blahblah and still seeing the root not-found page?
app/
├── int/
│ ├── not-found.js // This will be used for /int/ and its sub-routes
│ └── page.js
├── ext/
│ ├── not-found.js // This will be used for /ext/ and its sub-routes
│ └── page.js
└── not-found.js // This will be used for all other routes
Can you ensure your going to /int/blahblah and still seeing the root not-found page?
@Jboncz <@708074274824650822> What your showing as your example should work...
app/
├── int/
│ ├── not-found.js // This will be used for /int/ and its sub-routes
│ └── page.js
├── ext/
│ ├── not-found.js // This will be used for /ext/ and its sub-routes
│ └── page.js
└── not-found.js // This will be used for all other routes
Can you ensure your going to /int/blahblah and still seeing the root not-found page?
Goldstripe sardinellaOP
Yes, in my example i was going to a route like
/about/somepage or /info/somepage and it keeps showing me the root layout's error page. Should I make a github repo of the project?Yeah I can’t reproduce it. Works fine in my project
@Jboncz Yeah I can’t reproduce it. Works fine in my project
Goldstripe sardinellaOP
ill make a github repo and share the link in a bit.
bc it seems weird
Make sure to make it a min repro please, I need to be able to actually run in on my pc to help
Goldstripe sardinellaOP
are you using next15 too?
I did it in next14 and next15
@Jboncz Make sure to make it a min repro please, I need to be able to actually run in on my pc to help
Goldstripe sardinellaOP
wdym by min repo?
im not that good on github yet my apologies
Like, make sure I can clone the repo and run it, remove anything that requires api keys and such so I can actually run it
min repo would just be reproducing the issue without all the 'extra' stuff
@Jboncz Like, make sure I can clone the repo and run it, remove anything that requires api keys and such so I can actually run it
Goldstripe sardinellaOP
its a very simple project theres nothing in it really
Gotcha, sounds good.
Goldstripe sardinellaOP
its just pages with some random content or no content at all
not even buttons
Gotcha, sounds good.
Your using the app dir right?
Goldstripe sardinellaOP
👍
@Jboncz Your using the app dir right?
Goldstripe sardinellaOP
yep
app dir, next15 and typescript
okay sounds good hit me up when you got it setup
@Jboncz okay sounds good hit me up when you got it setup
Goldstripe sardinellaOP
alright thanks.
Goldstripe sardinellaOP
btw when you reply, please do @mention me so i can respond quicker
Gotcha @Goldstripe sardinella looking now
@Jboncz Gotcha <@708074274824650822> looking now
Goldstripe sardinellaOP
alright
fyi, the reason i created layouts for the routes(
info and about) is because initially I did not use layouts for both so I thought it might be because they need to have there own layouts, so I decided to make layouts for bothjust for heads up since you might get confused on why they have there own layouts
Nah, no issues with that. taking a look tho one sec
Goldstripe sardinellaOP
👍
Answer
Goldstripe sardinellaOP
alright let me try
its working just fine
thanks for the help
for a quick tldr its because next sees routes that dont exsist as dynamic, so you have to call notFound()
Goldstripe sardinellaOP
its kind of weird why it doesnt work with the one i made
otherwise it calls the root.
@Jboncz for a quick tldr its because next sees routes that dont exsist as dynamic, so you have to call notFound()
Goldstripe sardinellaOP
oh i see
its cause of the dynamic routes.
To make the not-found pages work as expected:
1. The not-found UI is only shown when the
2. For dynamic routes, you'll need to explicitly check if the route exists and call
3. For static routes (like
1. The not-found UI is only shown when the
notFound() function is called .2. For dynamic routes, you'll need to explicitly check if the route exists and call
notFound() if it doesn't.3. For static routes (like
/about/nonexistentpage), you'll need to implement catch-all routes if you want to handle arbitrary subroutes.Goldstripe sardinellaOP
👍 thank you so much
np
Good luck!
Goldstripe sardinellaOP
thanks have a good day
Make sure to mark an answer please @Goldstripe sardinella
Goldstripe sardinellaOP
how do i close this again i forgot lol
right click this message app-> mark
Goldstripe sardinellaOP
okthere we go
ty 🙂 later
Goldstripe sardinellaOP
thanks