Layout navigation behavior in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when navigating between pages with a shared layout in Next.js App Router?

Consider a Next.js app using the App Router with a shared layout.js wrapping two pages. What is the expected behavior when navigating from one page to another inside this layout?

NextJS

app/layout.js
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

app/page.js
export default function Page1() {
  return <h1>Page 1</h1>;
}

app/about/page.js
export default function Page2() {
  return <h1>About Page</h1>;
}

A The layout component updates but loses its state on navigation.

B The layout component unmounts and remounts on every page navigation.

C The layout component is reused; only the page content changes without remounting the layout.

D Both the layout and page components remount on navigation, causing full reload.

💡 Hint

Think about how Next.js App Router optimizes shared layouts to avoid unnecessary remounts.

In Next.js App Router, layouts persist across page navigations inside their segment. This means the layout component is reused and does not remount, preserving state and improving performance. Only the page content changes.

❓ state_output

intermediate

What is the value of a state variable in a layout after client-side navigation?

Given a Next.js layout component with a useState hook, what happens to the state value after navigating client-side to a different page inside the same layout?

NextJS

app/layout.js
'use client';
import { useState } from 'react';
export default function RootLayout({ children }) {
  const [count, setCount] = useState(0);
  return (
    <html>
      <body>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <p>Count: {count}</p>
        {children}
      </body>
    </html>
  );
}

app/page.js
export default function Page1() {
  return <h1>Page 1</h1>;
}

app/about/page.js
export default function Page2() {
  return <h1>About Page</h1>;
}

A The count state increments automatically on navigation.

B The count state resets to 0 after navigation.

C The count state becomes undefined after navigation.

D The count state value is preserved after navigation.

💡 Hint

Consider how React state behaves in persistent layout components during client-side navigation.

Since the layout component persists and does not unmount during client-side navigation, its React state is preserved. The count value remains as it was before navigation.

🔧 Debug

advanced

Why does a layout component remount unexpectedly on navigation?

In a Next.js app using the App Router, a developer notices that their layout component remounts every time they navigate between pages inside the same layout. What is the most likely cause?

NextJS

app/layout.js
'use client';
import { useState } from 'react';
export default function RootLayout({ children }) {
  const [value, setValue] = useState(0);
  return (
    <html>
      <body>
        <p>Value: {value}</p>
        {children}
      </body>
    </html>
  );
}

app/page.js
export default function Page1() {
  return <h1>Page 1</h1>;
}

app/about/page.js
export default function Page2() {
  return <h1>About Page</h1>;
}

A The layout component is marked as a client component with 'use client', causing remounts on navigation.

B The layout file is inside the 'app' folder but named 'layout.jsx' instead of 'layout.js'.

C The pages are in different folders, so layouts cannot be shared.

D The layout component uses React state, which forces remount on navigation.

💡 Hint

Think about how client components behave in Next.js layouts during navigation.

Marking a layout as a client component with 'use client' causes it to remount on every navigation because client components do not persist across navigations in Next.js App Router. Layouts should be server components by default to persist.

📝 Syntax

advanced

Which layout export causes a syntax error in Next.js App Router?

Identify which layout component export will cause a syntax error in Next.js App Router.

A export default function Layout(children) { return <html><body>{children}</body></html>; }

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

C export default function Layout({ children }) { return <html><body>{children}</body></html>; }

D export default function Layout({ children }) { return <html><body>{children}</body></html>;; }

💡 Hint

Check the function parameter syntax for React components.

React components receive props as an object. The parameter must be destructured or accessed as props. Option A uses 'children' directly without destructuring, causing an error because 'children' is undefined.

🧠 Conceptual

expert

How does Next.js App Router handle nested layouts during navigation?

In Next.js App Router, if you have nested layouts like app/layout.js and app/dashboard/layout.js, what happens to these layouts when navigating from /dashboard to /dashboard/settings?

A The root layout persists, but the nested layout remounts on navigation.

B Both layouts persist and do not remount, preserving their state.

C Both layouts remount because the nested layout is a new component.

D Only the nested layout persists; the root layout remounts.

💡 Hint

Think about how Next.js preserves layouts in nested routes to optimize performance.

Next.js App Router preserves all layouts in the route hierarchy during client-side navigation. Both the root and nested layouts persist and do not remount, keeping their state intact.

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