Root layout (required) in NextJS - Step-by-Step Execution

Concept Flow - Root layout (required)

Start App Request

↓

Load Root Layout

↓

Render <html> and <body>

↓

Insert Children Components

↓

Send Rendered HTML to Browser

↓

End

The root layout loads first, wraps the whole app in <html> and <body>, then inserts page content before sending to browser.

Execution Sample

NextJS

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

Defines the root layout component that wraps all pages with html and body tags.

Execution Table

Step	Action	Input	Output	Notes
1	Call RootLayout	{ children: <Page /> }	Start rendering <html>	Root layout receives children component
2	Render <html>	No props	<html lang="en">	Sets language attribute
3	Render <body>	No props	<body>	Body tag created inside html
4	Insert children	<Page />	<body><Page /></body>	Page content inserted inside body
5	Close tags	No props	</body></html>	Complete HTML structure formed
6	Return JSX	Complete JSX tree	Rendered HTML sent to browser	Root layout output ready
7	End	No input	Page displayed in browser	Rendering complete

💡 All children inserted inside <body> and full HTML structure returned for browser rendering

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
children	undefined	<Page />	<Page />	<Page />
html element	none	<html lang="en">	<html lang="en">	<html lang="en">
body element	none	none	<body>	<body><Page /></body>

Key Moments - 2 Insights

Why do we need to wrap children inside <html> and <body> tags?

The root layout defines the full HTML structure. Wrapping children inside <html> and <body> ensures the page is valid HTML and the browser can render it properly, as shown in execution_table steps 2-5.

What happens if we forget to include {children} in the root layout?

If {children} is missing, no page content will appear because the root layout won't insert the page components. Execution_table step 4 shows where children are inserted.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'children' after step 1?

A undefined

B <Page />

C null

D <RootLayout />

💡 Hint

Check the 'children' variable row in variable_tracker after step 1

At which step does the root layout insert the page content inside <body>?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Action' and 'Output' columns in execution_table for where children are inserted

If we remove the <html> tag from the root layout, what changes in the execution?

A The <body> tag will not render

B Children will not render

C The page will still render but HTML will be invalid

D The app will crash

💡 Hint

Consider the role of in the execution_table and variable_tracker

Concept Snapshot

Root layout wraps all pages in <html> and <body> tags.
It receives {children} which are the page content.
Always include {children} inside <body>.
Sets lang attribute on <html> for accessibility.
Next.js uses this layout to build full HTML.
Missing children means no page content shows.

Full Transcript

The root layout in Next.js is a special component that wraps all pages. It returns an HTML structure with <html> and <body> tags. The children prop contains the page content and must be inserted inside the <body>. This ensures the browser receives valid HTML to render. The root layout sets the language attribute on the <html> tag for accessibility. If children are missing, the page content won't appear. The execution steps show how the root layout builds the HTML tree step-by-step, inserting children before sending the final HTML to the browser.

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