Active link detection in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook used for active link detection in Next.js.

NextJS

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

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

AuseActive

BuseRouter

CusePathname

DuseLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter instead of usePathname

Trying to import a non-existent hook like useLink

The usePathname hook from next/navigation returns the current path, which helps detect active links.

2fill in blank

medium

Complete the code to get the current path inside a functional component.

NextJS

const currentPath = [1]();

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

AusePathname

BuseRouter

CuseLocation

DuseActive

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useRouter() which returns an object, not just the path

Using useLocation which is from React Router, not Next.js

Calling usePathname() inside a component returns the current URL path as a string.

3fill in blank

hard

Fix the error in the code to correctly check if the link is active.

NextJS

const isActive = currentPath [1] href;

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

A===

B=>

C=

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using single equals = which assigns instead of compares

Using arrow function syntax => by mistake

Use the strict equality operator === to compare currentPath and href for active link detection.

4fill in blank

hard

Fill both blanks to create a style object that applies a bold font weight when the link is active.

NextJS

const linkStyle = { fontWeight: [1] ? 'bold' : [2] };

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

AisActive

B'normal'

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using true/false instead of 'normal' for fontWeight

Using a string 'isActive' instead of the variable isActive

The style sets fontWeight to 'bold' if isActive is true, otherwise 'normal'.

5fill in blank

hard

Fill all three blanks to complete the component that renders a navigation link with active styling.

NextJS

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

export default function NavLink({ href, children }) {
  const currentPath = [2]();
  const isActive = currentPath === href;
  return (
    <Link href={href} style={{ fontWeight: [3] ? 'bold' : 'normal' }} aria-current={isActive ? 'page' : undefined}>
      {children}
    </Link>
  );
}

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

AusePathname

BuseRouter

CisActive

DuseLocation

Attempts:

3 left

💡 Hint

Common Mistakes

Importing and calling different hooks

Using a string instead of the boolean variable for styling

Not setting aria-current for accessibility

The component imports usePathname to get the current path, calls it to get currentPath, and uses isActive to conditionally style the link.