Linking and Fast Navigation

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Choose correctly between Link and a plain anchor tag
Understand how prefetching works
Build UI for active navigation state

If the whole browser reloads every time you move between pages within a site, the app feels slow. Next.js's Link can prefetch the route data it needs ahead of time and swap out just the page without breaking the shared layout.

The key idea

Use next/link for internal routes. In production, Next.js can prefetch a Link once it enters the viewport, so the response feels fast when clicked. For external sites, downloads, or mailto links, a regular anchor tag works fine. If you need programmatic navigation, use useRouter — but don't expand your Client Component boundary unnecessarily just for that.

Let's try it together

tsx

import Link from "next/link";

const notes = [
  { id: "routing", title: "Routing ကိုလေ့လာခြင်း" },
  { id: "server-components", title: "Server Components" },
];

export default function NotesPage() {
  return (
    <ul>
      {notes.map((note) => (
        <li key={note.id}>
          <Link href={`/notes/${note.id}`}>{note.title}</Link>
        </li>
      ))}
    </ul>
  );
}

How the code works

Each Link in the notes list points to the dynamic detail URL. The key keeps the React list stable, and the href tells the Next.js router which route to go to.

You should see

Two note links appear, and clicking them takes you to the detail route without a full page reload.

5-Minute Try-It

Write a navigation bar with three links — Home, Notes, About — and highlight the current route in a different color.

Next.js — Linking and Navigating — Next.js

Easy traps

Doing all internal navigation with window.location
Using a Link with no href when what you actually want is a button

Exercise

Write a navigation bar with three links — Home, Notes, About — and highlight the current route in a different color.

You'll know it worked when: Two note links appear, and clicking them takes you to the detail route without a full page reload.