Routing & Pages — Series 3

Preview — 3 of 10 questions

This root layout renders and the app appears to work in development, but the build warns about it. What is the rule for the root app/layout.tsx?

javascript

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <div className="app">{children}</div>;
}

AYou can have as many root layouts as you like, and none of them needs <html> or <body>

BThere must be exactly one root layout at app/layout.tsx, and it is the only layout that must render the <html> and <body> tags itself — Next.js does not add them for you

CThe root layout is optional; if you omit it Next.js generates a default one with <html lang="en">

D<html> and <body> are added automatically to every layout, so rendering a plain <div> here is correct

You want the link matching the current URL to get an active class. What is the idiomatic App Router approach?

javascript

// components/Nav.tsx
export function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

ARead window.location.pathname directly in the component body during render

BPass the current path down from the root layout as a prop through every component

CAdd "use client" to the component and call usePathname() from next/navigation to get the current path, then compare it against each link's href

DUse useRouter().pathname — the same API as the Pages Router

A user on /step-1 clicks this link, lands on /step-2, then presses the browser Back button. Where do they go, and why?

javascript

<Link href="/step-2" replace>Continue</Link>

ABack to whatever page came before /step-1 — replace swaps the current history entry for /step-2 instead of pushing a new one, so /step-1 is no longer in the history stack

BBack to /step-1 — replace only affects the URL bar, not the history stack

CNowhere — replace disables the Back button for that navigation

DBack to /step-2 again — replace duplicates the entry

Answer all 10 questions (7 more), see explanations for every answer, and track your score.