Set Up a Root Layout in App Router

Next.js

React

JavaScript

Technical Specification

Create a root layout in the app directory with shared HTML structure and metadata.

Input/Output Samples

Input:app/layout.tsx

Output:All pages share same shell

Optimal Logic Path

export const metadata = {
  title: "My App",
};

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

Architectural Deep-Dive

In the App Router, root layout defines the HTML structure and wraps every page.