Pelajari cara membuat navigasi yang cepat dan mulus di aplikasi Next.js Anda menggunakan komponen `<Link>` untuk client-side routing, dan cara melakukan navigasi secara programatik menggunakan hook `useRouter` dari `next/navigation`.
17m bacaanKuis WajibMicro Badge Lesson
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:
Pake Komponen <Link>: Buat bikin link deklaratif di JSX-mu.
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 . 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.
full page reload
Sebagai gantinya, Next.js nyediain komponen khusus namanya <Link> (diimpor dari next/link).
Cara Pake <Link>:
tsx
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.
tsx
// BENAR (Next.js modern dengan App Router / Pages Router terbaru):<Link href="/kontak" className="tombol-navigasi"> Kontak Kami
Apa yang Dilakuin <Link>?
Client-Side Navigation: Pas pengguna ngeklik <Link>, Next.js bakal mencegah perilaku default browser (yang nge-reload halaman).
Sebaliknya, dia bakal ngubah URL di address bar browser secara dinamis pake HTML5 History API.
Terus, Next.js bakal ngerender komponen Page yang sesuai buat URL baru itu tanpa full page reload.
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:
tsx
// 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 iniexport 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
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:
Impor useRouter dari next/navigation di komponenmu (komponen ini harus jadi Client Component, tandain pake "use client"; di paling atas file).
Panggil hook useRouter() di dalam komponenmu buat dapet objek router.
Objek router ini punya beberapa metode, yang paling penting buat navigasi adalah router.push('/path-tujuan').
Contoh Navigasi Programatik setelah Submit Form:
tsx
// src/app/components/FormLogin.tsx (Contoh)"use client"; // Komponen ini butuh interaktivitas dan navigasi programatikimport React, { useState } from 'react';import { useRouter } from 'next/navigation'; // Impor dari next/navigationexport 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!
Checkpoint KuisTarget: 70%
Kuis Navigasi & Link di Next.js (App Router)
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
