Next.js: Missing Root Layout tags (html and body)

What it means in plain English

Next.js's Missing Root Layout tags page says this error occurs when the <html> and/or <body> tags are not defined in your Root Layout. Next.js's layout docs say the app directory must include a root layout, the top-most layout in the root app directory, typically app/layout.js. The root layout must define the <html> and <body> tags.

Any layout without a layout.js above it is also a root layout. That happens with route groups such as app/(shop)/layout.js, or when app/layout.js is left out so that app/dashboard/layout.js becomes a root layout.

Likely causes

• The root layout returns children on its own, with no <html> or <body> around it.
• The <html> tag is there but <body> is missing, or the other way round.
• There is no app/layout file, so a layout in a subfolder or route group became a root layout, and that layout has no <html> and <body>.

How to fix it, step by step

1. Open the root layout file in the app directory, for example app/layout.tsx.
2. Make sure it returns both an <html> and a <body> tag, with children inside <body>. This is the fix from Next.js's page:

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
      </body>
    </html>
  )
}

3. If your app has more than one root layout, such as one per route group, check each of them. Each root layout must define <html> and <body>.
4. Save, then run the dev server or next build again.

How to check it worked

• The Missing Root Layout tags error no longer appears in the browser or the terminal.
• next build finishes and the pages render.

Sources

• https://nextjs.org/docs/messages/missing-root-layout-tags (opens in a new tab)
• https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layout (opens in a new tab)