Topic

Use layouts and pages

Definition

In the App Router, page.tsx defines route-specific content and layout.tsx defines shared UI that wraps a route segment and its descendants.

In simpler words

A page is the screen for one URL; a layout is the durable frame around related screens.

Choose the file that owns UI so navigation, providers, and page-specific data do not become tangled.

Open official example (opens in new tab)

After this you can

Map page and layout files to a route
Choose page versus layout ownership
Use route groups to create separate shells

Compose shared frames

Layouts nest from the root down to the current segment. This makes them appropriate for shared navigation, application providers, and chrome that should survive a sibling navigation.

A page should own the content and data presentation specific to its route. Putting every page concern in a layout makes the shared frame difficult to reason about.

A layout wrapping a page

// app/course/layout.tsx (sketch)
export default function CourseLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

// app/course/[track]/page.tsx
export default function TrackPage() {
  return <TrackRoadmap />;
}

The navigation belongs to the shared shell; ticket content belongs to its page.

Mistake: fetching page-only data in a layout

// Wrong — every child route now depends on tickets
export default async function Layout() {
  const tickets = await getTickets();
  return <TicketList tickets={tickets} />;
}

// Right — fetch/render ticket-specific content in tickets/page.tsx

Layouts should not accidentally make sibling routes load unrelated data.

Keep providers intentional

Definition

A layout can provide stable context to its descendants, but a Client Component provider makes its subtree client-capable.

In simpler words

Place providers as low as their consumers allow.

Keep the root layout focused on document structure, global styles, and truly global providers.

Place interactive providers below server-rendered layout content when possible to preserve server boundaries.

Live playground

Layouts and pages playground

Move shared navigation between a page and layout, then predict which routes receive it.

layout.tsx (nav stays mounted)

page.tsx: Ticket list

Keep in mind

Put stable navigation in a layout.
Keep page-specific data and UI in page.tsx.
Use a route group when related pages need a different shell.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. How do nested layouts work?

Concept

Each page must import its parent layout and render it manuallyOnly the closest layout applies; parent layouts are ignoredLayouts nest only if you re-export children from each pageParent layouts wrap child layouts/pages automatically

2. Root layout requirement?

Syntax

Must include a <head> tag with every meta tag hardcodedMust be a Client Component with "use client" at the topMust include html and body for the App Router treeMust wrap children in a single <div id="root">

3. children prop in layout?

Practical

Where nested segment content rendersThe parent layout that this layout is nested insideAn array of every page in the folder to map overThe metadata object passed down from the root layout

4. When to add a segment layout?

Logic

Whenever a single page needs its own unique stylingTo fetch data that only one page in the section usesTo force the section’s pages to remount on navigationShared chrome for a section (dashboard nav, etc.)

5. Templates vs layouts?

Concept

Templates remount children on navigation; layouts persistTemplates persist state; layouts remount on every navigationTemplates run on the server; layouts run on the clientTemplates wrap layouts; layouts wrap pages

6. Does a layout re-fetch on every child navigation always?

Practical

Yes — layouts fully re-render and reset state on each navigationNo — layouts render once at build time and never updateOnly layouts marked "use client" persist across navigationsLayouts can persist client state across navigations within them

7. Multiple root layouts?

Syntax

Yes, but each must live in its own app/ directoryOnly by adding a second root layout.tsx at the app/ rootAdvanced route groups can enable multiple roots — use carefullyYes, and each additional root shares the same html/body tag

8. Page as default export?

Logic

No — pages use a named export like export function PageOnly layouts use default exports; pages use named onesPages export a config object rather than a componentYes — page/layout files export a component

9. Passing data from layout to page?

Concept

Layouts pass their fetched data to pages as props automaticallyPrefer fetching in the right segment; don’t invent prop drilling through layouts for everythingStore the data on window so the page can read it after mountReturn the data from the layout so the page receives it as a value

10. Which is true?

Practical

Pages compose shared UI; layouts fill the leaf contentLayouts and pages both render at the same route level identicallyPages define the html/body while layouts define the route pathLayouts compose shared UI; pages fill the leaf content

11. What must the root layout include?

Conceptintermediate

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

The html and body tags wrapping childrenA <head> element listing all script and meta tagsA top-level <div> that React hydrates intoA "use client" directive so children can be interactive

12. What does children represent here?

Syntaxintermediate

function DashboardLayout({ children }) {
  return (<><SideNav />{children}</>);
}

The SideNav component rendered beside itThe nested page or layout content for that segmentThe parent layout wrapping this dashboard layoutA list of every route in the dashboard folder

13. Why does layout state persist when navigating between child pages?

Practicaladvanced

// layout.tsx keeps a client counter across child navigations

Layouts are not remounted on navigation within themLayout state is stored in the URL and restored each timeReact caches the component tree in localStorage between routesLayouts remount but React preserves state by component key

14. How does a template differ from a layout?

Logicadvanced

// template.tsx instead of layout.tsx
export default function Template({ children }) {
  return <div>{children}</div>;
}

A template persists state; a layout resets it on navigationA template remounts with fresh state on each navigation; a layout persistsA template renders only on the server; a layout renders on bothA template can’t receive children; a layout can

15. What is required of a page file?

Conceptintermediate

export default function Page() { return <h1>Tickets</h1>; }

It named-exports a component called PageIt default-exports an object describing the route configIt exports a getServerSideProps function beside the componentIt default-exports a React component for that route

Checking your session…