0
0
NextJSframework~20 mins

Root layout (required) in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Root Layout Mastery
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 this root layout component?

Consider this Next.js root layout component. What will be rendered inside the <body> tag?

NextJS
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>My App</title>
      </head>
      <body>
        <header>Header Content</header>
        {children}
        <footer>Footer Content</footer>
      </body>
    </html>
  );
}
AHeader and footer inside <head> tag, children inside <body>
BOnly the children content without header or footer
CAn empty <body> tag with no content
D<header>Header Content</header> followed by children content followed by <footer>Footer Content</footer>
Attempts:
2 left
💡 Hint

Remember that the root layout wraps all pages and renders children inside the body.

📝 Syntax
intermediate
2:00remaining
Which option correctly defines a Next.js root layout component?

Choose the option that correctly defines a root layout component in Next.js 14+ using the App Router.

A
export default function RootLayout({ children }) {
  return &lt;html&gt;&lt;body&gt;{children}&lt;/body&gt;&lt;/html&gt;;
}
B
export function RootLayout() {
  return &lt;div&gt;{children}&lt;/div&gt;;
}
C
export default function RootLayout() {
  return &lt;html&gt;&lt;body&gt;{children}&lt;/body&gt;&lt;/html&gt;;
}
D
export default function RootLayout({ children }) {
  return &lt;body&gt;{children}&lt;/body&gt;;
}
Attempts:
2 left
💡 Hint

The root layout must accept children as a prop and return an html structure.

❓ lifecycle
advanced
2:00remaining
When does the root layout component run in Next.js App Router?

At what point does the root layout component execute in the Next.js App Router lifecycle?

AOnly when a user refreshes the browser manually
BOnce on the server at initial page load and reused for all client navigations
CEvery time a page component renders on the client
DOnly when a new route segment is loaded, never on initial load
Attempts:
2 left
💡 Hint

Think about how layouts persist across pages in Next.js App Router.

🔧 Debug
advanced
2:00remaining
Why does this root layout cause a hydration error?

Given this root layout code, why might Next.js show a hydration mismatch error?

NextJS
export default function RootLayout({ children }) {
  const date = new Date().toLocaleString();
  return (
    <html lang="en">
      <body>
        <p>Current time: {date}</p>
        {children}
      </body>
    </html>
  );
}
ABecause the date value changes on client and server causing mismatch
BBecause the component does not import React explicitly
CBecause the html tag is missing the lang attribute
DBecause children is not rendered inside a fragment
Attempts:
2 left
💡 Hint

Think about what happens when server and client render different content.

❓ state_output
expert
2:00remaining
What is the value of count after this root layout updates state?

In this root layout component, what will be the value of count after clicking the button twice?

NextJS
'use client';
import { useState } from 'react';

export default function RootLayout({ children }) {
  const [count, setCount] = useState(0);

  return (
    <html lang="en">
      <body>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <p>Count: {count}</p>
        {children}
      </body>
    </html>
  );
}
ACount: 0
BCount: 1
CCount: 2
DCount: NaN
Attempts:
2 left
💡 Hint

Remember how useState updates state on button clicks.