Search⌘ K
AI Features
Home
Courses
Building Full Stack Web Applications with Next.js

Navigation with App Router APIs

Explore how to implement navigation in Next.js using the App Router APIs. Learn to use the Link component for declarative client-side routing, the useRouter hook for programmatic navigation, and the usePathname hook to highlight active links. This lesson guides you through creating a fast, user-friendly navigation experience in your Next.js applications.

We'll cover the following...

The next logical step: how do we move between the pages? The user experience of a modern web application hinges on fast navigation that doesn’t require a full-page reload for every click. Next.js’s App Router provides us with powerful yet simple tools to create that fluid, app-like feel.

In this lesson, we’ll explore the core APIs that handle navigation: the declarative <Link> component for standard links and the programmatic useRouter hook for more complex, event-driven transitions. We’ll also look at a helpful hook for styling navigation elements based on the current page.

The primary navigation tool: <Link> component

The most common and recommended way to navigate between routes is with the <Link> component from next/link. It works like the standard HTML <a> tag but is optimized for Next.js.

When we use <Link>, Next.js handles client-side navigation for us, updating the URL without triggering a full-page reload.

// app/components/Header.js
import Link from 'next/link';
import './Header.css';
export default function Header() {
  return (
    <nav className="main-nav">
      <Link href="/">Home</Link>
      <Link href="/about">About Us</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}
Implementing primary navigation with the <Link> component

  • Line 3: This imports the Link component for client-side routing.

  • Line 4: This imports a local stylesheet for the component.

  • Line 6: This defines the Header component.

  • Line 8: This creates a <nav> element for the navigation bar.

  • Lines 9–11: This adds Link components to navigate to the homepage, and the about and blog routes. ...