0
0
NextJSframework~20 mins

Nested layouts in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Nested Layouts Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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
Attempts:
2 left
💡 Hint

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

📝 Syntax
intermediate
1:30remaining
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 &lt;div&gt;{children}&lt;/div&gt;
}
B
export default function Layout(children) {
  return &lt;div&gt;{children}&lt;/div&gt;;
}
C
export default function Layout() {
  return &lt;div&gt;{children}&lt;/div&gt;;
}
D
export default function Layout({ children }) {
  return &lt;div&gt;{children}&lt;/div&gt;;
}
Attempts:
2 left
💡 Hint

Check for correct function parameter destructuring and JSX syntax.

❓ state_output
advanced
2:30remaining
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>;
}
AHeader shows 'Count: 0' but button does not increment count
BHeader shows 'Count: 0' and button increments count on click
CHeader shows 'Count: NaN' after clicking button
DPage crashes with TypeError on button click
Attempts:
2 left
💡 Hint

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

🔧 Debug
advanced
2:00remaining
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>
  );
}
ARootLayout is missing a closing tag causing SyntaxError
BDashboardLayout does not receive 'children' prop, causing ReferenceError
CDashboardLayout returns invalid JSX without a root element
DRootLayout does not wrap children in a React fragment causing error
Attempts:
2 left
💡 Hint

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

🧠 Conceptual
expert
2:30remaining
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?

ANext.js renders layouts randomly depending on folder names
BNext.js only renders the layout closest to the page and ignores parent layouts
CNext.js renders all layouts from the root folder down to the page folder, nesting them in order
DNext.js requires manual imports of all layouts in the page component to render them
Attempts:
2 left
💡 Hint

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