Link and navigate

Navigation is part of the interface. Use next/link for internal 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 a 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 stay 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 just because you expect users to arrive through a click.

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

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. Cmd+click or middle-click should open a new tab with the correct page. Open DevTools Network, click a Link, and compare the request pattern with typing the URL in the address bar and pressing Enter. Both paths must render the same content.

If you replace Link with onClick={() => router.push('/notes')} on a <div>, you lose native link behavior. That is why I reach for Link first.

Prefetching can make DevTools look busy while you scroll. That is normal. The check that matters is still a cold load of the destination URL in a fresh tab.