Active link detection in NextJS - Mini Project: Build & Apply

Active link detection

📖 Scenario: You are building a website with a navigation menu. You want the menu to show which page is currently active by highlighting the active link.

🎯 Goal: Create a navigation bar in Next.js that highlights the active link based on the current page URL.

📋 What You'll Learn

Create a list of navigation links with exact paths

Set up a variable to get the current path using Next.js router

Use conditional logic to add an active class to the link matching the current path

Add the active class to the correct <a> element in the navigation

💡 Why This Matters

🌍 Real World

Websites often highlight the current page in their navigation menus to help users know where they are.

💼 Career

Knowing how to detect and style active links is a common task in frontend development and improves user experience.

1

Create navigation links

Create a constant called navLinks that is an array of objects. Each object should have name and path keys with these exact values: { name: 'Home', path: '/' }, { name: 'About', path: '/about' }, { name: 'Contact', path: '/contact' }.

NextJS

const navLinks = [
  // Your code here
]

Hint

Think of navLinks as a list of pages with their names and URLs.

2

Get current path from Next.js router

Import useRouter from next/router and create a constant called router by calling useRouter(). Then create a constant called currentPath that gets the pathname from router.

NextJS

import { useRouter } from 'next/router'

const navLinks = [
  { name: 'Home', path: '/' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' }
]

// Your code here

Hint

Use Next.js useRouter hook to get the current page path.

3

Add active class conditionally

Use navLinks.map to create a list of <a> elements. For each link, add a className that is 'active' if link.path === currentPath, otherwise an empty string ''. Use link.name as the link text and link.path as the href.

NextJS

import { useRouter } from 'next/router'

const navLinks = [
  { name: 'Home', path: '/' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' }
]

function Nav() {
  const router = useRouter()
  const currentPath = router.pathname
  return (
    
      {navLinks.map(link => (
        // Your code here
      ))}
    
  )
}

Hint

Use className with a condition to highlight the active link.

4

Add CSS for active link

Add a <style jsx> block inside the Nav component. Define the .active class to have color: red; and font-weight: bold; so the active link stands out.

NextJS

import { useRouter } from 'next/router'

const navLinks = [
  { name: 'Home', path: '/' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' }
]

function Nav() {
  const router = useRouter()
  const currentPath = router.pathname
  return (
    
      {navLinks.map(link => (
        
          {link.name}
        
      ))}
      {/* Your code here */}
    
  )
}

Hint

Use Next.js scoped CSS with <style jsx> to style the active 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