Skip to main content

Layouts

Shared UI that wraps pages and persists across navigation.

Official docs

Pages and Layouts — nextjs.org

Root Layout​

Required in app/layout.tsx — wraps the entire application:

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

Nested Layouts​

Layouts in subdirectories wrap only their segment's pages. State in layouts is preserved during client-side navigation.