🧭 Highlighting Active Links in Next.js 15 using usePathname & Client Components

When building a website with multiple pages, it’s important to show which page the user is currently on. For example, if the user is on the Community page, the nav link for that page should look "active".

Let’s learn how to achieve this in Next.js using:

✅ usePathname() hook
✅ use client directive
✅ Component splitting for performance

---

🧠 Understanding the usePathname() Hook

The usePathname() hook is provided by Next.js and allows you to get the current route path like:

/community
/meals

It is imported from:

import { usePathname } from 'next/navigation';

But here’s the catch:

usePathname() only works in Client Components.

This means, if you use it inside a Server Component (which is default in Next.js), you’ll get an error.

---

🧩 So What Are Client Components?

In Next.js, components are Server by default.

Client Components:

• Can access browser-only features like usePathname, useEffect, localStorage, etc.

• Must start with the "use client" directive at the top of the file.

---

🔧 Real-World Example: Highlight Active Link

Let's break this down into a simple and optimized setup:

1. 🛠 Create a Client-Side Component (NavLink.js)

This small component will:

• Accept href and children as props

• Check if the current path matches the href

• Add an active CSS class if it matches

// components/NavLink.js
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import classes from './nav-link.module.css';

export default function NavLink({ href, children }) {
  const path = usePathname();
  const isActive = href === '/' ? path === href : path.startsWith(href);

  return (
    <Link
      href={href}
      className={`${classes.link} ${isActive ? classes.active : ''}`}
    >
      {children}
    </Link>
  );
}

2. 🎨 Style the Links (nav-link.module.css)

/* nav-link.module.css */
.link {
  text-decoration: none;
  color: #555;
  padding: 0.5rem 1rem;
  transition: all 0.3s;
}

.active {
  font-weight: bold;
  color: #ff6600;
  border-bottom: 2px solid #ff6600;
}

3. 🧩 Use NavLink in a Server Component (MainHeader.js)

// components/MainHeader.js
import NavLink from './NavLink';

export default function MainHeader() {
  return (
    <nav>
      <NavLink href="/meals">Browse Meals</NavLink>
      <NavLink href="/community">Foodies Community</NavLink>
    </nav>
  );
}

You can now avoid using "use client" in your large Server Component, keeping it optimized!

---

✅ Why This is Best Practice?

---

💡 Summary

• Use usePathname() inside a Client Component.

• Wrap that logic in a small reusable <NavLink />.

• Keep large components like <MainHeader /> as Server Components for better performance.

• Add styles to show active links with simple CSS.