Layouts and Templates

Learn how to use layouts for shared UI and templates for per-page state management.

18 min

3 sections

layouts

templates

shared-ui

01. Understanding Layouts

Section 1 of 3

Layouts wrap child pages and preserve state across navigation. They're defined by layout.tsx files in route segments.

typescript

// app/layout.tsx (root layout)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <nav>Navigation</nav>
        {children}
        <footer>Footer</footer>
      </body>
    </html>
  );
}

App Router Fundamentals

Navigation and Linking

Back to Course