The root layout must define a <html> and <body> tag to allow adding global UI by other components.

The root layout must define a <html> and <body> tag to allow adding global UI by other components.

Root layout-filen (`app/layout.js`) måste returnera `<html>` och `<body>` som yttersta element.

Förklaring

I App Router är app/layout.js den fil som omsluter hela applikationen. Next.js kräver att den returnerar en HTML-struktur med <html> och <body> som yttersta element. Här kan Next.js injicera metadata, scripts, och globala UI-element.

Felet är vanligast när man precis börjat ett nytt App Router-projekt och skapar en layout utan den obligatoriska strukturen, eller när man migrerar från Pages Router där _app.js och _document.js hanterade detta separat.

Nested layouts i undermappar behöver inte <html> och <body> — det är bara root layout som kräver det.

Vanliga orsaker

Root layout returnerar bara en wrapper-<div> utan <html> och <body>. Glömt att inkludera {children} inuti <body>.

Lösning

Root layout ska se ut så här:

export default function RootLayout({ children }) {
  return (
    <html lang="sv">
      <body>{children}</body>
    </html>
  );
}

lang-attributet är viktigt för tillgänglighet och SEO. Nested layouts returnerar bara ett vanligt element kring {children}.