Next.js nyedhiakake navigasi sisi klien sing luwih cepet tinimbang ngisi ulang kaca lengkap — ngisor-isoré mung data/komponen kaca anyar lan ngganti-nggantén, tetep layout sing dikumpulake.
;
() {
(
);
}
<Link> ngisor <a> nanging intercept klik kanggo navigasi sisi klien. Penting banget, iki prefetch rute sing disambung nalika link mlebu ing viewport, dadi navigasi krasa sekejap.
"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 nalika navigasi kudu kelakon amarga logika (sawise kirim formulir, login, lsp.), dudu klik ing link.
<Link> preload rute sadurunge kowe klik.Di App Router, hook bali saka next/navigation (useRouter, usePathname, useSearchParams) — ora saka next/router (sing mung Pages Router). Campur-campur iku kesalahan biasa.
<Link> (karo prefetch otomatis) lan useRouter iku cara nggawa navigasi cepet lan kaya SPA sing Next.js dikenal.
Pakéan wong tinimbang <a href> polos (sing paksa ngisi ulang lengkap) iku sing tetep aplikasi lancar lan etung layout keadaan.