Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Next.js 13 introducerede et nyt routingsystem ved hjælp af app-biblioteket. Next.js 12 gav allerede en nem måde at håndtere ruter på via filbaserede ruter. Tilføjelse af en komponent til mappen sider vil automatisk gøre det til en rute. I denne nye version kommer den filsystembaserede router med en indbygget opsætning til layouts, skabeloner indlejret routing, en indlæsningsbrugergrænseflade, fejlhåndtering og understøttelse af serverkomponenter og streaming.

Denne artikel forklarer disse nye funktioner, og hvorfor de er vigtige.

Kom godt i gang med Next.js 13

Opret dit eget Next.js 13-projekt ved at køre følgende kommando i terminalen.

npx skab-Næste-app@seneste næste13 --eksperimentel-app

Dette skulle oprette en ny mappe kaldet next13 med den nye app-mappe.

Forståelse af den nye appkatalog

Next.js 12 brugte sider bibliotek til routing, men det er erstattet med

instagram viewer
app/ mappe i Next.js 13. Det sider/ bibliotek fungerer stadig i Next 13 for at tillade trinvis overtagelse. Du skal kun sikre dig, at du ikke opretter filer i de to mapper til den samme rute, da du får en fejl.

Her er den aktuelle struktur for app-biblioteket.

I app-biblioteket bruger du mapper til at definere ruter, og filerne i disse mapper bruges til at definere brugergrænsefladen. Der er også specielle filer som:

  • side.tsx - Filen, der bruges til at oprette brugergrænsefladen for en bestemt rute.
  • layout.tsx - Den indeholder layoutdefinitionen af ​​ruten og kan deles på tværs af flere sider. De er perfekte til navigationsmenuer og sidebjælker. Ved navigation bevarer layouts tilstand og gengives ikke. Det betyder, at når du navigerer mellem sider, der deler et layout, forbliver tilstanden den samme. En ting at bemærke er, at der skal være et øverste layout (rodlayoutet), der indeholder alle HTML- og body-tags, der deles på tværs af hele applikationen.
  • template.tsx - Skabeloner er ligesom layouts, men de bevarer ikke tilstanden og gengives igen, hver gang de bruges til at oprette en side. Skabeloner er perfekte til situationer, hvor du har brug for en bestemt kode for at køre hver gang komponenten monteres, for eksempel skal du indtaste og afslutte animationer.
  • error.tsx - Denne fil bruges til at håndtere fejl i applikationen. Den omslutter en rute med React-fejlgrænseklassen, således at når der opstår en fejl i den rute eller dens børn, forsøger den at genoprette den ved at gengive en brugervenlig fejlside.
  • loading.tsx - Indlæsningsbrugergrænsefladen indlæses øjeblikkeligt fra serveren, efterhånden som rutegrænsefladen indlæses i baggrunden. Indlæsnings-UI kan være en spinner eller en skeletskærm. Når ruteindholdet indlæses, erstatter det indlæsnings-UI.
  • ikke-fundet.tsx - Den ikke-fundne fil gengives, når Next.js støder på en 404 fejl for den side. I Next.js 12 skal du manuelt oprette og konfigurere en 404-side.
  • head.tsx - Denne fil specificerer hovedmærket for rutesegmentet, det er defineret i.

Sådan opretter du en rute i Next.js 13

Som nævnt før oprettes ruter ved hjælp af mapper i app/ vejviser. Inde i denne mappe skal du oprette en fil kaldet side.tsx der definerer brugergrænsefladen for den specifikke rute.

For eksempel at oprette en rute med stien /products, skal du oprette en app/products/page.tsx fil.

Til indlejrede ruter som /products/sale, indlejre mapper inde i hinanden, sådan at mappestrukturen ser ud app/products/sale/page.tsx.

Bortset fra en ny måde at dirigere andre interessante funktioner på, som app-biblioteket understøtter, er serverkomponenter og streaming.

Brug af serverkomponenter i appkataloget

App-biblioteket bruger som standard serverkomponenter. Denne tilgang reducerer mængden af ​​JavaScript, der sendes til browseren, efterhånden som komponenten gengives på serveren. Dette forbedrer ydeevnen.

Se denne artikel vedr forskellige gengivelsesmetoder i Next.js for en mere dybdegående forklaring.

En serverkomponent betyder, at du sikkert kan få adgang til miljøhemmeligheder, uden at de bliver afsløret på klientsiden. Du kan f.eks. bruge proces.env.

Du kan også interagere med backend direkte. Det er ikke nødvendigt at bruge getServerSideProps eller getStaticProps da du kan bruge async/await i serverkomponenten til at hente data.

Overvej denne asynkroniseringsfunktion, der henter data fra en API.

asynkronfungeregetData() {
prøve{
konst res = vente hente(' https://api.example.com/...');
Vend tilbage res.json();
 } fangst(fejl) {
kastenyFejl('Kunne ikke hente data')
 }
}

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

eksportStandardasynkronfungereSide() {
konst data = vente getData();
Vend tilbage<div>div>;
}

Serverkomponenter er gode til at gengive ikke-interaktivt indhold. Hvis du har brug for det brug React kroge, hændelseslyttere eller kun browser-API'er, bruger en klientkomponent ved at tilføje "brug klient"-direktivet øverst i komponenten før enhver import.

Trinvis streaming af komponenter i appkataloget

Streaming refererer til at sende dele af brugergrænsefladen til klienten gradvist, indtil alle komponenterne er gengivet. Dette giver brugeren mulighed for at se en del af indholdet, mens resten bliver gengivet. For at give brugerne en bedre oplevelse skal du gengive en indlæsningskomponent som en spinner, indtil serveren fuldfører gengivelsen af ​​indholdet. Du gør dette på to måder:

  • Oprettelse af en loading.tsx fil, der vil blive gengivet for hele rutesegmentet. 
eksportStandardfungereIndlæser() {
Vend tilbage<s>Indlæser...s>
}
  • Indpakning af individuelle komponenter med React Suspense-grænse og specificering af en fallback-brugergrænseflade. 
importere { Spænding } fra"reagere";
importere { Produkter } fra"./Komponenter";
eksportStandardfungereSalg() {
Vend tilbage (
<afsnit>
Produkter...
}>
<Produkter />
Spænding>
afsnit>
 );
}

Før produktkomponenten gengives, vil en bruger se "Produkter...". Dette er bedre end en tom skærm med hensyn til brugeroplevelse.

Opgradering til Next.js 13

Den nye app-mappe er absolut en forbedring fra den tidligere sidemappe. Det inkluderer specielle filer som layout, hoved, skabelon, fejl, ikke fundet og indlæsning, der håndterer forskellige tilstande, når du renderer en rute uden at kræve en manuel opsætning.

Derudover understøtter app-biblioteket også streaming og serverkomponenter, der fører til forbedret ydeevne. Selvom disse funktioner er gode for både brugere og udviklere, er de fleste af dem i øjeblikket i beta.

Du kan dog stadig opgradere til Next.js 13, da sidebiblioteket stadig fungerer, og begynd derefter at bruge appbiblioteket i dit eget tempo.