Layout navigation behavior in NextJS - Step-by-Step Execution

Concept Flow - Layout navigation behavior

User clicks a link

↓

Next.js intercepts navigation

↓

Check if new page uses same layout

↓

Reuse existing layout

↓

Load new page content

↓

Render new page

↓

Update browser URL

↓

User sees new page

When a user clicks a link, Next.js checks if the new page shares the current layout. If yes, it reuses the layout and loads only new content. Otherwise, it unmounts the old layout and mounts the new one before rendering.

Execution Sample

NextJS

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

// User navigates from /home to /about
// Both pages use RootLayout

This code shows a root layout wrapping page content. When navigating between pages using this layout, Next.js reuses the layout and only updates the page content.

Execution Table

Step	User Action	Layout Check	Layout Action	Page Content Action	Browser URL	User View
1	Clicks link to /about	Does /about use RootLayout? Yes	Reuse RootLayout	Load /about content	/about	Page content changes, layout stays
2	Clicks link to /contact	Does /contact use RootLayout? No	Unmount RootLayout, mount ContactLayout	Load /contact content	/contact	Layout and page content update
3	Clicks link to /home	Does /home use RootLayout? Yes	Reuse RootLayout	Load /home content	/home	Page content changes, layout stays
4	Clicks external link	Next.js does not intercept	No layout action	Browser navigates fully	External URL	Full page reload
5	Clicks link to /about	Does /about use RootLayout? Yes	Reuse RootLayout	Load /about content	/about	Page content changes, layout stays

💡 Navigation ends when user stops clicking links or leaves Next.js app

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
Current Layout	RootLayout	RootLayout	ContactLayout	RootLayout	ContactLayout (left app)	RootLayout
Page Content	/home	/about	/contact	/home	External page	/about
Browser URL	/home	/about	/contact	/home	External URL	/about

Key Moments - 3 Insights

Why does the layout sometimes stay the same when navigating?

Because Next.js checks if the new page uses the same layout component. If yes, it reuses the layout to avoid reloading it, as shown in execution_table steps 1, 3, and 5.

What happens when navigating to a page with a different layout?

Next.js unmounts the old layout and mounts the new layout before rendering the page content, as seen in execution_table step 2.

Why does clicking an external link cause a full page reload?

Next.js only intercepts internal links. External links cause the browser to load a new page fully, shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the layout after step 2?

A No layout

B RootLayout

C ContactLayout

D ExternalLayout

💡 Hint

Check the 'Layout Action' and 'Current Layout' columns at step 2 in execution_table and variable_tracker

At which step does the browser URL change to /home?

A Step 3

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Browser URL' column in execution_table for /home

If the /contact page used RootLayout instead of ContactLayout, what would change in step 2?

A Layout would unmount and mount as before

B Layout would be reused, no unmount/mount

C Page content would not load

D Browser URL would not update

💡 Hint

Refer to the 'Layout Check' and 'Layout Action' columns in execution_table step 2

Concept Snapshot

Next.js Layout Navigation Behavior:
- When navigating, Next.js checks if new page uses current layout.
- If yes, it reuses layout and only updates page content.
- If no, it unmounts old layout and mounts new layout.
- External links cause full page reload.
- This improves speed by avoiding unnecessary layout reloads.

Full Transcript

This visual execution shows how Next.js handles layout navigation. When a user clicks a link, Next.js intercepts the navigation. It checks if the new page uses the same layout as the current page. If yes, it reuses the existing layout and loads only the new page content, making navigation faster and smoother. If the new page uses a different layout, Next.js unmounts the old layout and mounts the new one before rendering the page content. External links are not intercepted and cause a full page reload. The execution table traces these steps with user actions, layout checks, layout and content updates, browser URL changes, and what the user sees. The variable tracker shows how the current layout, page content, and browser URL change after each navigation step. Key moments clarify common confusions about layout reuse, layout switching, and external link behavior. The quiz tests understanding by asking about layout states and URL changes at specific steps. The snapshot summarizes the core behavior for quick reference.

Practice

1. What is the main purpose of using a RootLayout in Next.js?

easy

A. To load all pages at once for faster initial load

B. To keep common UI elements like headers and footers visible during navigation

C. To disable client-side navigation

D. To create separate CSS files for each page

Solution

1. Step 1: Understand what RootLayout does

   The RootLayout wraps all pages and keeps shared UI elements visible.

2. Step 2: Identify the benefit during navigation

   It allows headers and footers to stay visible, so only page content changes, making navigation smooth.

