Next App Active Link

The missing activeClassName prop for Next.js App Router (app directory).

🚀 Why this package?

In Next.js 13+ (App Router), the <Link> component removed the activeClassName prop. Developers now have to manually write logic using usePathname() to check active states.

next-app-active-link brings this feature back. It is a lightweight wrapper around next/link that automatically handles the active state for you.

• ✅ Built for App Router (uses next/navigation)
• ✅ Zero Dependencies (super lightweight)
• ✅ TypeScript Support
• ✅ Preserves standard <Link> props

📦 Installation

npm install next-app-active-link
# or
yarn add next-app-active-link
# or
pnpm add next-app-active-link

💻 Usage

Import ActiveLink and use it exactly like the standard Next.js , but with an extra activeClassName prop.

import { ActiveLink } from 'next-app-active-link';

export default function Navbar() {
  return (
    <nav className="flex gap-4">
      
      {/* 1. Simple Usage */}
      <ActiveLink href="/dashboard" activeClassName="font-bold text-blue-500">
        Dashboard
      </ActiveLink>

      {/* 2. With existing classes (they get merged!) */}
      <ActiveLink 
        href="/settings" 
        className="text-gray-500 hover:text-gray-900"
        activeClassName="text-blue-500 underline"
      >
        Settings
      </ActiveLink>

    </nav>
  );
}

⚙️ Props

| Prop | Type | Description | |------|------|-------------| | href | string | The path or URL to navigate to. | | activeClassName | string | (Required) The class name to apply when the link is active. | | className | string | (Optional) Base class names always applied. | | children | ReactNode | The content of the link. | | ...others | LinkProps | Supports all standard Next.js Link props (replace, scroll, prefetch, etc.) |

🛠 Requirements

• Next.js 13+ (App Router)
• React 18+

📄 License

MIT