Next.js Discord

Discord Forum

404 not found custom layout

Answered
Woodwasp posted this in #help-forum
Open in Discord
WoodwaspOP
Hey everyone!

I'm crafting a website that needs a custom 404 page, but I'm using Route Groups because I need to use specific layouts for some pages.

I'm looking for a way to create a custom 404 page with a custom layout, and I'm using the App Route Directory.

However, I'm encountering an issue because:

To create my 404 page, I've created a not-found.tsx file at the root of the App folder.
To work nicely, my not-found.tsx files need to have layouts.tsx files at the root, but that's not recommended to do if you use Route Groups.
I've already tried creating a specific folder for my errors, something like this:

(errors) - not-found.tsx - layout.tsx

But it's not working. During my tests, localhost:3000/mfkljzdslkm doesn't return the custom 404 page.

Has anyone encountered this issue and found a solution?
Answered by Arinji
and all the other stuff you had should be in your root layout
View full answer

36 Replies

Arinji
your not found gets scoped @Woodwasp
just dont use a layout
you can always just put your layout code in the not found.tsx
@Arinji you can always just put your layout code in the not found.tsx
WoodwaspOP
Can you show me a example you mean create a “component” inside my not-found.tsx ?
@Woodwasp Can you show me a example you mean create a “component” inside my not-found.tsx ?
Arinji
like the ui inside your layout.tsx, just put it with your code in the notFound.tsx
WoodwaspOP
That not working, i'm crafting with the 14.1.1 version

someone said that on stackoverflow :
" This is still not supported as far as I can tell on v14.1.0 . If you use multiple root layouts, good luck on a custom 404 page. Wasting time on a custom 404 page is madness. "

source :
https://github.com/vercel/next.js/discussions/50034#discussioncomment-8486034



here my code : 
import Nav from "@/app/parts/Nav"
import { Poppins } from "next/font/google"
import FooterDefault from "@/app/parts/FooterDefault"
import "../globals.css"
import React, { ReactNode } from "react"

const poppins = Poppins({ subsets: ["latin"], weight: ["300", "700", "800", "900"] })

function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="fr">
            <body className={`${poppins.className} bg-greglightgrey`}>
                <header>
                    <Nav />
                </header>
                {children}
                <FooterDefault />
            </body>
        </html>
    )
}

export default function Custom404() {
    return (
        <RootLayout>
            <h1>404 - Page Not Found</h1>
            <p>Sorry, the page you are looking for does not exist.</p>
        </RootLayout>
    )
}



and my folders arbo :


app
- (coaching)
-- place
----- page.tsx
-- punctual
----- page.tsx
-- remote
----- page.tsx
-- layout.tsx

- (home)
--- layout.tsx
--- page.tsx
- parts
--- FooterDefault.tsx
--- HeaderDefault.tsx
--- Nav.tsx
--- Slider.tsx
--- SliderItem.tsx
favicon.ico
globals.css
not-found.tsx
Arinji
export default function NotFound() {
    return (
        <div>
            <h1>404 - Page Not Found</h1>
            <p>Sorry, the page you are looking for does not exist.</p>
        </div>
    )
}
@Woodwasp that shld be your not-found.tsx file
Arinji
and all the other stuff you had should be in your root layout
Answer
@Arinji and all the other stuff you had should be in your root layout
WoodwaspOP
Nope, bc i'm using the Route Groups, so that's not mandatory to have a "top level" layout
Arinji
you already have a top level layout
:/
oh wait you dont
WoodwaspOP
yup
Arinji
well then you will have to scope them to all the route groups you want
thats the point of route groups
also.. does that mean you install fonts in every layout?
and import the global css file in every layout
WoodwaspOP
yup
Arinji
.....and you feel this is the best design decision?
WoodwaspOP
nope, but that's not the point
I could have a top level layout to handle that, that load all that stuff for my app, and not displaying some ui..

I'll see this later
Arinji
yea, ok thats good then.. does it just not show the 404 page you made with the updated code i sent or do you see something else?
WoodwaspOP
I got this message
not-found.tsx doesn't have a root layout. To fix this error, make sure every page has a root layout.
that's logic, bc my not-found.tsx is at the root and he looking for a file..

my "RootLayout" component is defined in the not-found.tsx like you've said
sorry meant to do the 2nd one
but yea just make a root layout, and just return children in it
WoodwaspOP
you mean a file or a component?
Arinji
and delete your entire not found.tsx and just export on default function from it
layout.tsx
WoodwaspOP
bc i've already tried both solution
Arinji
try making a file and show me what you are returning
WoodwaspOP
Okay, that's working
When I type something that's not a route, that respond with
" 404 - Page Not Found
Sorry, the page you are looking for does not exist."

and when I try to navigate on a page with a specific layout, that working nice, not overlapped
## Solution :

Create a layout.(jsx|tsx) at the root without any ui, just your HTML structure, and all the stuff you wanna load (typo...)
and create a not-found.tsx file at the root

create you route using the route groups structure (like I've shown before)

try to go on a page that doesn't exist :
localhost:3000/fsdmlkjfdslkmjsdf

that's will display your custom error 404 page