Root layout (required) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a root layout component that wraps children in a <html> and <body>.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang=[1]>
      <body>{children}</body>
    </html>
  )
}

Drag options to blanks, or click blank then click option'

A"app"

B"en"

C"root"

D"main"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the lang attribute on the html tag.

Using an incorrect string for lang attribute.

The root layout should set the lang attribute on the <html> tag, commonly "en" for English.

2fill in blank

medium

Complete the code to import global CSS styles in the root layout file.

NextJS

import [1];

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Drag options to blanks, or click blank then click option'

A"globals.css"

Bstyles

C"./globals.css"

D"./globals"

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import CSS as a named import.

Omitting the file extension .css.

In Next.js root layout, global CSS is imported with the path string './globals.css'.

3fill in blank

hard

Fix the error in the root layout component by completing the metadata export with the correct title string.

NextJS

export const metadata = {
  title: [1],
  description: 'My Next.js app'
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Drag options to blanks, or click blank then click option'

AMyApp

BMy App

C'My App'

D"My App"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the string.

Using single quotes inconsistently.

The title value must be a string literal with quotes, for example "My App".

4fill in blank

hard

Fill both blanks to add a <head> element with a <title> inside the root layout.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>[1]<title>My App</title>[2]</head>
      <body>{children}</body>
    </html>
  )
}

Drag options to blanks, or click blank then click option'

A<>

B</>

C<React.Fragment>

D</React.Fragment>

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping multiple elements inside head.

Using invalid tags inside head.

Use empty fragment tags <> and to wrap multiple elements inside head if needed.

5fill in blank

hard

Fill all three blanks to create a root layout that imports global CSS, sets metadata, and renders children inside <html> and <body>.

NextJS

import [1];

export const metadata = {
  title: [2],
  description: 'Example app'
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>[3]</body>
    </html>
  )
}

Drag options to blanks, or click blank then click option'

A"./globals.css"

B"My Root Layout"

Cchildren

DRootLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing CSS correctly.

Missing quotes around title.

Not rendering children inside body.

Import global CSS with './globals.css', set title as a string, and render children inside body.

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