Navigasi Cepat dengan Link

Jangan pakai <a> biasa

Tag <a href="/tentang"> menyebabkan full page reload: browser mengunduh ulang seluruh halaman. Di Next.js, pakai komponen Link dari next/link:

// app/page.tsx
import Link from "next/link";

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

Navigasi dengan Link bersifat client-side: hanya konten yang berubah, layout tidak re-render, dan terasa instan.

Prefetch otomatis

Next.js otomatis memuat (prefetch) halaman yang dituju Link saat link tersebut muncul di viewport. Jadi saat user mengklik, halamannya sudah siap. Ini alasan navigasi Next.js terasa cepat.

Navigasi dari kode

Kadang navigasi dipicu aksi, misal setelah form berhasil disubmit. Pakai hook useRouter dari next/navigation:

"use client";

import { useRouter } from "next/navigation";

export default function TombolSelesai() {
  const router = useRouter();

  function selesai() {
    // ...simpan data...
    router.push("/dashboard");
  }

  return <button onClick={selesai}>Selesai</button>;
}

router.push menambah riwayat browser (bisa back), router.replace mengganti riwayat (tidak bisa back), dan router.refresh memuat ulang data Server Component tanpa pindah halaman.

Tips praktis

Untuk link ke situs luar, tetap pakai <a> biasa dengan target="_blank" dan rel="noopener". Komponen Link hanya untuk navigasi internal. Kalau ada link yang jarang diklik (misal di footer dalam), kamu bisa mematikan prefetch dengan prop prefetch={false} agar tidak membuang bandwidth user.

Kesalahan umum pemula

• Memakai <a> untuk navigasi internal. Ini memicu full reload dan menghilangkan semua keunggulan client-side navigation.
• Import useRouter dari next/router. Itu untuk Pages Router lama. Di App Router pakai next/navigation.
• Memakai router.push untuk setiap navigasi. Untuk link biasa yang diklik user, komponen Link lebih baik karena ada prefetch otomatis.

Latihan singkat

1. Buat navbar dengan 3 Link dan rasakan bedanya dibanding <a> biasa (perhatikan layout tidak reload).
2. Buat tombol "Kembali" memakai router.back() dan tombol submit yang redirect dengan router.push.

Rangkuman

• Pakai Link dari next/link untuk navigasi internal, bukan <a> biasa.
• Link memberi client-side navigation plus prefetch otomatis.
• useRouter dari next/navigation untuk navigasi dari kode (setelah submit, dsb).
• router.push, router.replace, dan router.refresh untuk kebutuhan berbeda.

Catatan teknis: useRouter dari next/navigation hanya untuk App Router. Jangan tertukar dengan next/router yang khusus Pages Router lama. Import yang salah bikin hook tidak jalan dan errornya membingungkan.