Lesson 7 of the Next.js: Build Full-Stack Apps with the App Router course

Next.jsJuly 25, 20263 min read

Implementing Navigation with the Next.js Link Component

Q: Does `Link` support hash fragments?

Yes, Link behaves exactly like an tag regarding attributes like href, target, and rel.

Q: Why is my active state not updating?

Ensure you are using usePathname inside a Client Component. If the page doesn't re-render, check that your layout.js is correctly wrapping your content.

Learn how to implement client-side navigation in Next.js using the Link component. Master active links and build a professional navigation bar for your blog.

Next.jsReactNavigationWeb DevelopmentFrontend

Previously in this course, we learned how to structure our project and style our interfaces with Tailwind CSS. Now that our homepage is taking shape, it's time to connect our pages together.

In a traditional web application, clicking a link forces the browser to discard the current page state, fetch a new HTML document, and re-render everything. Next.js changes this with the Link component, which performs client-side transitions. This provides a "Single Page Application" feel while keeping your code organized within the App Router.

Why Use the Link Component?

The Link component is a wrapper around the standard HTML <a> tag. Unlike a standard anchor tag, it pre-fetches the destination page in the background as soon as it enters the user's viewport. This makes navigation feel instantaneous.

Basic Implementation

To add a navigation bar to your blog, we'll create a new component. In your components/ folder, create a file named Navbar.js.


JSX
import Link from CE9178">'next/link';

export default function Navbar() {
  return (
    <nav className="flex items-center justify-between p-6 bg-white shadow-md">
      <Link href="/" className="font-bold text-xl">My Blog</Link>
      <div className="space-x-4">
        <Link href="/about" className="hover:text-blue-600">About</Link>
        <Link href="/posts" className="hover:text-blue-600">Posts</Link>
      </div>
    </nav>
  );
}

Import this Navbar into your layout.js (created in our Root Layout lesson) to ensure it appears on every page.

Implementing Active Links

Detailed close-up of rusty metal chains, showcasing texture and pattern.

A common UI requirement is to highlight the current link to help users orient themselves. Since we're using the App Router, we can determine the "active" state by checking the current URL path using the usePathname hook.

Because usePathname requires a Client Component, we need to add the 'use client' directive to our Navbar.


JSX
CE9178">'use client';

import Link from CE9178">'next/link';
import { usePathname } from CE9178">'next/navigation';

export default function Navbar() {
  const pathname = usePathname();

  return (
    <nav className="p-6">
      <Link 
        href="/posts" 
        className={pathname === CE9178">'/posts' ? CE9178">'text-blue-600 font-bold' : CE9178">'text-gray-600'}
      >
        Posts
      </Link>
    </nav>
  );
}

Comparison: Anchor vs. Link

Feature	Standard `<a>` Tag	Next.js `Link` Component
Navigation	Full browser reload	Client-side transition
Prefetching	None	Automatic (on viewport)
State	Lost on navigation	Preserved
Performance	Slower	Highly optimized

Hands-On Exercise

Create a components/Navbar.jsx file.
Add links to your Home (/) and About (/about) pages.
Use the usePathname hook to apply a underline or font-bold class to the link that matches the current route.
Add the Navbar to the layout.js file at the top of your <body> tag.

Common Pitfalls

Forgetting 'use client': The usePathname hook will throw an error if used in a Server Component. Always place your navigation logic inside a component marked with 'use client'.
Over-styling active states: Ensure your active state is accessible. A subtle color change is often better than a layout-shifting change (like adding a border that moves other elements).
Hardcoding paths: Always use relative paths (/about) rather than absolute URLs (http://localhost:3000/about) to ensure your app remains portable across environments.

FAQ

Can I still use <a> tags? Yes, but only for external links (e.g., to Google or Twitter). Use Link for internal navigation to keep the app fast.

Does Link support hash fragments? Yes, Link behaves exactly like an <a> tag regarding attributes like href, target, and rel.

Why is my active state not updating? Ensure you are using usePathname inside a Client Component. If the page doesn't re-render, check that your layout.js is correctly wrapping your content.

Recap

We've successfully moved beyond static HTML anchors by implementing the Link component. You now know how to provide performant navigation and handle active states dynamically using usePathname. This is a foundational step in creating a cohesive UI for your blog.

Up next: We will dive into Static Page Routing to build out the individual pages of our blog.

Work with me

Next.js Full-Stack Web App Development

A fast, SEO-ready full-stack web app built with Next.js 16 — from idea to deployed product, by an engineer who ships to production.

From $500

Headless WordPress + Next.js Frontend Development

Keep WordPress for content, get a lightning-fast Next.js frontend. The best of both worlds — familiar editing, modern speed.

From $450

Back to Blog