Challenge - 5 Problems

🎖️

Next.js Layout Navigation Master

Get all challenges correct to earn this badge!

Test your skills under time pressure!

❓ component_behavior

intermediate

2:00remaining

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>;
}

AThe layout component updates but loses its state on navigation.

BThe layout component unmounts and remounts on every page navigation.

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

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

Attempts:

2 left

❓ state_output

intermediate

2:00remaining

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>;
}

AThe count state increments automatically on navigation.

BThe count state resets to 0 after navigation.

CThe count state becomes undefined after navigation.

DThe count state value is preserved after navigation.

Attempts:

2 left

🔧 Debug

advanced

2:00remaining

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>;
}

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

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

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

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

Attempts:

2 left

📝 Syntax

advanced

2:00remaining

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.

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

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

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

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

Attempts:

2 left

🧠 Conceptual

expert

3:00remaining

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?

AThe root layout persists, but the nested layout remounts on navigation.

BBoth layouts persist and do not remount, preserving their state.

CBoth layouts remount because the nested layout is a new component.

DOnly the nested layout persists; the root layout remounts.

Attempts:

2 left