Next.js poskytuje navigaci na straně klienta, která je rychlejší než úplné znovunačtení stránky — stáhne pouze data/komponenty nové stránky a proběhne jejich výměna, přičemž jsou sdílená rozložení ponechána připojena.
;
() {
(
);
}
<Link> vykresluje <a>, ale zachycuje kliknutí pro navigaci na straně klienta. Zásadně předběžně stahuje propojenou trasu, když se odkaz dostane do viditelné oblasti, takže se navigace zdá okamžitá.
"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
}
}
Verze useRouter použijte, když se navigace musí uskutečnit v reakci na logiku (po odeslání formuláře, přihlášení atd.), a ne na kliknutí na odkaz.
<Link> předem načítá trasy, než kliknete.V App Routeru pocházejí hooky z next/navigation (useRouter, usePathname, useSearchParams) — ne ze starého next/router (což je pouze Pages Router). Jejich záměna je běžná chyba.
<Link> (s automatickým předběžným stahováním) a useRouter jsou způsob, jak vytvořit rychlou navigaci podobnou SPA, pro kterou je Next.js známý.
Jejich použití místo prostého <a href> (který vynucuje úplné znovunačtení) je to, co udržuje aplikaci rychlou a zachovává stav rozložení.