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.