Linking & Navigation

Move between routes with <Link>, control prefetching, and navigate from code with the useRouter and usePathname hooks.

Ad 728×90

The <Link> component

Why: <Link> is the main way to move between pages. It does a client-side transition (no full page reload) and prefetches the target in the background, so navigation feels instant. Note: "prefetch" means quietly loading the next page before you click.

import Link from 'next/link'

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
      {/* A plain <a> would work but loses prefetching + instant transitions */}
    </nav>
  )
}

Links from data

Why: the most common pattern — map over data and build a link per item with a template string. The key prop helps React track each list item.

import Link from 'next/link'

export default function PostList({
  posts,
}: {
  posts: { slug: string; title: string }[]
}) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Control prefetching

Why: prefetching every visible link can be wasteful in huge lists. Set prefetch={false} to only load on click, saving bandwidth. Use it for long, infinite, or rarely-clicked lists.

import Link from 'next/link'

export default function Row() {
  return (
    <Link prefetch={false} href="/blog">
      Blog
    </Link>
  )
}

Navigate from code

Why: sometimes you navigate after an event, not a click — e.g. after a form submits. useRouter gives you push() to do that. Note: hooks only run in Client Components, so the file needs the "use client" directive at the top.

'use client'

import { useRouter } from 'next/navigation'

export default function SearchButton() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/results?q=next')}>
      Search
    </button>
  )
}

Read the current URL

Why: to highlight the active nav link or read query values on the client, use usePathname (the path) and useSearchParams (the ?key=value part). Both are client hooks.

'use client'

import { usePathname, useSearchParams } from 'next/navigation'
import Link from 'next/link'

export default function NavLink({ href, label }: { href: string; label: string }) {
  // usePathname = the path part of the URL  ->  "/blog"
  const pathname = usePathname()
  // useSearchParams = the ?key=value part  ->  read "?tab=popular"
  const searchParams = useSearchParams()

  const tab = searchParams.get('tab') // "popular" (or null if missing)
  const isActive = pathname === href

  return (
    <Link href={href} aria-current={isActive ? 'page' : undefined}>
      {label} {tab ? '(' + tab + ')' : ''}
    </Link>
  )
}

← Next.js Course4 / 15