Hvordan navigerer du mellem sider i Next.js?

Question

Accepted Answer

Next.js leverer **client-side navigation**, som er hurtigere end en fuld sidegenindlæsning — den henter kun den nye sides data/komponenter og bytter dem ud, og holder delte layouts monteret. ## Link-komponenten (deklarativ) ```tsx import Link from "next/link"; export default function Nav() { return ( ); } ``` `` gengiver et ``, men opfanger klikket for client-side navigation. Afgørende er det, at den **prefetcher** den linkede rute, når linket kommer ind i viewport'et, så navigation føles øjeblikkelig. ## Programmatisk navigation (i event handlers) ```tsx "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 } } ``` Brug `useRouter`, når navigation skal ske som svar på logik (efter en formularindsendelse, login, osv.), ikke på et klik på et link. ## Hvorfor client-side navigation er hurtig - **Ingen fuld genindlæsning** — kun de ændrede segmenter gengives igen; delte layouts forbliver monteret. - **Prefetching** — `` forindlæser ruter, før du klikker. - **Bevarer tilstand** — uændrede layouts beholder deres tilstand ved navigation. ## Vigtig: import fra next/navigation I App Routeren kommer hooks fra `next/navigation` (`useRouter`, `usePathname`, `useSearchParams`) — *ikke* den gamle `next/router` (som kun er Pages Router). At blande dem er en hyppig fejl. ## Hvorfor det betyder noget `` (med automatisk prefetching) og `useRouter` er hvordan du bygger den hurtige, SPA-lignende navigation, som Next.js er kendt for. At bruge dem i stedet for almindelig `` (som tvinger en fuld genindlæsning) er det, der holder appen hurtig og bevarer layout-tilstand.