Why Next.js navigation is optimized - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does Next.js prefetch links by default?

Next.js automatically prefetches linked pages in the background. What is the main benefit of this behavior?

A It reduces the loading time when the user clicks the link by loading data ahead.

B It increases server load by fetching all pages at once.

C It disables client-side navigation to force full page reloads.

D It prevents caching of pages to always fetch fresh content.

💡 Hint

Think about how loading pages before clicking affects user experience.

Next.js prefetches linked pages to load their code and data in the background. This makes navigation feel instant because the page is ready when clicked.

❓ component_behavior

intermediate

What happens when using Next.js for navigation?

Consider a Next.js app using the component for navigation. What is the main behavior difference compared to a normal tag?

NextJS

<Link href="/about">About</Link>

A It performs client-side navigation without full page reload, improving speed.

B It forces a full page reload every time the link is clicked.

C It disables navigation and only changes the URL in the address bar.

D It opens the link in a new browser tab by default.

💡 Hint

Think about how single-page apps handle navigation.

The Next.js component intercepts clicks and loads pages client-side, avoiding full reloads and making navigation faster.

❓ state_output

advanced

What is the output when navigating with Next.js router.push?

Given this code snippet, what will be the value of router.asPath immediately after calling router.push('/contact')?

NextJS

import { useRouter } from 'next/router';

function Nav() {
  const router = useRouter();
  function goContact() {
    router.push('/contact');
    console.log(router.asPath);
  }
  return <button onClick={goContact}>Go Contact</button>;
}

A Throws an error

B "/contact"

C undefined

D "/"

💡 Hint

Consider if router.push is synchronous or asynchronous.

The router.push method is asynchronous. The router.asPath does not update immediately after calling it, so it still shows the old path.

📝 Syntax

advanced

Which Next.js navigation code snippet correctly prefetches a page?

Select the code snippet that correctly enables prefetching for a Next.js component.

A <Link href="/blog" prefetch={false}>Blog</Link>

B <Link href="/blog" prefetch>Blog</Link>

C <Link href="/blog" prefetch="true">Blog</Link>

D <Link href="/blog" prefetch={true}>Blog</Link>

💡 Hint

Check the correct way to pass boolean props in JSX.

In JSX, boolean props can be passed as prefetch (which is equivalent to true) or prefetch={true} to enable them explicitly. Option C is incorrect because passing a string "true" is not the correct way.

🔧 Debug

expert

Why does this Next.js navigation cause a full page reload?

This Next.js app uses Profile for navigation instead of . What is the main reason this causes a full page reload?

NextJS

<a href="/profile">Profile</a>

A Because Next.js disables client-side routing for all links.

B Because <a> triggers a normal browser navigation, not client-side routing.

C Because the href attribute is missing a leading slash.

D Because the <a> tag requires a target="_blank" to enable client routing.

💡 Hint

Think about how Next.js handles navigation with and without .

Using a plain tag causes the browser to reload the entire page because Next.js client-side routing only works with the component or router methods.