Next.js bietet clientseitige Navigation, die schneller ist als ein vollständiges Neuladen der Seite — es ruft nur die Daten/Komponenten der neuen Seite ab und tauscht sie aus, während gemeinsame Layouts eingebunden bleiben.
;
() {
(
);
}
<Link> rendert ein <a>, fängt aber den Klick für clientseitige Navigation ab. Entscheidend ist, dass es die verlinkte Route vorab abruft, wenn der Link in den Viewport kommt, sodass die Navigation sofort zu erfolgen scheint.
"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
}
}
Verwendet useRouter, wenn Navigation als Reaktion auf Logik stattfinden muss (nach dem Absenden eines Formulars, Login usw.), nicht auf einen Klick auf einen Link.
<Link> lädt Routen vor, bevor Sie klicken.Im App Router stammen Hooks aus next/navigation (useRouter, usePathname, useSearchParams) — nicht aus dem alten next/router (das nur Pages Router ist). Sie zu verwechseln ist ein häufiger Fehler.
<Link> (mit automatischem Vorab abrufen) und useRouter sind die Art und Weise, wie Sie die schnelle, SPA-ähnliche Navigation aufbauen, für die Next.js bekannt ist.
Sie anstelle von normalem <a href> zu verwenden (das ein vollständiges Neuladen erzwingt) ist das, was die App schnell hält und den Layout-Zustand bewahrt.