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.

Practice

1. What is the main purpose of active link detection in a Next.js navigation menu?

easy

A. To highlight the link of the current page the user is on

B. To preload all pages linked in the menu

C. To disable links that are not active

D. To change the URL path automatically

Solution

1. Step 1: Understand active link detection

   Active link detection is used to show which page is currently open by highlighting its link in the navigation.

2. Step 2: Identify the purpose in Next.js navigation

   Highlighting the current page link helps users know where they are in the site.

3. Final Answer:

   To highlight the link of the current page the user is on -> Option A

4. Quick Check:

   Active link detection = Highlight current page link [OK]

Hint: Active link detection means showing current page link highlighted [OK]

Common Mistakes:

• Thinking it disables other links
• Confusing with preloading pages
• Assuming it changes the URL automatically

2. Which Next.js hook is used to get the current URL path for active link detection?

easy

A. useRouter()

B. useHref()

C. usePathname()

D. useLocation()

Solution

1. Step 1: Recall Next.js hooks for routing

   Next.js provides usePathname() to get the current URL path in the app router.

2. Step 2: Differentiate from other hooks

   useRouter() is more general, but usePathname() specifically returns the current path string.

3. Final Answer:

   usePathname() -> Option C

4. Quick Check:

   Current path hook = usePathname() [OK]

Hint: Use usePathname() to get current URL path in Next.js [OK]

Common Mistakes:

• Using useRouter() instead of usePathname()
• Confusing with React Router hooks
• Using non-existent hooks like useHref()

3. Given this Next.js component snippet, what will be the value of isActive if the current path is /about?

const pathname = usePathname();
const isActive = pathname === '/about';

medium

A. false

B. null

C. undefined

D. true

Solution

1. Step 1: Understand the usePathname() output

   usePathname() returns the current URL path as a string, here '/about'.

2. Step 2: Evaluate the comparison

   Comparing pathname === '/about' when pathname is '/about' results in true.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Pathname '/about' === '/about' is true [OK]

Hint: Compare pathname string directly to link href for active check [OK]

Common Mistakes:

• Assuming usePathname() returns an object
• Using == instead of === causing confusion
• Expecting false when paths match exactly

4. Identify the error in this Next.js active link detection code:

const pathname = usePathname;
const isActive = pathname === '/home';

medium

A. pathname should be imported from 'next/link'

B. usePathname is not called as a function

C. Comparison operator should be != instead of ===

D. isActive should be a state variable

Solution

1. Step 1: Check usePathname usage

   usePathname is a hook and must be called as a function: usePathname()

2. Step 2: Identify the error in assignment

   Assigning usePathname without parentheses assigns the function itself, not the path string.

3. Final Answer:

   usePathname is not called as a function -> Option B

4. Quick Check:

   Hooks must be called: usePathname() [OK]

Hint: Always call hooks with () to get their value [OK]

Common Mistakes:

• Forgetting parentheses on hooks
• Using wrong comparison operators
• Importing pathname from wrong module

5. How would you correctly add an aria-current attribute to a Next.js navigation link when it is active using usePathname()? Choose the best code snippet.

hard

A. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'page' : undefined}>About</a>;

B. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? true : false}>About</a>;

C. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'true' : 'false'}>About</a>;

D. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'current' : ''}>About</a>;

Solution

1. Step 1: Understand aria-current usage

   aria-current should be set to 'page' when the link is active, otherwise omitted or undefined.

2. Step 2: Check each option's attribute value

   const pathname = usePathname();
   return <a href='/about' aria-current={pathname === '/about' ? 'page' : undefined}>About</a>;

   correctly uses 'page' for active and undefined for inactive, which is the recommended pattern.

3. Final Answer:

   Option A code snippet -> Option A

4. Quick Check:

   aria-current='page' when active, undefined otherwise [OK]

Hint: Use aria-current='page' only when link matches current path [OK]

Common Mistakes:

• Using boolean true/false instead of 'page'
• Using string 'true' or 'false' incorrectly
• Setting aria-current to wrong string values