Nested layouts in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of nested layouts in Next.js?

Given the following Next.js nested layout structure, what will be the visible output on the page?

NextJS

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Root Header</header>
        {children}
        <footer>Root Footer</footer>
      </body>
    </html>
  );
}

app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>Dashboard Nav</nav>
      {children}
    </section>
  );
}

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

A

Root Header
Dashboard Nav
Dashboard Content
Root Footer

B

Dashboard Nav
Root Header
Dashboard Content
Root Footer

C

Root Header
Dashboard Content
Dashboard Nav
Root Footer

D

Dashboard Content
Dashboard Nav
Root Header
Root Footer

💡 Hint

Remember that nested layouts wrap their children inside the parent layout's structure.

The RootLayout wraps the entire app with header and footer. The DashboardLayout nests inside RootLayout and adds its nav before rendering the page content. So the order is Root Header, Dashboard Nav, Dashboard Content, Root Footer.

📝 Syntax

intermediate

Which Next.js nested layout code snippet is syntactically correct?

Identify the correct syntax for a nested layout component in Next.js.

A

export default function Layout({children}) {
  return <div>{children}</div>
}

B

export default function Layout(children) {
  return <div>{children}</div>;
}

C

export default function Layout() {
  return <div>{children}</div>;
}

D

export default function Layout({ children }) {
  return <div>{children}</div>;
}

💡 Hint

Check for correct function parameter destructuring and JSX syntax.

Option D correctly destructures children from props and returns valid JSX with proper closing tags and semicolons.

❓ state_output

advanced

What is the output when state is updated in nested layouts?

Consider a nested layout in Next.js where a state is updated in a child layout. What will be the visible output after clicking the button?

NextJS

app/layout.js
'use client';
import { useState } from 'react';
export default function RootLayout({ children }) {
  const [count, setCount] = useState(0);
  return (
    <html lang="en">
      <body>
        <header>Count: {count}</header>
        {children(setCount)}
      </body>
    </html>
  );
}

app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <section>
      <button onClick={() => children((c) => c + 1)}>Increment</button>
      {children}
    </section>
  );
}

app/dashboard/page.js
export default function DashboardPage({ setCount }) {
  return <main>Dashboard Content</main>;
}

A Header shows 'Count: 0' but button does not increment count

B Header shows 'Count: 0' and button increments count on click

C Header shows 'Count: NaN' after clicking button

D Page crashes with TypeError on button click

💡 Hint

Think about how props and children are passed and used in React components.

The button tries to call children as a function, but children is a React node, not a function. So the count state does not update and remains 0.

🔧 Debug

advanced

Why does this nested layout cause a runtime error?

Given the following Next.js nested layout code, why does it cause a runtime error?

NextJS

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Root Header</header>
        {children}
        <footer>Root Footer</footer>
      </body>
    </html>
  );
}

app/dashboard/layout.js
export default function DashboardLayout() {
  return (
    <section>
      <nav>Dashboard Nav</nav>
      {children}
    </section>
  );
}

A RootLayout is missing a closing tag causing SyntaxError

B DashboardLayout does not receive 'children' prop, causing ReferenceError

C DashboardLayout returns invalid JSX without a root element

D RootLayout does not wrap children in a React fragment causing error

💡 Hint

Check the function parameters and usage of 'children' in DashboardLayout.

DashboardLayout does not declare 'children' in its parameters but tries to use it, causing a ReferenceError at runtime.

🧠 Conceptual

expert

How does Next.js determine which nested layouts to render for a page?

In Next.js App Router, how does the framework decide which nested layouts to render when you visit a deeply nested page?

A Next.js renders layouts randomly depending on folder names

B Next.js only renders the layout closest to the page and ignores parent layouts

C Next.js renders all layouts from the root folder down to the page folder, nesting them in order

D Next.js requires manual imports of all layouts in the page component to render them

💡 Hint

Think about how nested folders and layouts relate in the App Router.

Next.js automatically composes layouts from the root folder down through nested folders to the page, nesting them in the order of the folder structure.

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