Active link detection in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is active link detection in Next.js?

Active link detection means identifying which navigation link matches the current page URL, so you can style it differently to show users where they are.

beginner

Which Next.js hook helps detect the current route for active link detection?

The usePathname hook from next/navigation returns the current URL path, which helps in detecting the active link.

intermediate

How can you conditionally apply a CSS class to an active link in Next.js?

Compare the link's href with the current pathname from <code>usePathname</code>. If they match, add an 'active' CSS class to style the link differently.

intermediate

Why is it better to use Next.js built-in hooks for active link detection instead of window.location?

Next.js hooks like usePathname work properly in client components, handling server-side rendering seamlessly without hydration errors, unlike window.location which only exists in the browser.

beginner

Show a simple example of active link detection using Next.js usePathname.

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

export default function Nav() {
  const pathname = usePathname();
  return (
    <nav>
      <Link href="/" className={pathname === '/' ? 'active' : ''}>Home</Link>
      <Link href="/about" className={pathname === '/about' ? 'active' : ''}>About</Link>
    </nav>
  );
}

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

A useLocation

B useRouter

C usePathname

D useLink

The usePathname hook from next/navigation returns the current path, perfect for active link detection.

Why should you avoid using window.location for active link detection in Next.js?

A It does not exist during server-side rendering

B It is slower than hooks

C It causes styling issues

D It is deprecated in Next.js

window.location is only available in the browser, so it breaks server-side rendering in Next.js.

What is the main purpose of active link detection in navigation menus?

A To load pages faster

B To change the URL automatically

C To disable unused links

D To highlight the current page link

Active link detection highlights the link of the page the user is currently on, improving navigation clarity.

In Next.js, where do you import the usePathname hook from?

A next/navigation

B next/router

C react-router-dom

D next/link

usePathname is imported from next/navigation in Next.js 13+.

How do you apply a different style to an active link in Next.js?

A Use JavaScript alert on click

B Add a CSS class conditionally when the link matches the current path

C Change the link text color manually

D Use inline styles on all links

You conditionally add a CSS class to the link when its href matches the current pathname to style it as active.

Explain how active link detection works in Next.js and why it is useful.

Think about how you know which page you are on in a website menu.

Describe a simple way to implement active link detection in a Next.js navigation component.

Focus on the steps from getting the path to styling 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