Router cache on client in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js router hook.

NextJS

import { [1] } from 'next/navigation';

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

ArouterHook

BuseRoute

CuseRouter

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useRoute' which does not exist in Next.js.

Trying to import 'router' directly instead of the hook.

The correct hook to access the router in Next.js client components is useRouter.

2fill in blank

medium

Complete the code to get the current pathname from the router.

NextJS

const router = useRouter();
const currentPath = router.[1];

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

Apathname

Burl

Croute

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' which is not a property of the router object.

Using 'path' or 'route' which are incorrect property names.

The pathname property gives the current path in Next.js router.

3fill in blank

hard

Fix the error in the code to prefetch a route for caching.

NextJS

const router = useRouter();
router.[1]('/about');

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

Aprefetch

Bload

Ccache

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' which is a browser API, not a router method.

Using 'cache' or 'load' which do not exist on the router object.

The prefetch method tells Next.js to load the page in the background for faster navigation.

4fill in blank

hard

Fill both blanks to create a client component that prefetches the home route on mount.

NextJS

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

export default function PrefetchHome() {
  const router = useRouter();
  useEffect(() => {
    router.[1]('[2]');
  }, []);
  return null;
}

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

Aprefetch

B/

C/home

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/home' instead of '/' which may not be the correct route.

Using 'fetch' instead of 'prefetch' causing runtime errors.

Use prefetch to load the '/' route on mount for caching.

5fill in blank

hard

Fill all three blanks to create a component that prefetches two routes and logs the current path.

NextJS

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

export default function MultiPrefetch() {
  const router = useRouter();
  useEffect(() => {
    router.[1]('[2]');
    router.[3]('/contact');
    console.log('Current path:', router.pathname);
  }, []);
  return null;
}

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

Aprefetch

B/about

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load' which is not a router method.

Mixing method names causing runtime errors.

Use prefetch to cache both '/about' and '/contact' routes on mount.