How to navigate between pages using the Next.js Link component

The Link Component

Never use <a href> for internal navigation in Next.js. The Link component handles client-side navigation and automatic prefetching.

import Link from 'next/link'

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
      <Link href={`/products/${id}`}>Product</Link>
    </nav>
  )
}

Prefetching

In production, Next.js automatically prefetches the linked page's code when a Link enters the viewport. By the time a user clicks, the JavaScript is already loaded. This is why Next.js apps feel instant. You can disable this with prefetch={false}.

Programmatic Navigation

For navigation triggered by logic (after form submit, after auth), use useRouter in a Client Component:

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

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

  async function handleSubmit() {
    await login()
    router.push('/dashboard')   // Navigate and add to history
    // router.replace('/dashboard') // Navigate without adding to history
    // router.back()              // Go back
  }

  return <button onClick={handleSubmit}>Login</button>
}

Import useRouter from next/navigation, not next/router — the latter is the Pages Router version and will not work in the App Router.