Link and navigate

Navigation is part of the interface. Use next/link for links so Next.js can prefetch and perform client-side transitions while keeping real anchor semantics.

Use a normal <a> for an external site or download. Call redirect() during server work when rendering should continue at another URL. Use useRouter from next/navigation in a Client Component for programmatic transitions after an interaction. A clickable destination should usually remain a Link, not a button with router.push().

In production, Next.js may prefetch linked routes when they enter the viewport, then reuse prefetched data for a faster transition. Treat that as an optimization. Every destination must still work when loaded directly, refreshed, bookmarked, or opened in a new tab. Never put a mutation or another side effect in page rendering merely because you expect users to arrive through a click.

Use the router only when navigation is the result of code, such as completing a multi-step interaction. Preserve normal link behavior for destinations so keyboard navigation, modified clicks, copying the URL, and browser history all continue to work.

import Link from 'next/link'

export function NoteLink({ slug }: { slug: string }) {
  return <Link href={`/notes/${slug}`}>Read note</Link>
}

Add Link navigation for Home, Notes, and New note. Verify keyboard and modified-click behavior, then use the Network panel to compare a client transition with a direct request. Both paths must render the same correct page.