Aurora Scharff • 5/23/2026

Building an Active NavLink Component in Next.js

This article provides a comprehensive guide on creating an active NavLink component in Next.js using the App Router. It covers using usePathname() and useSelectedLayoutSegment() to read the current route, building a reusable NavLink with render props, pending states via useLinkStatus, prefix matching for nested routes, accessibility with aria-current, and TypeScript integration. It also addresses flickering prevention, caching, and Suspense boundaries. The tutorial includes code examples and comparisons with React Router's NavLink API.

0 comments

#TypeScript #React #nextjs