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.