Nested layouts in NextJS - Step-by-Step Execution

Concept Flow - Nested layouts

Start App

↓

Root Layout Render

↓

Nested Layout 1 Render

↓

Nested Layout 2 Render

↓

Page Component Render

↓

Display Full Page with Nested Layouts

↓

User Navigates -> Next Page

↓

Reuse Layouts or Render New Nested Layouts

↓

Update Page Content

↓

Render Updated View

The app starts by rendering the root layout, then nested layouts inside it, and finally the page component. When navigating, layouts can be reused or new nested layouts rendered, updating the page content.

Execution Sample

NextJS

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

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

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

This code shows a root layout wrapping a dashboard layout, which wraps a page component displaying a heading.

Execution Table

Step	Component Rendered	Children Prop	Output Rendered	Notes
1	RootLayout	DashboardLayout	<html><body><section><h1>Dashboard Home</h1></section></body></html>	RootLayout wraps all content
2	DashboardLayout	Page	<section><h1>Dashboard Home</h1></section>	DashboardLayout wraps page content
3	Page	None	<h1>Dashboard Home</h1>	Page renders heading
4	User navigates to /dashboard/settings	DashboardLayout	<html><body><section><h1>Settings</h1></section></body></html>	Page changes, layouts reused
5	DashboardLayout	SettingsPage	<section><h1>Settings</h1></section>	DashboardLayout wraps new page
6	SettingsPage	None	<h1>Settings</h1>	Settings page renders heading
7	User navigates to /profile	ProfileLayout	<html><body><main><h1>Profile</h1></main></body></html>	New nested layout used
8	ProfileLayout	ProfilePage	<main><h1>Profile</h1></main>	ProfileLayout wraps profile page
9	ProfilePage	None	<h1>Profile</h1>	Profile page renders heading
10	End	None	Rendering complete	No more navigation

💡 Rendering stops when user stops navigating or closes the app.

Variable Tracker

Variable	Start	After Step 1	After Step 4	After Step 7	Final
children	undefined	DashboardLayout component	DashboardLayout with SettingsPage	ProfileLayout with ProfilePage	ProfileLayout with ProfilePage
currentPage	undefined	Dashboard Home	Settings	Profile	Profile

Key Moments - 3 Insights

Why does the RootLayout render only once even when navigating between pages?

Because RootLayout is the top-level layout wrapping all pages, it stays mounted and only the nested layouts and pages inside it update, as shown in execution_table rows 1, 4, and 7.

How do nested layouts pass content down to pages?

Nested layouts receive their child content as the 'children' prop and render it inside their JSX, demonstrated in execution_table rows 2 and 5 where DashboardLayout wraps the page components.

What happens when navigating to a page with a different nested layout?

Next.js renders the new nested layout and its page inside the RootLayout, replacing the previous nested layout, as seen in execution_table rows 7-9.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'children' prop of DashboardLayout at Step 4?

A RootLayout component

B SettingsPage component

C DashboardLayout component

D ProfilePage component

💡 Hint

Check the 'Children Prop' column at Step 4 in the execution_table.

At which step does the app render a new nested layout different from DashboardLayout?

A Step 7

B Step 4

C Step 2

D Step 9

💡 Hint

Look for when ProfileLayout appears in the 'Component Rendered' column.

If the RootLayout was removed, what would happen to the rendered output at Step 1?

A DashboardLayout would wrap RootLayout

B The page would not render at all

C The page would render without <html> and <body> tags

D The page would render twice

💡 Hint

RootLayout provides the and tags as shown in the output rendered at Step 1.

Concept Snapshot

Nested layouts in Next.js wrap page components inside each other.
RootLayout is the top wrapper, nested layouts go inside it.
Each layout receives 'children' prop to render inner content.
Layouts stay mounted across navigation if reused.
New nested layouts replace old ones when route changes.
This creates consistent page structure and UI reuse.

Full Transcript

Nested layouts in Next.js work by wrapping page components inside multiple layout components. The app starts rendering from the RootLayout, which wraps nested layouts like DashboardLayout or ProfileLayout. Each layout receives its inner content as the 'children' prop and renders it inside its JSX. When the user navigates, Next.js reuses layouts if possible or renders new nested layouts for different routes. This keeps the page structure consistent and allows UI parts like headers or sidebars to stay visible while only the page content changes. The execution table shows step-by-step how layouts and pages render and update during navigation, tracking the 'children' prop and current page content. Key moments clarify why RootLayout renders once, how children pass through layouts, and what happens when switching nested layouts. The visual quiz tests understanding of these steps and props. Overall, nested layouts help organize and reuse UI in Next.js apps efficiently.

Practice

1. What is the main purpose of nested layouts in Next.js?

easy

A. To handle user authentication

B. To load data from external APIs

C. To share common UI parts like headers and sidebars across pages

