LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1715 min read

Linking and Navigation

Navigate between routes with the Link component and the useRouter/usePathname hooks, and understand prefetching.

The Link component from next/link is the primary way to navigate between routes. It renders a real anchor tag, but intercepts the click to perform fast, client-side navigation instead of a full page reload.

import Link from 'next/link';


export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
      <Link href={`/blog/${post.slug}`}>{post.title}</Link>
    </nav>
  );
}
Don't Use a Plain <a> Tag

A regular <a href="/blog"> triggers a full page reload, losing client-side state and re-downloading assets. Always use next/link for internal navigation.

Programmatic Navigation with useRouter

For navigation triggered by code — after a form submits, for example — use the useRouter hook from next/navigation inside a Client Component.

'use client';
import { useRouter } from 'next/navigation';


export default function LoginForm() {
  const router = useRouter();


  async function handleSubmit(formData) {
    await login(formData);
    router.push('/dashboard');
  }


  return <form action={handleSubmit}>{/* ... */}</form>;
}

Common router methods:

  • router.push(href) — navigate to a new route, adding to history.
  • router.replace(href) — navigate without adding a new history entry.
  • router.back() / router.forward() — move through browser history.
  • router.refresh() — re-fetch the current route's server data without a full reload.

usePathname and useSearchParams

To read the current URL rather than navigate to a new one, use usePathname (the path) and useSearchParams (the query string) — both are Client Component hooks from next/navigation.

'use client';
import { usePathname, useSearchParams } from 'next/navigation';


export default function ActiveLink() {
  const pathname = usePathname();          // "/blog"
  const searchParams = useSearchParams();  // ?page=2 → "2"
  const page = searchParams.get('page');


  return <span>{pathname} — page {page}</span>;
}

Prefetching

Next.js automatically prefetches the code and data for routes linked with <Link> as they scroll into view in production, so navigation feels instant by the time a user actually clicks.

Opting Out

Pass prefetch={false} to a <Link> to disable this for a specific link — useful for links behind authentication checks or ones rarely clicked.

Common Beginner Mistakes

Using useRouter from "next/router"

That import is for the older Pages Router. In the App Router, import useRouter from "next/navigation" instead.

Calling useRouter or usePathname in a Server Component

These hooks require "use client" at the top of the file — they don't work in Server Components.

FAQs

Yes, but for external links Next.js just renders a normal anchor tag — prefetching and client-side navigation only apply to internal routes.

Because of prefetching combined with client-side navigation — the code and often the data are already loaded before the click happens.

Summary

Link handles the vast majority of navigation, with useRouter for code-triggered navigation and usePathname/useSearchParams for reading the current URL. Next, you'll see how loading.tsx gives every route an automatic loading state.

Next Lesson →

Loading UI & Streaming