LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1015 min read

Pages and Layouts

Understand how page.tsx and layout.tsx work together to build every screen in a Next.js app.

What Is a Page?

A page is the unique content for a specific route. It is a React component exported by default from a page.tsx file.

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>We build learning tools for developers.</p>
    </main>
  );
}

What Is a Layout?

A layout is UI shared across multiple pages. It wraps its child segments and, crucially, does not re-render when navigating between pages that share it — preserving its own state (like a scroll position or an open menu) across navigation.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <aside>Sidebar Navigation</aside>
      <section>{children}</section>
    </div>
  );
}

Every layout receives a children prop — this is where Next.js injects the matching page (or nested layout) for the current route.

The Root Layout

Every Next.js App Router project must have a root layout at app/layout.tsx. It is the only layout that must include <html> and <body> tags, since it wraps the entire application.

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

Unlike other layouts, the root layout.tsx is not optional — Next.js will not build without one, because it's responsible for the document's <html> and <body> tags.

Passing Data Between Layouts and Pages

Layouts and pages cannot pass props to each other directly — they don't share a parent-to-child relationship in the usual React sense beyond the children slot. To share data across both, fetch it independently in each, or lift it into a shared module, context provider, or URL parameter.

Common Beginner Mistakes

Forgetting to render {children} in a layout

Without rendering children, the actual page content never appears — only the shared layout UI shows.

Adding <html>/<body> to a nested layout

Only the root layout should include these tags — nested layouts return regular JSX fragments.

FAQs

Yes — layouts nest. A page can be wrapped by the root layout, a section layout, and a further nested layout, all at once.

No — layouts persist across navigations within their segment, so their state and any data they've fetched are preserved rather than reloaded.

Summary

Pages hold unique content; layouts hold shared, persistent UI around them. Next, you'll see how nesting multiple layouts lets you build up shared UI level by level.

Next Lesson →

Nested Layouts