Root layout (required) in NextJS - Mini Project: Build & Apply

Create a Root Layout in Next.js

📖 Scenario: You are building a simple website using Next.js. You want to create a root layout that wraps all pages with a consistent header and footer.

🎯 Goal: Build a root layout component in Next.js that includes a <header> with a site title, a <main> area for page content, and a <footer> with copyright text.

📋 What You'll Learn

Create a root layout component named RootLayout in app/layout.tsx

Use semantic HTML elements: <html>, <body>, <header>, <main>, and <footer>

Include a <header> with the text My Next.js Site

Render the children inside the <main> element

Add a <footer> with the text © 2024 My Next.js Site

Export the RootLayout as the default export

💡 Why This Matters

🌍 Real World

Root layouts in Next.js provide a consistent structure and styling for all pages in a website or app.

💼 Career

Understanding root layouts is essential for building scalable Next.js applications and working with the App Router.

1

Create the RootLayout component with HTML structure

Create a React functional component called RootLayout in app/layout.tsx. Inside it, return an <html lang="en"> element containing a <body> element. Do not add any children or content yet.

NextJS

export default function RootLayout() {
  return (
    
      
        {/* Your code here */}
      
    
  )
}

Hint

Start by creating a function named RootLayout that returns the basic HTML structure with lang="en" on the <html> tag.

2

Add header and footer elements inside the body

Inside the <body> element of RootLayout, add a <header> element with the text My Next.js Site and a <footer> element with the text © 2024 My Next.js Site. Do not add the main content area yet.

NextJS

export default function RootLayout() {
  return (
    
      
        {/* Add header and footer here */}
      
    
  )
}

Hint

Place the <header> and <footer> inside the <body> tags with the exact text.

3

Add a main element to render children

Add a <main> element between the <header> and <footer> inside the <body>. Render the children prop inside this <main> element. Add children as a parameter to the RootLayout function.

NextJS

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        My Next.js Site
        {/* Render children inside main here */}
        © 2024 My Next.js Site
      
    
  )
}

Hint

Remember to accept children as a parameter and place it inside a <main> element between header and footer.

4

Export RootLayout as default export

Ensure the RootLayout component is exported as the default export from app/layout.tsx. The full component should include the html, body, header, main with children, and footer elements.

NextJS

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        My Next.js Site
        {children}
        © 2024 My Next.js Site
      
    
  )
}

// Make sure this is the default export
// Your code here

Hint

The component should already be exported as default. Just verify the export statement is correct.

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