3. Final Answer:

   To keep common UI elements like headers and footers visible during navigation -> Option B

4. Quick Check:

   Layouts keep UI visible = A [OK]

Hint: Remember layouts keep shared UI visible during page changes [OK]

Common Mistakes:

• Thinking RootLayout loads all pages at once
• Confusing RootLayout with CSS management
• Assuming RootLayout disables navigation

2. Which of the following is the correct way to define a layout component in Next.js 14+?

easy

A. export default function Layout({ children }) { return {children} }

B. function Layout() { return {props.children} } export default Layout

C. export const Layout = () => {children}

D. export default function Layout() { return children }

Solution

1. Step 1: Check the function signature and props usage

   export default function Layout({ children }) { return <div>{children}</div> } correctly uses a function with a destructured children prop.

2. Step 2: Verify JSX return and export

   export default function Layout({ children }) { return <div>{children}</div> } returns <div>{children}</div> and exports default properly.

3. Final Answer:

   export default function Layout({ children }) { return <div>{children}</div> } -> Option A

4. Quick Check:

   Correct props and export syntax = A [OK]

Hint: Use destructured children prop in layout function [OK]

Common Mistakes:

• Using props without destructuring
• Not exporting default properly
• Returning children without JSX wrapper

3. Given this layout and page code, what will be visible after navigating from /home to /about?

/* RootLayout.js */
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>Site Header</header>
        {children}
        <footer>Site Footer</footer>
      </body>
    </html>
  )
}

/* About.js */
export default function About() {
  return <main>About Page Content</main>
}

medium

A. Site Header, About Page Content, and Site Footer are visible

B. Blank page due to missing navigation setup

C. Site Header and Site Footer only, no page content

D. Only the About Page Content is visible

Solution

1. Step 1: Understand layout wrapping

   The RootLayout wraps all pages, so header and footer stay visible.

2. Step 2: Identify what {children} renders

   The {children} renders the current page content, here the About page.

3. Final Answer:

   Site Header, About Page Content, and Site Footer are visible -> Option A

4. Quick Check:

   Layout wraps page content = D [OK]

Hint: Remember layouts keep header/footer visible with page content [OK]

Common Mistakes:

• Thinking only page content shows without header/footer
• Assuming layout replaces page content
• Believing navigation breaks without extra setup

4. You have this layout code but the header disappears after navigation. What is the likely cause?

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>My Header</header>
        <main>{children}</main>
      </body>
    </html>
  )
}

// Page component
export default function Page() {
  return <div>Page Content</div>
}

medium

A. The header tag is invalid in Next.js layouts

B. The page component must include the header explicitly

C. The children prop is missing in the layout function parameters

D. The layout file is named incorrectly and not recognized as a layout

Solution

1. Step 1: Check layout recognition rules

   Next.js requires layout files to be named layout.js or layout.tsx to work as layouts.

2. Step 2: Identify why header disappears

   If the file is not named correctly, Next.js treats it as a normal component, so header won't persist on navigation.

3. Final Answer:

   The layout file is named incorrectly and not recognized as a layout -> Option D

4. Quick Check:

   Correct layout filename needed = B [OK]

Hint: Ensure layout files are named layout.js or layout.tsx [OK]

Common Mistakes:

• Thinking header tag is invalid
• Forgetting to include children prop
• Expecting page to include header manually

5. You want to keep a sidebar visible across multiple pages but hide it on the login page. How should you structure your Next.js layouts to achieve this?

hard

A. Use a single RootLayout and conditionally render sidebar based on URL inside it

B. Add sidebar inside every page except login manually

C. Create a RootLayout with sidebar and a separate layout for login without sidebar

D. Put sidebar inside the login page and hide it on other pages

Solution

1. Step 1: Understand layout nesting in Next.js

   You can create multiple layouts: a RootLayout for common UI and a separate layout for specific pages.

2. Step 2: Apply layouts to show/hide sidebar

   Put sidebar in RootLayout so it shows on all pages except login, which uses its own layout without sidebar.

3. Final Answer:

   Create a RootLayout with sidebar and a separate layout for login without sidebar -> Option C

4. Quick Check:

   Use nested layouts to control UI per page = C [OK]

Hint: Use nested layouts to show/hide UI per page [OK]

Common Mistakes:

• Duplicating sidebar in every page manually
• Using conditional rendering inside one layout causing complexity
• Placing sidebar inside login page instead of excluding it