Next.js

Next.js

Next.js dokumentasjon

App Router

Applikasjonen bruker Next.js 13+ sin nye App router. Det vil si at alle filer knyttet til de ulike sidene skal ligge under app mappen, på følgende format. app/navn-paa-path/page.tsx

For at filen skal bli til en rute må den hete page.tsx, dersom den heter noe annet kan den ikke nås via url.

Viktige filnavn (gjelder kun under app mappen)

Filnavn	Beskrivelse
page.tsx	Definerer en route som kan nås via URL
layout.tsx	Definerer en felles stil som blir brukt rundt alle page.tsx filer i samme mappe og nedover
route.ts	Definerer et endepunkt serverside som kan kalles med fetch-API eller tilsvarende
loading.tsx	En komponent som vises mens en annen komponent lastes inn, ofte på grunn av async operasjoner
not-found.tsx	Vises dersom URL-en brukeren går til ikke eksisterer

Server components

Next.js 13+ støtter også react server components for å kjøre kode på en server før resultatet blir sendt til klienten. Det er noen begrensninger på server components, blant annet av react hooks ikke er støttet, da må man bruke client components.

Alle komponenter i next.js 13+ er server components som standard, man kan gjøre de om til client components ved å skrive "use client" i toppen av filen.

page.tsx filer i app bør bruke server components. Dersom det er nødvendig å bruke hooks, bør den logikken ligge i en egen fil, markert med "use client".