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

Challenge - 5 Problems

❓ component_behavior

intermediate

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>
  );
}

A Header and footer inside <head> tag, children inside <body>

B Only the children content without header or footer

C An empty <body> tag with no content

D <header>Header Content</header> followed by children content followed by <footer>Footer Content</footer>

💡 Hint

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

The root layout component wraps the entire app. The {children} prop represents the page content. Header and footer are rendered around children inside the body.

📝 Syntax

intermediate

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 <html><body>{children}</body></html>;
}

B

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

C

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

D

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

💡 Hint

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

Option A correctly defines a root layout with children prop and returns html and body tags wrapping children. Option A misses children prop. Option A misses children prop. Option A returns body without html tag.

❓ lifecycle

advanced

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?

A Only when a user refreshes the browser manually

B Once on the server at initial page load and reused for all client navigations

C Every time a page component renders on the client

D Only when a new route segment is loaded, never on initial load

💡 Hint

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

The root layout runs once on the server during the initial page load and is reused for client-side navigations to preserve state and improve performance.

🔧 Debug

advanced

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>
  );
}

A Because the date value changes on client and server causing mismatch

B Because the component does not import React explicitly

C Because the html tag is missing the lang attribute

D Because children is not rendered inside a fragment

💡 Hint

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

The date string is generated at render time on server and client differently, causing the HTML to differ and triggering hydration mismatch errors.

❓ state_output

expert

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>
  );
}

A Count: 0

B Count: 1

C Count: 2

D Count: NaN

💡 Hint

Remember how useState updates state on button clicks.

Each click increments count by 1. After two clicks, count becomes 2 and is displayed.

Practice

1. What is the main purpose of the root layout in a Next.js app?

easy

A. To handle database connections

B. To define API routes for the app

C. To wrap all pages and keep common UI consistent

D. To manage client-side state only

Solution

1. Step 1: Understand the role of root layout

   The root layout wraps all pages and components, providing a shared structure.

2. Step 2: Identify what it manages

   It keeps common UI elements and settings consistent across the app.

3. Final Answer:

   To wrap all pages and keep common UI consistent -> Option C

4. Quick Check:

   Root layout = common UI wrapper [OK]

Hint: Root layout wraps all pages for shared UI [OK]

Common Mistakes:

• Confusing root layout with API routes
• Thinking root layout manages database
• Assuming root layout handles only client state

2. Which file name and location is correct for the root layout in Next.js 14+?

easy

A. app/layout.js

B. pages/_app.js

C. app/rootLayout.jsx

D. components/layout.tsx

Solution

1. Step 1: Recall Next.js 14+ root layout location

   The root layout must be named layout.js or layout.tsx inside the app/ folder.

2. Step 2: Check options for correct file and folder

   Only app/layout.js matches the required name and location.

3. Final Answer:

   app/layout.js -> Option A

4. Quick Check:

   Root layout = app/layout.js [OK]

Hint: Root layout is always app/layout.js or app/layout.tsx [OK]

Common Mistakes:

• Using pages/_app.js instead of app/layout.js
• Naming file rootLayout.jsx instead of layout.js
• Placing layout in components folder

3. Given this root layout code in app/layout.js, what will be rendered on every page?

export default function RootLayout({ children }) {
  return (
    
      
        
My Site Header
        {children}
        
My Site Footer
      
    
  )
}

medium

A. Only the children content without header or footer

B. An error because <html> cannot be used here

C. Header and footer only, children ignored

D. Header, children content, and footer on every page

Solution

1. Step 1: Analyze the returned JSX structure

   The root layout returns an html element with body containing header, children, and footer.

2. Step 2: Understand children prop usage

   The {children} placeholder renders the page content inside the layout.

3. Final Answer:

   Header, children content, and footer on every page -> Option D

4. Quick Check:

   Root layout renders header + children + footer [OK]

Hint: Children renders page content inside layout [OK]

Common Mistakes:

• Thinking children is ignored
• Believing <html> tag causes error here
• Assuming only children render without header/footer

4. What is wrong with this root layout code in app/layout.js?

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

      
Site Header
      {children}
      
Site Footer
    
  )
}

medium

A. Footer cannot be inside a div

B. Root layout must return an <html> element wrapping content

C. Children prop is missing

D. Function must be named Layout, not RootLayout

Solution

1. Step 1: Recall Next.js root layout requirements

   The root layout must return an html element wrapping the entire page content.

2. Step 2: Identify the missing html tag

   This code returns a div instead of html, which breaks Next.js layout rules.

3. Final Answer:

   Root layout must return an <html> element wrapping content -> Option B

4. Quick Check:

   Root layout requires <html> wrapper [OK]

Hint: Root layout must wrap with <html> tag [OK]

Common Mistakes:

• Using div instead of html as root element
• Forgetting to include children prop
• Misnaming the layout function

5. You want to add a global font and metadata to your Next.js app using the root layout. Which approach is correct in app/layout.js?

export default function RootLayout({ children }) {
  return (
    
      
        
        My App
      
      
        {children}
      
    
  )
}

hard

A. This is correct; use <head> inside root layout for metadata and fonts

B. You cannot use <head> in root layout; use _document.js instead

C. Fonts must be imported inside each page, not root layout

D. Metadata should be set only in next.config.js

Solution

1. Step 1: Understand Next.js 14+ root layout capabilities

   The root layout can include <head> to add metadata and global styles.

2. Step 2: Verify usage of <head> for fonts and title

   Including a link for fonts and a title inside <head> is the correct way to add global styles and metadata.

3. Final Answer:

   This is correct; use <head> inside root layout for metadata and fonts -> Option A

4. Quick Check:

   Use <head> in root layout for global metadata [OK]

Hint: Add global fonts and metadata inside <head> in root layout [OK]

Common Mistakes:

• Thinking <head> is disallowed in root layout
• Importing fonts only in individual pages
• Setting metadata only in config files