Next.js Discord

Discord Forum

I am having big problems with using custom 404 not-found.tsx pages inside route groups

Answered
Chub mackerel posted this in #help-forum
Open in Discord
Chub mackerelOP
I also cannot use the default put the not-found.tsx in the /app/not-found.tsx cause i cannot have a layout.tsx there, I have (admin) and (root) route groups with two completely different rootLayouts so that is out of question.

How to do it ? I mean i just want when doing stuff like this
/admin/randomWordHere -> Custom Not found page
/admin/movies/andomWordHere -> Custom Not found page
/movies/andomWordHere -> Custom not found page
/andomWordHere -> Custom not found page
Answered by Chub mackerel
So i will mark this as a solution, basically used the old classic [...not-found] catch all route, you can put any name there, inside page.tsx which throws the notFound() from next. then in the outside you put not-found.tsx can be either client or server component.

This works on all routes at least without some language stuff so
1) /joojjo throws the custom 404 page
2) /movies/jojjo throws the custom404 page
3) /admin/movies/hhiih throws the custom, no need for the layout hack and the no header custom 404 which is not ideal

import { notFound } from "next/navigation";

export default function NotFoundPage() {
    notFound();
}


also look at this
https://github.com/vercel/next.js/discussions/50034
View full answer

9 Replies

@Chub mackerel I also cannot use the default put the not-found.tsx in the /app/not-found.tsx cause i cannot have a layout.tsx there, I have (admin) and (root) route groups with two completely different rootLayouts so that is out of question. How to do it ? I mean i just want when doing stuff like this /admin/randomWordHere -> Custom Not found page /admin/movies/andomWordHere -> Custom Not found page /movies/andomWordHere -> Custom not found page /andomWordHere -> Custom not found page
joulev
you must use app/not-found.tsx for the global 404 page. it cannot be anywhere else, even app/(foo)/not-found.tsx cannot be used for that.

you can create an empty app/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return children;
}

then your app/not-found.tsx can be
export default function NotFound() {
  return (
    <html>
      <body>Not found!</body>
    </html>
  );
}
@Chub mackerel Does this affects the two completely different rootLayouts in app/ (admin) and app/ (root) ? i mean anything inherited etc or this layout is only for this stuff ?
joulev
the empty layout above wraps everything, so it also wraps your existing layouts too. but it is empty so it shouldn't interfere with anything
@joulev the empty layout above wraps everything, so it also wraps your existing layouts too. but it is empty so it shouldn't interfere with anything
Chub mackerelOP
Okay did it, it works for /randomhere and clicking the link to go back it goes back to / but if i go to /movies/jtojtoj and the page shows but then clicking link breaks all many error in the console
warn-once.ts:6 No default component was found for a parallel route rendered on this page. Falling back to nearest NotFound boundary.
Learn more:

this is initially after hard reloading it the movies/randomWord so it works only for / url
joulev
can you make a minimal reproduction repository?
@joulev can you make a *minimal* reproduction repository?
Chub mackerelOP
the many errors which broke from some weird state too many etc was just from this never would i thought
const fetchGenres = async () => {
            try {
                // Server actions in fetching inside a client component instead of using a API route
                // ("use server");
                // const genresData = await getGenres({});
                // setGenres(genresData.rows);

                const response = await fetch("/api/genres");
                const genres: Genre[] = await response.json();
                setGenres(genres);
            } catch (error) {
                console.error("Failed to fetch genres:", error);
            }
        };

so basically when i went to /movies/jooj the not-found.tsx was shown but clicking the header links or anything would break all the app, just this fix fixed it so use api route insted of server action in client component in this case with not-found seemed to help 0 idea why,
but the not-found still has problems i mean ok by adding not-found.tsx also to the route segments like /movies/not-found.tsx i am able to do custom not-found which is perfect but the main one is super ugly cause i cannot insert all those providers headers and stuff so i man i can get along with it
@joulev so now i am in this situation the not-found works for root /randomWord but the page is without Header and footer i mean i can get along with it, and by adding not-found.tsx to /movies, /series the /movies/joojjo also shows not-found.tsx with header and footer and the app doesn't break, so i assume i cannot do anythign for my root layout in /app to have header and footer so i will try the [...not-found] inside group routes
why the app broke i think there is some bug in next that using server actions inside client components while the page has rendered not-found.tsx inside the group rotues breaks all app will keep this error maybe to see in the future
Chub mackerelOP
So i will mark this as a solution, basically used the old classic [...not-found] catch all route, you can put any name there, inside page.tsx which throws the notFound() from next. then in the outside you put not-found.tsx can be either client or server component.

This works on all routes at least without some language stuff so
1) /joojjo throws the custom 404 page
2) /movies/jojjo throws the custom404 page
3) /admin/movies/hhiih throws the custom, no need for the layout hack and the no header custom 404 which is not ideal

import { notFound } from "next/navigation";

export default function NotFoundPage() {
    notFound();
}


also look at this
https://github.com/vercel/next.js/discussions/50034
Answer