The Root Layout

The mandatory top-level wrapper that defines your HTML document.

Next.js4 min readConcept 7 of 65

The foundation of the app

Every Next.js App Router application must have a Root Layout. This is a layout.js (or .tsx) file placed at the very top of your app directory.

While normal layouts share UI between specific routes, the Root Layout shares UI across the *entire application*, wrapping every single page.

No more magic document

In older versions of Next.js, the framework magically provided the HTML skeleton, and you had to use special files like _app.js and _document.js to customize it.

The App Router removes that magic. You are in complete control of the document. The Root Layout is entirely responsible for returning the fundamental <html> and <body> tags.

The mandatory tags

A valid Root Layout must export a React component that accepts {children}, and it MUST return <html> and <body> tags containing those children.

This is also the perfect place to inject global CSS, global providers (like Redux or ThemeContext), and structural UI like a global navigation bar or footer.

The Document Tree

See how the Root Layout encapsulates everything, from global providers down to the innermost nested page.

app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
)
}
Document Tree
<html>
<body>
Global UI & Providers
{children}
Active Route Segment
+ nested layouts

The Root Layout completely replaces the old _document.js and _app.js files. The framework no longer generates HTML magically; you must explicitly return the mandatory <html> and <body> tags to construct a valid web page.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What two HTML tags are strictly mandatory inside a Next.js Root Layout?
  2. 2The Root Layout in the App Router replaces which two files from the older Pages Router?

Remember this

  • A Root Layout is required in the top level of the app directory.
  • It must contain the <html> and <body> tags.
  • It replaces the old _app.js and _document.js files.
  • You can have multiple root layouts by utilizing Route Groups.

Done with this concept?

Mark it complete to track your progress. No login needed.