Route prefetching behavior in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable automatic route prefetching in a Next.js Link component.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    <Link href="/about" [1]>
      Go to About
    </Link>
  );
}

Drag options to blanks, or click blank then click option'

Aprefetch

Bpreload

Cfetch

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'preload' instead of 'prefetch' which is not a valid prop.

Confusing 'fetch' with prefetching behavior.

The prefetch prop on Next.js Link enables automatic prefetching of the linked page in the background.

2fill in blank

medium

Complete the code to disable route prefetching for a Next.js Link component.

NextJS

<Link href="/contact" [1]={false}>
  Contact Us
</Link>

Drag options to blanks, or click blank then click option'

Aload

Bpreload

Cprefetch

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load={false}' which is not a valid prop.

Trying to disable prefetching with 'fetch={false}'.

Setting prefetch={false} disables automatic prefetching for the link.

3fill in blank

hard

Fix the error in this code that tries to prefetch a route manually using Next.js router.

NextJS

import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();

  function prefetchPage() {
    router.[1]('/dashboard');
  }

  return <button onClick={prefetchPage}>Prefetch Dashboard</button>;
}

Drag options to blanks, or click blank then click option'

AfetchRoute

BprefetchRoute

CloadRoute

Dprefetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'prefetchRoute' or 'fetchRoute'.

Confusing with 'loadRoute' which does not exist.

The Next.js router has a prefetch method to manually prefetch a route.

4fill in blank

hard

Fill both blanks to explicitly enable route prefetching in a Next.js Link component.

NextJS

<Link href="/profile" [1]=[2]>
  Profile
</Link>

Drag options to blanks, or click blank then click option'

Aprefetch

Btrue

Cfalse

Dlazy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lazy' which is not a valid value for the prefetch prop.

Confusing 'prefetch' prop with other props.

Setting prefetch={true} explicitly enables automatic prefetching of the linked page in the background.

5fill in blank

hard

Fill all three blanks to manually prefetch a route on component mount using useEffect and Next.js router.

NextJS

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function DashboardPrefetch() {
  const router = useRouter();

  useEffect(() => {
    router.[1]([2]);
  }, [[3]]);

  return <p>Prefetching dashboard...</p>;
}

Drag options to blanks, or click blank then click option'

Aprefetch

B'/dashboard'

Crouter

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load' instead of 'prefetch' method.

Missing quotes around the route string.

Incorrect dependency array causing repeated calls.

Use router.prefetch('/dashboard') inside useEffect with router as dependency to prefetch on mount.

Practice

1. What is the main purpose of route prefetching in Next.js?

easy

A. To prevent users from navigating to certain pages

B. To disable client-side navigation

C. To load pages in the background before the user navigates to them

D. To increase the size of the initial JavaScript bundle

Solution

1. Step 1: Understand what prefetching means

   Prefetching means loading resources ahead of time before they are needed.

2. Step 2: Apply this to Next.js routing

   Next.js prefetches pages in the background to make navigation faster when the user clicks a link.

3. Final Answer:

   To load pages in the background before the user navigates to them -> Option C

4. Quick Check:

   Prefetching = background loading [OK]

Hint: Prefetching means loading before navigation happens [OK]

Common Mistakes:

• Thinking prefetching blocks navigation
• Confusing prefetching with disabling navigation
• Assuming prefetching increases initial load size

2. Which of the following is the correct way to disable automatic prefetching on a Next.js Link component?

easy

A. <Link href='/about' prefetch={false}>About</Link>

B. <Link href='/about' prefetch>About</Link>

C. <Link href='/about' noPrefetch>About</Link>

D. <Link href='/about' prefetch='off'>About</Link>

Solution

1. Step 1: Recall the prefetch prop usage

   The prefetch prop accepts a boolean to enable or disable prefetching.

2. Step 2: Identify the correct syntax to disable prefetching

   Setting prefetch={false} disables automatic prefetching on the Link.

3. Final Answer:

   <Link href='/about' prefetch={false}>About</Link> -> Option A

4. Quick Check:

   Disable prefetch with prefetch={false} [OK]

Hint: Use prefetch={false} to turn off prefetching [OK]

Common Mistakes:

• Using just 'prefetch' without value disables prefetching
• Using non-existent props like noPrefetch
• Passing string values instead of boolean

3. Consider this Next.js code snippet:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href='/profile' prefetch>Go to Profile</Link>
    </div>
  );
}

What happens when this component renders in the browser?

medium

A. The '/profile' page is not prefetched because prefetch defaults to false

B. The '/profile' page is prefetched in the background to speed up navigation

C. The link will cause a full page reload when clicked

D. The component will throw a syntax error due to incorrect prefetch usage

Solution

1. Step 1: Check the prefetch prop usage

   The prefetch prop is present without a value, which means it is true.

2. Step 2: Understand Next.js default behavior

   Next.js prefetches linked pages by default, so explicitly adding prefetch confirms this behavior.

3. Final Answer:

   The '/profile' page is prefetched in the background to speed up navigation -> Option B

4. Quick Check:

   prefetch present = prefetch enabled [OK]

Hint: Presence of prefetch prop means prefetching is on [OK]

Common Mistakes:

• Thinking prefetch defaults to false
• Assuming link causes full page reload
• Confusing syntax with errors

4. You wrote this code to prefetch a route manually:

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/dashboard');
  }, []);

  return <div>Welcome</div>;
}

However, the prefetch does not seem to work. What is the likely cause?

medium

A. You must call router.prefetch inside an event handler, not useEffect

B. The router.prefetch method does not exist in Next.js

C. The router.prefetch method is asynchronous and needs to be awaited

D. The useRouter import path is incorrect; it should be from 'next/navigation'

Solution

1. Step 1: Check the import source of useRouter

   In Next.js 14+, useRouter for client navigation is imported from 'next/navigation', not 'next/router'.

2. Step 2: Understand impact on router.prefetch

   Importing from 'next/router' gives an outdated router without prefetch support, so prefetch won't work.

3. Final Answer:

   The useRouter import path is incorrect; it should be from 'next/navigation' -> Option D

4. Quick Check:

   Correct import = 'next/navigation' [OK]

Hint: Use 'next/navigation' for router.prefetch in Next.js 14+ [OK]

Common Mistakes:

• Importing useRouter from 'next/router' instead of 'next/navigation'
• Not awaiting async prefetch (not required)
• Thinking prefetch only works in event handlers

5. You want to optimize bandwidth by prefetching only when a user hovers over a link. Which approach correctly implements this in Next.js?

hard

A. Set prefetch={false} on Link and call router.prefetch() inside an onMouseEnter event handler

B. Set prefetch on Link and call router.prefetch() inside useEffect

C. Remove prefetch from Link and rely on default prefetching

D. Use prefetch={true} on Link and disable prefetching globally in config

Solution

1. Step 1: Disable automatic prefetching on the Link

   Set prefetch={false} to prevent Next.js from prefetching immediately.

2. Step 2: Prefetch manually on user hover

   Use onMouseEnter event to call router.prefetch() to load the page only when user shows interest.

3. Final Answer:

   Set prefetch={false} on Link and call router.prefetch() inside an onMouseEnter event handler -> Option A

4. Quick Check:

   Manual prefetch on hover = prefetch={false} + onMouseEnter [OK]

Hint: Disable auto prefetch, prefetch manually on hover event [OK]

Common Mistakes:

• Prefetching both automatically and manually causing wasted bandwidth
• Calling prefetch in useEffect instead of on hover
• Relying on default prefetching without control