Pindah Halaman Tanpa Reload: Jurus <Link> dan Navigasi Programatik di Next.js!

Udah bisa bikin halaman-halaman keren pake file-system routing di App Router Next.js? Mantap! Sekarang, gimana caranya biar pengguna bisa pindah dari satu halaman ke halaman lain di aplikasi kita dengan mulus, tanpa harus nge-reload seluruh halaman kayak website tradisional?

Di sinilah Client-Side Routing di Next.js berperan, dan ada dua cara utama buat ngelakuin navigasi:

1. Pake Komponen <Link>: Buat bikin link deklaratif di JSX-mu.
2. Pake Hook useRouter() (dari next/navigation): Buat ngelakuin navigasi secara programatik (misalnya, setelah pengguna ngelakuin aksi tertentu di JavaScript).

1. Komponen <Link>: Bikin Link Anti-Reload!

Kalau kamu mau bikin link yang bisa diklik pengguna buat pindah halaman di aplikasi Next.js-mu, JANGAN PAKE TAG <a> HTML BIASA!

Kenapa? Karena tag <a> biasa (<a href="/about">Tentang</a>) bakal nyebabin full page reload. Browser bakal minta halaman baru ke server, dan semua state JavaScript di aplikasimu bakal ilang. Ini ngilangin semua manfaat Single Page Application (SPA) yang cepet dan smooth.

Sebagai gantinya, Next.js nyediain komponen khusus namanya <Link> (diimpor dari next/link).

• Cara Pake <Link>:

  import Link from 'next/link'; // Jangan lupa impor!
   
  function NavigasiUtama() {
    return (
      <nav>
        <ul>
          <li>
            <Link href="/">Beranda</Link>
          </li>
          <li>
            <Link href="/tentang-kami">Tentang Kami</Link>
          </li>
          <li>
            <Link href="/produk/sepatu-lari">Produk Sepatu</Link> 
            {/* Contoh link ke rute dinamis */}
          </li>
        </ul>
      </nav>
    );
  }

  • import Link from 'next/link';: Wajib diimpor dulu.
  • href prop: Sama kayak di tag <a>, ini nentuin URL tujuan. Bisa path statis (/tentang-kami) atau path dinamis (/produk/${idProduk}).
  • Konten di dalam <Link>: Kamu bisa naro teks, gambar, atau elemen JSX lain di dalam <Link>, sama kayak di <a>.
    • PENTING (Perubahan dari Next.js versi lama): Di Next.js dengan App Router (dan versi terbaru Pages Router), kamu TIDAK PERLU lagi ngebungkus tag <a> di dalam <Link>. Komponen <Link> sendiri udah otomatis nge-render tag <a> yang sesuai di DOM dengan href yang bener. Kalau kamu punya atribut lain yang mau diterapin ke tag <a> (kayak className, target="_blank", rel), kamu bisa langsung taruh di komponen <Link>-nya.

      // BENAR (Next.js modern dengan App Router / Pages Router terbaru):
      <Link href="/kontak" className="tombol-navigasi">
        Kontak Kami
      </Link>
       
      // SALAH / CARA LAMA (Jangan dipake lagi kecuali di versi Next.js sangat lama):
      // <Link href="/kontak">
      //   <a className="tombol-navigasi">Kontak Kami</a> 
      // </Link>

• Apa yang Dilakuin <Link>?

  1. Client-Side Navigation: Pas pengguna ngeklik <Link>, Next.js bakal mencegah perilaku default browser (yang nge-reload halaman).
  2. Sebaliknya, dia bakal ngubah URL di address bar browser secara dinamis pake HTML5 History API.
  3. Terus, Next.js bakal ngerender komponen Page yang sesuai buat URL baru itu tanpa full page reload.
  4. Prefetching (Otomatis!): Secara default, pas komponen <Link> muncul di viewport (keliatan di layar), Next.js bakal otomatis nge-prefetch (pra-muat) kode dan data buat halaman yang di-link itu di background. Jadi, pas link-nya beneran diklik, perpindahan halamannya jadi kerasa super cepet! Kamu bisa ngontrol perilaku prefetch ini pake prop prefetch (misal, prefetch={false}).

Contoh Lengkap Komponen Navigasi:

// src/app/components/Navbar.tsx (Contoh)
"use client"; // Komponen ini mungkin perlu jadi Client Component jika ada interaksi
              // atau jika menggunakan hook seperti usePathname untuk active link.
 
