Next.js Discord

Discord Forum

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

Answered
Oriental posted this in #help-forum
Open in Discord
OrientalOP
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
Answered by LuisLl
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
  // ...
}
View full answer

5 Replies

OrientalOP
If I delete the root not-found file I get the default 404 page
LuisLl
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
  // ...
}
Answer
@LuisLl 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. jsx import { notFound } from "next/navigation"; export default async function Page({ params }: Props) { const { slug } = await params; if (slug === "3") notFound(); // Silly example // ... }
OrientalOP
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?
LuisLl
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.