Next.js Discord

Discord Forum

not found page The following tags are missing in the Root Layout: <html>, <body>.

Unanswered
Briard posted this in #help-forum
Open in Discord
BriardOP
i made not-found.tsx page for unmatched routes
"use client";
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}


this is my layout 
import { ReactNode } from "react";
import "./globals.css";

type Props = {
  children: ReactNode;
};

// Root layout required for Next.js App Router
export default function RootLayout({ children }: Readonly<Props>) {
  return <>{children}</>;
}


i know i should maybe add html, body tags but it's causing hydration error to all other pages for example dashboard and admin routes

4 Replies

LuisLl
Root Layout needs to have the <html> or <body> tags. If what you want is multiple of your nested layouts to have their own <html> and <body> tags then remove the Root Layout completely.
And root layouts should stay on the root of the app/ directory, so make sure any layout that end ups having the <html> and <body> tags is rendering in the root path. If you need to group segments to give each a different layout, then use (folder)
Roseate Spoonbill
@Briard They rely on html and body being provided in nested layouts. E.g. https://github.com/ever-co/ever-teams/blob/dedabff7bf6782e9096a5f356ce051082271a7ba/apps/web/app/%5Blocale%5D/layout.tsx
At that point their root layout is simply a passthrough without additions. I've no idea how and why it works for them if they don't have html/body tags in root-level not-found, other than it's not being used and simply overridden by relevant subpath/not-found.tsx (like in this case: https://github.com/ever-co/ever-teams/blob/dedabff7bf6782e9096a5f356ce051082271a7ba/apps/web/app/%5Blocale%5D/not-found.tsx)