import Link from 'next/link';
import { usePathname } from 'next/navigation'; // Hook buat dapetin path URL saat ini
 
export default function Navbar() {
  const pathname = usePathname(); // Dapetin path saat ini
 
  const linkNav = [
    { href: '/', label: 'Beranda' },
    { href: '/toko-kue', label: 'Toko Kue' }, // Asumsi ada page di app/toko-kue/page.tsx
    { href: '/tentang', label: 'Tentang' },
  ];
 
  return (
    <nav className="bg-gray-800 p-4">
      <ul className="flex space-x-4">
        {linkNav.map((link) => (
          <li key={link.href}>
            <Link 
              href={link.href} 
              className={`px-3 py-2 rounded-md text-sm font-medium 
                          ${pathname === link.href 
                            ? 'bg-gray-900 text-white' // Style buat link aktif
                            : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                          }`}
            >
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}
 
// Jangan lupa taro <Navbar /> ini di RootLayout (src/app/layout.tsx) atau layout lain

2. Navigasi Programatik Pake useRouter() (dari next/navigation)

Kadang, kita perlu pindah halaman bukan karena pengguna ngeklik link, tapi karena ada aksi JavaScript tertentu yang udah selesai. Misalnya:

• Setelah pengguna berhasil login, kita mau arahin dia ke halaman dashboard.
• Setelah form disubmit, kita mau arahin ke halaman "terima kasih".
• Pas ada error tertentu, kita mau arahin ke halaman error.

Buat ini, kita pake navigasi programatik. Di Next.js App Router, kita pake hook useRouter dari package next/navigation. (Hati-hati, di Pages Router lama, useRouter diimpor dari next/router dan API-nya sedikit beda).

• Cara Pake useRouter di App Router:
  1. Impor useRouter dari next/navigation di komponenmu (komponen ini harus jadi Client Component, tandain pake "use client"; di paling atas file).
  2. Panggil hook useRouter() di dalam komponenmu buat dapet objek router.
  3. Objek router ini punya beberapa metode, yang paling penting buat navigasi adalah router.push('/path-tujuan').

Contoh Navigasi Programatik setelah Submit Form:

// src/app/components/FormLogin.tsx (Contoh)
"use client"; // Komponen ini butuh interaktivitas dan navigasi programatik
 
import React, { useState } from 'react';
import { useRouter } from 'next/navigation'; // Impor dari next/navigation
 
export default function FormLogin() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter(); // Dapetin objek router
 
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // Di sini biasanya ada logika autentikasi (misal, kirim ke API)
    console.log("Login dengan:", { username, password });
 
    // Anggap login berhasil
    alert("Login Berhasil!");
 
    // Arahin ke halaman dashboard secara programatik
    router.push('/dashboard'); 
    // Kamu juga bisa pake router.replace('/dashboard') kalau gak mau halaman login ini masuk histori browser
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input 
          type="text" 
          id="username" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)} 
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input 
          type="password" 
          id="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

Di contoh ini, setelah handleSubmit (anggap login sukses), router.push('/dashboard') bakal mindahin pengguna ke halaman /dashboard secara client-side, sama kayak ngeklik <Link>.

Metode Lain di Objek router (dari next/navigation):

• router.replace('/path-baru'): Mirip push, tapi dia ngeganti entri histori saat ini di browser, jadi pengguna gak bisa pake tombol "Back" buat balik ke halaman sebelum replace. Cocok buat setelah login atau aksi yang gak pengen ada di histori back.
• router.refresh(): Nge-refresh data halaman saat ini dari server (tanpa full page reload, tapi nge-fetch ulang data buat Server Components).
• router.back(): Pindah ke halaman sebelumnya di histori browser.
• router.forward(): Pindah ke halaman berikutnya di histori browser.

Ingat, hook useRouter (dan hook lain yang berinteraksi dengan state atau lifecycle browser seperti usePathname, useSearchParams) cuma bisa dipake di Client Components (yang ada directive "use client";). Kalau kamu butuh info routing di Server Component, Next.js biasanya ngasihnya lewat props (kayak params buat rute dinamis).

Dengan komponen <Link> buat navigasi deklaratif dan hook useRouter buat navigasi programatik, kamu punya semua alat yang dibutuhin buat bikin alur perpindahan halaman yang mulus dan cepet di aplikasi Next.js-mu.

Ini adalah salah satu keunggulan utama pake framework kayak Next.js: routing client-side yang canggih udah disiapin buat kamu, jadi kamu bisa fokus bikin pengalaman pengguna yang lebih baik!