Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Next.js 13 introduserte et nytt rutingsystem ved å bruke appkatalogen. Next.js 12 ga allerede en enkel måte å håndtere ruter på gjennom filbaserte ruter. Å legge til en komponent i sider-mappen vil automatisk gjøre det til en rute. I denne nye versjonen kommer den filsystembaserte ruteren med et innebygd oppsett for oppsett, maler nestet ruting, et lastegrensesnitt, feilhåndtering og støtte for serverkomponenter og streaming.

Denne artikkelen forklarer disse nye funksjonene og hvorfor de er viktige.

Komme i gang med Next.js 13

Lag ditt eget Next.js 13-prosjekt ved å kjøre følgende kommando i terminalen.

npx skape-neste-app@siste neste13 --eksperimentell-app

Dette bør opprette en ny mappe kalt next13 med den nye appkatalogen.

Forstå den nye appkatalogen

Next.js 12 brukte sider katalogen for ruting, men den erstattes med app/ katalogen i Next.js 13. De

instagram viewer
sider/ katalogen fungerer fortsatt i Next 13 for å tillate inkrementell adopsjon. Du trenger bare å sørge for at du ikke oppretter filer i de to katalogene for samme rute, da du får en feilmelding.

Her er den gjeldende strukturen til appkatalogen.

I appkatalogen bruker du mapper til å definere ruter, og filene i disse mappene brukes til å definere brukergrensesnittet. Det er også spesielle filer som:

  • side.tsx - Filen som brukes til å opprette brukergrensesnittet for en bestemt rute.
  • layout.tsx - Den inneholder layoutdefinisjonen av ruten og kan deles på flere sider. De er perfekte for navigasjonsmenyer og sidefelt. På navigasjon bevarer oppsett status og gjengis ikke på nytt. Dette betyr at når du navigerer mellom sider som deler layout, forblir tilstanden den samme. En ting å merke seg er at det må være et øverste oppsett (rotoppsettet) som inneholder alle HTML- og body-taggene som deles på tvers av hele applikasjonen.
  • template.tsx - Maler er som oppsett, men de bevarer ikke tilstanden og gjengis på nytt hver gang de brukes til å lage en side. Maler er perfekte for situasjoner der du trenger en viss kode for å kjøre hver gang komponenten er montert, for eksempel gå inn og ut av animasjoner.
  • error.tsx - Denne filen brukes til å håndtere feil i applikasjonen. Den omslutter en rute med React-feilgrenseklassen slik at når en feil oppstår i den ruten eller dens underordnede, prøver den å gjenopprette fra den ved å gjengi en brukervennlig feilside.
  • loading.tsx - Lastegrensesnittet lastes umiddelbart fra serveren når rutegrensesnittet lastes inn i bakgrunnen. Lastegrensesnittet kan være en spinner eller en skjelettskjerm. Når ruteinnholdet er lastet, erstatter det lastegrensesnittet.
  • not-found.tsx - Filen som ikke ble funnet gjengis når Next.js støter på en 404-feil for den siden. I Next.js 12 må du manuelt opprette og sette opp en 404-side.
  • head.tsx - Denne filen spesifiserer head-taggen for rutesegmentet den er definert i.

Hvordan lage en rute i Next.js 13

Som nevnt før opprettes ruter ved hjelp av mapper i app/ katalog. Inne i denne mappen må du opprette en fil som heter side.tsx som definerer brukergrensesnittet til den spesifikke ruten.

For eksempel for å lage en rute med banen /products, må du opprette en app/products/page.tsx fil.

For nestede ruter som /products/sale, nest mapper inne i hverandre slik at mappestrukturen ser ut app/products/sale/page.tsx.

Bortsett fra en ny måte å rute andre interessante funksjoner appkatalogen støtter på, er serverkomponenter og streaming.

Bruke serverkomponenter i appkatalogen

Appkatalogen bruker serverkomponenter som standard. Denne tilnærmingen reduserer mengden JavaScript som sendes til nettleseren når komponenten gjengis på serveren. Dette forbedrer ytelsen.

Se denne artikkelen på forskjellige gjengivelsesmetoder i Next.js for en mer utdypende forklaring.

En serverkomponent betyr at du trygt kan få tilgang til miljøhemmeligheter uten at de blir eksponert på klientsiden. Du kan for eksempel bruke process.env.

Du kan også samhandle med backend direkte. Det er ikke nødvendig å bruke getServerSideProps eller getStaticProps som du kan bruke async/wait i serverkomponenten for å hente data.

Tenk på denne asynkrone funksjonen som henter data fra et API.

asynkronfunksjongetData() {
prøve{
konst res = avvente hente(' https://api.example.com/...');
komme tilbake res.json();
 } å fange(feil) {
kastenyFeil("Kunne ikke hente data")
 }
}

Du kan ringe det direkte på en side som følger:

eksportmisligholdeasynkronfunksjonSide() {
konst data = avvente getData();
komme tilbake<div>div>;
}

Serverkomponenter er flotte for å gjengi ikke-interaktivt innhold. Hvis du trenger det bruk React kroker, hendelseslyttere eller bare nettleser-APIer, bruker en klientkomponent ved å legge til "bruk klient"-direktivet øverst i komponenten før enhver import.

Inkrementelt streaming av komponenter i appkatalogen

Streaming refererer til å sende deler av brukergrensesnittet til klienten gradvis inntil alle komponentene er gjengitt. Dette lar brukeren se deler av innholdet mens resten gjengis. For å gi brukerne en bedre opplevelse, gjengi en lastekomponent som en spinner til serveren fullfører gjengivelsen av innholdet. Du gjør dette på to måter:

  • Opprette en loading.tsx fil som vil bli gjengitt for hele rutesegmentet. 
eksportmisligholdefunksjonLaster() {
komme tilbake<s>Laster inn...s>
}
  • Pakke inn individuelle komponenter med React Suspense-grense og spesifisere et reservegrensesnitt. 
import { Spenning } fra"reagere";
import { Produkter } fra"./Komponenter";
eksportmisligholdefunksjonSalg() {
komme tilbake (
<seksjon>
Produkter...
}>
<Produkter />
Spenning>
seksjon>
 );
}

Før produktkomponenten gjengis, vil en bruker se "Produkter...". Dette er bedre enn en tom skjerm når det gjelder brukeropplevelse.

Oppgraderer til Next.js 13

Den nye appkatalogen er definitivt en forbedring fra forrige sidekatalog. Den inkluderer spesielle filer som layout, hode, mal, feil, ikke funnet og lasting som håndterer forskjellige tilstander når du gjengir en rute uten å trenge et manuelt oppsett.

I tillegg støtter appkatalogen også streaming og serverkomponenter som fører til forbedret ytelse. Selv om disse funksjonene er gode for både brukere og utviklere, er de fleste av dem i betaversjon.

Du kan imidlertid fortsatt oppgradere til Next.js 13 siden sidekatalogen fortsatt fungerer, og begynn deretter å bruke appkatalogen i ditt eget tempo.