Pindah Halaman dengan Link

Masalah tag <a> biasa

Tag <a href> membuat browser memuat ulang seluruh halaman. Terasa lambat dan berkedip.

Solusinya: Link

Next.js punya komponen Link. Pindah halaman terasa seketika karena hanya bagian yang berubah yang diganti.

import Link from "next/link";

export default function Menu() {
  return (
    <nav>
      <Link href="/">Beranda</Link>
      <Link href="/tentang">Tentang</Link>
    </nav>
  );
}

Cara pakai

1. Tulis import Link from "next/link"; di bagian atas file.
2. Pakai <Link href="alamat">teks</Link> seperti tag <a>.

Bonus: Next.js memuat halaman tujuan lebih awal saat tautan terlihat di layar (prefetch), jadi saat diklik langsung terbuka.

Untuk alamat situs lain (misalnya google.com) tetap pakai <a> biasa.