Next.js Basics›Core· 30 min read

Linking and Navigation

The Link component moves between pages instantly, without a full page reload.

What you will learn

Use the Link component
Explain why Link beats a plain anchor
Build a simple navigation bar

Why not just use an anchor tag?

A plain <a href="/about"> works, but it makes the browser throw away the whole page and reload from scratch — slow and flickery. Next.js gives you a smarter <Link> that swaps the page in place, keeping everything fast.

Using Link

Import Link from next/link and use it like an anchor, but with href pointing at your route.

A navigation bar built with the Link component

// app/components/Nav.js
import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

Note: Output: Home About Blog <- three clickable links Clicking "About" jumps to /about with no full reload. Next.js even pre-loads linked pages in the background, so they open almost instantly.

What actually happens on a click

With a plain <a> the browser does a full page load: it throws away the current page, downloads the new HTML, then re-downloads and re-runs all your JavaScript. You see a white flash, and anything held in memory is wiped.

With <Link>, Next.js does client-side navigation instead: it quietly fetches just the new page, swaps the changed part into the page already on screen, and updates the URL. Because the page is never thrown away, this connects to something you know from React — any React state that lives above the swapped page (for example in your layout) stays alive. A music player or an open menu in the header keeps playing or stays open as you move around.

	Plain anchor tag	Next.js Link
Page reload	Full reload (slow)	Swaps in place (fast)
White flash on click	Yes	No
Keeps app state	No — everything resets	Yes
Pre-loads pages	No	Yes, automatically

Tip: Think of a plain <a> like rebuilding the whole room every time you change one picture on the wall, and <Link> like just swapping that one picture — the rest of the room (your header, menu and state) stays exactly as it was.

Tip: Use <Link> for moving between pages inside your app. For an external site (like https://google.com) a normal <a> tag is still the right choice.

Q. Why use <Link> instead of a plain <a> for internal navigation?

Answer: Link does client-side navigation (no full reload), keeps app state, and pre-loads linked pages so they feel instant.

✍️ Practice

Replace any <a> tags between your pages with <Link>.
Add the Nav component to your root layout so it shows on every page.

🏠 Homework

Build a navigation bar with four links and add it to the layout, then test that moving between pages does not flash a reload.