Next.js Discord

Discord Forum

Ignoring app/layout.tsx for app/not-found.tsx

Answered
English Spot posted this in #help-forum
Open in Discord
English SpotOP
Basically what the title says, i have tried to look around for some examples but they point to global-error.tsx which i don't want. Iwant a specific error page for not-found
Is there any way to do it? TIA

This is my layout.tsx
    <html lang="en">
      <body
        className={`min-h-screen w-full bg-themeLight ${montserrat.className}`}
      >
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>

This is my not-found.tsx
import Link from "next/link";

export const NotFound = () => {
  return (
    <>
      <h1>404 - Page Not Found</h1>
      <Link href="/">Go back home</Link>
    </>
  );
};

export default NotFound;
Answered by Shy Albatross
you can create a group like /app/(applayout) and move your footer+header layout there, out of the root layout, then not-found will not be affected by the header and footer that you put in root layout
View full answer

16 Replies

English SpotOP
This is how it looks like
Shy Albatross
you can create a group like /app/(applayout) and move your footer+header layout there, out of the root layout, then not-found will not be affected by the header and footer that you put in root layout
Answer
Shy Albatross
so /app/layout.tsx would be
    <html lang="en">
      <body
        className={`min-h-screen w-full bg-themeLight ${montserrat.className}`}
      >
        {children}
      </body>
    </html>

and /app/(applayout)/layout.tsx would be
        <Navbar />
        {children}
        <Footer />
your not-found.tsx doesn't change, but you have to move pages inside /app/(applayout)
English SpotOP
isnt this gonna make my app starting route gonna be
https://localhost:3000/applayout/**
Shy Albatross
no
English SpotOP
ah okay i see, thank you!
I am still looking for more elegant way, but I guess this also works
Because this add more folder into the app which i don't like
Shy Albatross
well it's file based so there's no other way than adding more files and folders
English SpotOP
Maybe another way is to make my not-found absolute and cover the entire screen
:thonk:
Shy Albatross
you would still be rendering that and sending that to the client so definitely not a great solution
and by that I mean the whole layout
header, footer, whatnot
English SpotOP
yeah, thanks :bcaYaya3: