Root layout (required) in NextJS

Introduction

The root layout is the main wrapper for all pages in a Next.js app. It helps keep common parts like headers or footers consistent everywhere.

You want a consistent header and footer on every page.

You need to add global styles or fonts once for the whole app.

You want to set metadata like page title or language for all pages.

You want to wrap all pages with a context provider or theme.

You want to add a navigation menu that appears on every page.

Syntax

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Common UI like header */}
        {children}
        {/* Common UI like footer */}
      </body>
    </html>
  )
}

The children prop represents the page content inside the layout.

The root layout must be named layout.js or layout.tsx and placed in the app/ folder.

Examples

This root layout adds a header and footer around every page.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My Site Header</header>
        {children}
        <footer>My Site Footer</footer>
      </body>
    </html>
  )
}

A minimal root layout that just wraps pages in a <main> tag.

NextJS

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

Sample Program

This root layout adds a styled header and footer around the page content. Every page will show the same header and footer automatically.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header style={{ padding: '1rem', backgroundColor: '#eee' }}>
          <h1>Welcome to My Next.js App</h1>
        </header>
        <main style={{ padding: '1rem' }}>
          {children}
        </main>
        <footer style={{ padding: '1rem', backgroundColor: '#eee', marginTop: '2rem' }}>
          <p>© 2024 My Next.js App</p>
        </footer>
      </body>
    </html>
  )
}

Important Notes

The root layout wraps all pages, so changes here affect the whole app.

Use semantic HTML tags like <header>, <main>, and <footer> for better accessibility.

Remember to set the lang attribute on the <html> tag for screen readers and SEO.

Summary

The root layout is the main wrapper for all pages in Next.js.

It helps keep common UI and settings consistent across the app.

Always place it in the app/ folder as layout.js or layout.tsx.

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