Routing og linking

Av Sondre Slåttedal HavellenPublisert 15/6-22

For routing i NextJs bruker man mappestrukturen i kodebasen. For linker innad i siden bruker man 'next/link' som inkluderer en lang rekke optimiseringer. For eksempel har komponenten mulighet til å prefetche alle SSG-sider før en bruker har trykket på linken. Dette gjør at siden oppleves som svært kjapp. Et eksempel kan sees under.

1import Link from "next/link";
2
3export default function PostPage({
4  post,
5}: InferGetStaticPropsType<typeof getStaticProps>) {
6  return (
7    <main>
8      <Link href={`/`}>
9        <a>
10          Tilbake
11        </a>
12      </Link>
13      <Post {...post} />
14    </main>
15  );
16}
17

Hvis en åpner dev-tools og ser på nettverksloggen i en NextJs-side vil en se at alle linker som dukker opp på skjermen vil pre-fetches selv før en bruker trykker på linken.