Only root not-found file is being served instead of segment specific not-found

[heady trail]

I want a separate not-found file to be served when a user navigates to a [category] which was not generated by staticparams. Just to see what's happening I changed the not-found.tsx file in [category] to say 'that's something' rather than That's Interesting, but its only picking up the root file

[devout frigate]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[heady trail]

If I delete the root not-found file I get the default 404 page

[late cedar]

You need to explicitly call the notFound() function in order to trigger the not-found.tsx file per route segment. Otherwise the root not-found.tsx will be rendered in place of any routes that Next.js couldn't find.

import { notFound } from "next/navigation";

export default async function Page({ params }: Props) {
  const { slug } = await params;
  if (slug === "3") notFound(); // Silly example
  // ...
}

[devout frigate]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1348731787584737305 message)

[heady trail]

thanks for the reply luis. This behavior feels awkward to me.

I'm using SSG for these routes, so I have dynamicParams = false to throw a 404 for any page not generated by generateStaticParams. So if I'm understanding this correctly and I want a custom error page for specific segments, I need to leave dynamicParams = true, then throw a notFound if a user hits a page that I validate against the slugs in my database?

[late cedar]

Yea it's somewhat weird since loading.tsx works per-route level out of the box...

But the thing is you can't trigger the per-route level not-found.tsx **unless ** it's triggered by the notFound() function. Otherwise you get the root not-found.tsx.

I've also seen the implementation of [...not-found] to display the custom error page for pages not pre-rendered by generateStaticParams(), this catch-all route will be displayed for all the rest of routes, which could be a decent workaround. Let me know if you try it, I've never tried myself.