Next.js tarjoaa asiakkaan puolella olevan navigoinnin, joka on nopeampaa kuin koko sivun uudelleenlataamisesta — se noutaa vain uuden sivun tiedot/komponentit ja vaihtaa ne, pitäen jaetut asettelut asennettuna.
;
() {
(
);
}
<Link> renderöi <a>-elementin, mutta sieppaa klikkausta asiakkaan puolella olevan navigoinnin vuoksi. Ratkaisevasti se ennakkolataa linkitetyn reitin, kun linkki tulee näkymään, joten navigointi tuntuu välittömältä.
"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
}
}
Käytä useRouter-hookkia, kun navigointi on tapahduttava logiikan vastauksena (lomakkeen lähettämisen jälkeen, kirjautumisen jälkeen jne.), ei linkkiä klikkaamalla.
<Link> ennakkolataa reitit ennen kuin napsautat.App Routerissa hookit tulevat next/navigation-osoitteesta (useRouter, usePathname, useSearchParams) — ei vanhasta next/router-osoitteesta (joka on vain Pages Router). Niiden sekoittaminen on yleinen virhe.
<Link> (automaattisella ennakkolatausella) ja useRouter ovat tapaa, jolla rakennat nopean, SPA-kaltaisen navigoinnin, josta Next.js on tunnettu.
Niiden käyttäminen tavallisen <a href>-elementin (joka pakottaa täyden uudelleenlataamisen) sijaan on se, mikä pitää sovelluksen nopeana ja säilyttää asettelun tilan.