Active link detection in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js active link component?

Consider this Next.js component that highlights the active navigation link. What will be the className of the element when the current path is '/about'?

NextJS

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href;
  return (
    <Link href={href} className={isActive ? 'active' : 'inactive'} aria-current={isActive ? 'page' : undefined}>
      {children}
    </Link>
  );
}

// Assume current pathname is '/about'

A The <a> element has className 'active' and aria-current='page'.

B The <a> element has className 'inactive' and no aria-current attribute.

C The <a> element has className 'active' but no aria-current attribute.

D The <a> element has className 'inactive' and aria-current='page'.

💡 Hint

Check how the isActive variable is set and how it affects className and aria-current.

The component uses usePathname() to get the current path. It compares it to the href prop. If they match, isActive is true, so the a tag gets className 'active' and aria-current='page' for accessibility.

📝 Syntax

intermediate

Which option correctly uses Next.js 14's usePathname hook for active link detection?

Identify the correct syntax to get the current path using Next.js 14's new app router hook for active link detection.

A import { useLocation } from 'next/navigation'; const path = useLocation().pathname;

B import { usePath } from 'next/navigation'; const path = usePath();

C import { usePathname } from 'next/navigation'; const path = usePathname();

D import { useRouter } from 'next/router'; const path = useRouter().pathname;

💡 Hint

Check the official Next.js 14 app router documentation for the correct hook name.

Next.js 14 app router provides usePathname from 'next/navigation' to get the current path. The other hooks are either from older versions or incorrect names.

🔧 Debug

advanced

Why does this active link detection code fail to highlight the current page?

Given this code snippet, why does the active link never get the 'active' class even when the link matches the current page?

NextJS

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href;
  return (
    <Link href={href} aria-current={isActive ? 'page' : undefined} className={isActive ? 'active' : 'inactive'}>
      {children}
    </Link>
  );
}

A usePathname is assigned without calling it as a function, so pathname is a function, not a string.

B The href prop is not a string, causing the comparison to fail.

C The Link component does not support aria-current attribute.

D The className should be applied to Link, not the <a> element.

💡 Hint

Check how usePathname is used in the code.

The code assigns const pathname = usePathname; without parentheses, so pathname is the function itself, not the current path string. The comparison pathname === href always fails.

❓ state_output

advanced

What is the value of isActive when pathname is '/blog/post' and href is '/blog'?

In this Next.js active link detection code, what will be the value of isActive if pathname is '/blog/post' and href is '/blog'?

NextJS

const pathname = '/blog/post';
const href = '/blog';
const isActive = pathname === href;

A true

B false

C undefined

D Throws a runtime error

💡 Hint

Check if the strings are exactly equal.

The strict equality operator === checks for exact match. '/blog/post' is not equal to '/blog', so isActive is false.

🧠 Conceptual

expert

Which approach correctly highlights parent navigation links for nested routes in Next.js?

You want to highlight a parent navigation link as active when the current path is a nested route inside it (e.g., '/blog/post' should highlight '/blog'). Which code snippet correctly implements this behavior?

A const isActive = pathname.endsWith(href);

B const isActive = pathname === href;

C const isActive = href.includes(pathname);

D const isActive = pathname.startsWith(href);

💡 Hint

Think about how to detect if the current path begins with the parent link path.

Using pathname.startsWith(href) returns true if the current path begins with the parent link path, correctly highlighting parent links for nested routes.

Other options either check exact equality or wrong substring relations.

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