Next.js menyediakan navigasi sisi klien yang lebih cepat daripada memuat ulang halaman lengkap — ia hanya mengambil data/komponen halaman baru dan menukarnya, menjaga tata letak bersama tetap terpasang.
;
() {
(
);
}
<Link> merender <a> tetapi mengintersepsi klik untuk navigasi sisi klien. Yang penting, ia pramuat rute tertaut ketika tautan masuk ke viewport, sehingga navigasi terasa instan.
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
Gunakan useRouter ketika navigasi harus terjadi sebagai respons terhadap logika (setelah pengiriman formulir, login, dll.), bukan klik pada tautan.
<Link> memuat rute sebelumnya sebelum Anda mengklik.Dalam App Router, hooks berasal dari next/navigation (useRouter, usePathname, useSearchParams) — bukan next/router lama (yang hanya Pages Router). Mencampurnya adalah kesalahan umum.
<Link> (dengan pramuat otomatis) dan useRouter adalah bagaimana Anda membangun navigasi cepat seperti SPA yang Next.js terkenal.
Menggunakannya alih-alih <a href> biasa (yang memaksa pemuatan ulang penuh) adalah yang membuat aplikasi tetap responsif dan mempertahankan state tata letak.