Link component for client navigation in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you click this Next.js Link?

Consider this Next.js component using the Link component for navigation. What will the user experience when clicking the link?

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href="/about">
        <a>About Us</a>
      </Link>
    </div>
  );
}

A The page navigates to /about without a full page reload, preserving client state.

B The page reloads completely and then navigates to /about.

C Nothing happens because the Link component is missing a required prop.

D The browser opens /about in a new tab.

💡 Hint

Think about how Next.js Link handles navigation internally.

The Next.js Link component enables client-side navigation. Clicking the link changes the URL and renders the new page without a full reload, making navigation faster and preserving state.

📝 Syntax

intermediate

Which Link usage is syntactically correct in Next.js 14+?

Next.js 14 introduced changes to the Link component. Which option shows the correct way to use Link for client navigation?

A <Link href="/contact">Contact</Link>

B <Link href="/contact"><a>Contact</a></Link>

C <Link to="/contact">Contact</Link>

D <Link url="/contact">Contact</Link>

💡 Hint

Check the prop name and whether an anchor tag is needed inside Link.

In Next.js 14+, the Link component no longer requires an inner <a> tag. The href prop is used for the destination URL. Using 'to' or 'url' props is incorrect.

🔧 Debug

advanced

Why does this Link cause a full page reload?

This Next.js component uses Link but clicking the link reloads the whole page. What is the cause?

NextJS

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/blog">
        <button>Blog</button>
      </Link>
    </nav>
  );
}

A The href prop is missing, so Link falls back to full reload.

B Using a button inside Link causes the browser to treat it as a normal button, triggering full reload.

C Link requires an anchor tag inside to prevent full reload.

D The Link component must wrap only text nodes, not elements.

💡 Hint

Think about what HTML elements Link expects inside for client navigation.

Wrapping a <button> inside Link causes the browser to treat the click as a button action, not a link click. This triggers a full page reload. Link expects an anchor or plain text for client navigation.

❓ state_output

advanced

What is the value of count after navigating with this Link?

Given this component with state and a Link, what is the value of count after clicking the link and navigating back?

NextJS

import { useState } from 'react';
import Link from 'next/link';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Link href="/other">Go to Other</Link>
    </div>
  );
}

A The count increments automatically when navigating back.

B The count value is preserved because Next.js caches the state.

C The count value becomes undefined after navigation.

D The count resets to 0 after navigating back because the component unmounts and remounts.

💡 Hint

Consider how React state behaves when navigating between pages in Next.js.

React state is lost when navigating away and back because the component unmounts and remounts. Next.js does not preserve React state across page navigations by default.

🧠 Conceptual

expert

Which statement about Next.js Link prefetching is true?

Next.js Link can prefetch pages for faster navigation. Which option correctly describes how prefetching works?

A Prefetching only works if the Link uses an anchor tag inside.

B Prefetching disables client-side navigation and forces full reloads.

C Prefetching loads the linked page's JavaScript and data in the background before navigation happens.

D Prefetching requires manual calls to a prefetch method after Link renders.

💡 Hint

Think about how Next.js improves navigation speed with Link.

Next.js Link automatically prefetches the code and data for the linked page in the background when the link is visible, speeding up navigation. It does not require manual calls or anchor tags inside.