D. To manage server-side rendering only

Solution

1. Step 1: Understand what nested layouts do

   Nested layouts allow you to reuse UI parts like headers and sidebars in multiple pages.

2. Step 2: Compare with other options

   Loading data, authentication, and server-side rendering are separate concerns not handled by nested layouts.

3. Final Answer:

   To share common UI parts like headers and sidebars across pages -> Option C

4. Quick Check:

   Nested layouts = shared UI parts [OK]

Hint: Nested layouts share UI parts like headers [OK]

Common Mistakes:

• Confusing layouts with data fetching
• Thinking layouts handle authentication
• Believing layouts only affect server rendering

2. Which file name is used to define a layout in Next.js 14+ nested layouts system?

easy

A. index.js

B. page.js

C. app.js

D. layout.js

Solution

1. Step 1: Recall Next.js layout file naming

   Layouts are defined in files named layout.js inside folders.

2. Step 2: Differentiate from other files

   page.js defines pages, app.js is not used in App Router, and index.js is a page entry.

3. Final Answer:

   layout.js -> Option D

4. Quick Check:

   Layout file = layout.js [OK]

Hint: Layouts use layout.js files, not page.js [OK]

Common Mistakes:

• Using page.js instead of layout.js for layouts
• Confusing app.js with layout.js
• Thinking index.js defines layouts

3. Given this folder structure and files:

/app/layout.js
  export default function RootLayout({ children }) {
    return {children}
  }

/app/dashboard/layout.js
  export default function DashboardLayout({ children }) {
    return 
{children}
  }

/app/dashboard/page.js
  export default function DashboardPage() {
    return 
Dashboard
  }

What will be the rendered HTML structure when visiting /dashboard?

medium

A. Dashboard

B. Dashboard

C. Dashboard

D. Dashboard

Solution

1. Step 1: Understand layout nesting order

   The root layout wraps the whole app with <html><body>. The dashboard layout wraps the dashboard page inside a <section>.

2. Step 2: Combine layouts and page output

   The final output nests the dashboard page inside <section>, which is inside <body> and <html>.

3. Final Answer:

   <html><body><section><h1>Dashboard</h1></section></body></html> -> Option B

4. Quick Check:

   Layouts wrap children in folder order [OK]

Hint: Layouts wrap children top-down by folder nesting [OK]

Common Mistakes:

• Mixing order of html and section tags
• Placing body inside section incorrectly
• Ignoring root layout wrapping

4. You have this layout file:

export default function Layout({ children }) {
  return 
{children}
}

But your page content does not appear inside the layout when you visit the page. What is the likely cause?

medium

A. The layout file is not named layout.js

B. The layout component must return a fragment, not a div

C. The page file is missing export default

D. The layout component must not accept children

Solution

1. Step 1: Check layout file naming

   Next.js requires the layout file to be named exactly layout.js to apply nested layouts.

2. Step 2: Verify other options

   Returning a div is valid, pages must export default, and layouts must accept children to render nested content.

3. Final Answer:

   The layout file is not named layout.js -> Option A

4. Quick Check:

   Layout file name = layout.js [OK]

Hint: Layout file must be named layout.js exactly [OK]

Common Mistakes:

• Using wrong file name like Layout.js or layout.jsx
• Thinking layout can't use div wrapper
• Forgetting to export default in page

5. You want a nested layout structure where:
- The root layout adds a header
- The dashboard layout adds a sidebar
- The dashboard page shows content

Which code correctly nests these layouts and page in Next.js 14+?

// /app/layout.js
export default function RootLayout({ children }) {
  return 
Header
{children}
}

// /app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return 
Sidebar
{children}
}

// /app/dashboard/page.js
export default function DashboardPage() {
  return 
Dashboard Content
}

hard

A. The page content will be inside <main> inside <div> with sidebar, wrapped by <body> with header

B. The sidebar will replace the header because layouts cannot nest

C. The header will not show because only one layout is allowed

D. The page will render without sidebar or header because layouts are ignored

Solution

1. Step 1: Understand layout nesting in Next.js

   Layouts nest by folder structure: root layout wraps dashboard layout, which wraps the page.

2. Step 2: Analyze the given code structure

   The root layout adds a header inside . The dashboard layout adds a sidebar inside a div. The page renders main content.

3. Step 3: Combine nesting results

   The final render is
   Header
   Sidebar

   Dashboard Content
   .

4. Final Answer:

   The page content will be inside <main> inside <div> with sidebar, wrapped by <body> with header -> Option A

5. Quick Check:

   Layouts nest by folder, wrapping children [OK]

Hint: Layouts wrap children top-down by folder nesting [OK]

Common Mistakes:

• Thinking layouts replace each other instead of nesting
• Assuming only one layout can be active
• Ignoring children prop in layouts