Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Next.js 13 introduceerde een nieuw routeringssysteem met behulp van de app-directory. Next.js 12 bood al een gemakkelijke manier om routes af te handelen via op bestanden gebaseerde routes. Het toevoegen van een component aan de map Pages zou er automatisch een route van maken. In deze nieuwe versie wordt de op het bestandssysteem gebaseerde router geleverd met een ingebouwde setup voor lay-outs, sjablonen geneste routing, een gebruikersinterface voor laden, foutafhandeling en ondersteuning voor servercomponenten en streaming.

In dit artikel worden deze nieuwe functies uitgelegd en waarom ze belangrijk zijn.

Aan de slag met Next.js 13

Maak uw eigen Next.js 13-project door de volgende opdracht in de terminal uit te voeren.

npx creëren-volgende-app@nieuwste volgende13 --experimentele-app

Dit zou een nieuwe map met de naam next13 moeten maken met de nieuwe app-directory.

instagram viewer

De nieuwe app-directory begrijpen

Next.js 12 gebruikte de Pagina's directory voor routering, maar deze wordt vervangen door de app/ map in Next.js 13. De Pagina's/ directory werkt nog steeds in Next 13 om incrementele acceptatie mogelijk te maken. U hoeft er alleen maar voor te zorgen dat u geen bestanden aanmaakt in de twee mappen voor dezelfde route, anders krijgt u een foutmelding.

Hier is de huidige structuur van de app-directory.

In de app-directory gebruikt u mappen om routes te definiëren en de bestanden in deze mappen worden gebruikt om de gebruikersinterface te definiëren. Er zijn ook speciale bestanden zoals:

  • pagina.tsx - Het bestand dat wordt gebruikt om de gebruikersinterface voor een bepaalde route te maken.
  • lay-out.tsx - Het bevat de lay-outdefinitie van de route en is deelbaar over meerdere pagina's. Ze zijn perfect voor navigatiemenu's en zijbalken. Bij navigatie behouden lay-outs de status en worden ze niet opnieuw weergegeven. Dit betekent dat wanneer u navigeert tussen pagina's die een lay-out delen, de status hetzelfde blijft. Een ding om op te merken is dat er een bovenste lay-out moet zijn (de root-lay-out) die alle HTML- en body-tags bevat die door de hele applicatie worden gedeeld.
  • sjabloon.tsx - Sjablonen zijn als lay-outs, maar ze behouden de status niet en worden elke keer opnieuw weergegeven wanneer ze worden gebruikt om een ​​pagina te maken. Sjablonen zijn perfect voor situaties waarin u bepaalde code nodig hebt om elke keer dat de component wordt aangekoppeld, uit te voeren, bijvoorbeeld animaties openen en sluiten.
  • fout.tsx - Dit bestand wordt gebruikt om fouten in de applicatie af te handelen. Het verpakt een route met de React-foutbegrenzingsklasse, zodat wanneer er een fout optreedt in die route of de onderliggende routes, deze probeert te herstellen door een gebruiksvriendelijke foutpagina weer te geven.
  • laden.tsx - De laad-UI wordt direct van de server geladen terwijl de route-UI op de achtergrond wordt geladen. De laad-UI kan een spinner- of een skeletscherm zijn. Zodra de route-inhoud is geladen, vervangt deze de gebruikersinterface voor laden.
  • niet-gevonden.tsx - Het niet-gevonden bestand wordt weergegeven wanneer Next.js een 404-fout voor die pagina. In Next.js 12 zou je handmatig een 404-pagina moeten maken en instellen.
  • hoofd.tsx - Dit bestand specificeert de head-tag voor het routesegment waarin het is gedefinieerd.

Een route maken in Next.js 13

Zoals eerder vermeld, worden routes gemaakt met behulp van mappen in de app/ map. In deze map moet u een bestand maken met de naam pagina.tsx die de gebruikersinterface van die specifieke route definieert.

Bijvoorbeeld om een ​​route te maken met het pad /products, moet u een app/products/pagina.tsx bestand.

Voor geneste routes zoals /products/sale, mappen in elkaar nesten zodat de mappenstructuur eruitziet app/products/sale/page.tsx.

Afgezien van een nieuwe manier van routeren, zijn andere interessante functies die de app-directory ondersteunt servercomponenten en streaming.

Servercomponenten gebruiken in de app-directory

De app-directory gebruikt standaard servercomponenten. Deze benadering vermindert de hoeveelheid JavaScript die naar de browser wordt verzonden terwijl de component op de server wordt weergegeven. Dit verbetert de prestaties.

Zie dit artikel op verschillende weergavemethoden in Next.js voor een uitgebreidere uitleg.

Een servercomponent betekent dat u veilig toegang hebt tot omgevingsgeheimen zonder dat deze aan de clientzijde worden blootgesteld. U kunt bijvoorbeeld gebruiken proces.env.

U kunt ook rechtstreeks communiceren met de backend. Het is niet nodig om te gebruiken getServerSideProps of getStaticProps aangezien u async/wait in de servercomponent kunt gebruiken om gegevens op te halen.

Overweeg deze asynchrone functie die gegevens ophaalt van een API.

asynchroonfunctiegegevens verkrijgen() {
poging{
const res = wachten ophalen(' https://api.example.com/...');
opbrengst res.json();
 } vangst(fout) {
gooiennieuwFout('Kan gegevens niet ophalen')
 }
}

U kunt het als volgt rechtstreeks op een pagina oproepen:

exporterenstandaardasynchroonfunctieBladzijde() {
const gegevens = wachten gegevens verkrijgen();
opbrengst<div>div>;
}

Servercomponenten zijn geweldig voor het weergeven van niet-interactieve inhoud. Als je moet gebruik React-hooks, gebeurtenislisteners of browser-only API's gebruiken een clientcomponent door de "use client"-richtlijn boven aan de component toe te voegen voordat er iets wordt geïmporteerd.

Componenten incrementeel streamen in de app-directory

Streaming verwijst naar het geleidelijk verzenden van delen van de gebruikersinterface naar de client totdat alle componenten zijn weergegeven. Hierdoor kan de gebruiker een deel van de inhoud bekijken terwijl de rest wordt weergegeven. Om gebruikers een betere ervaring te bieden, rendert u een laadcomponent zoals een spinner totdat de server klaar is met het renderen van de inhoud. Dit doe je op twee manieren:

  • Het creëren van een laden.tsx bestand dat wordt weergegeven voor het gehele routesegment. 
exporterenstandaardfunctieBezig met laden() {
opbrengst<P>Bezig met laden...P>
}
  • Individuele componenten inpakken met React Suspense-grens en een terugval-UI specificeren. 
importeren { Spanning } van"Reageer";
importeren { Producten } van"./Componenten";
exporterenstandaardfunctieVerkoop() {
opbrengst (
<sectie>
Producten...
}>
<Producten />
Spanning>
sectie>
 );
}

Voordat de component Producten wordt weergegeven, ziet een gebruiker "Producten ...". Dit is beter dan een leeg scherm in termen van gebruikerservaring.

Upgraden naar Next.js 13

De nieuwe app-directory is absoluut een verbetering ten opzichte van de directory met de vorige pagina's. Het bevat speciale bestanden zoals lay-out, kop, sjabloon, fout, niet gevonden en laden die verschillende statussen behandelen bij het weergeven van een route zonder dat handmatige instellingen nodig zijn.

Bovendien ondersteunt de app-directory ook streaming en servercomponenten die tot verbeterde prestaties leiden. Hoewel deze functies geweldig zijn voor zowel gebruikers als ontwikkelaars, zijn de meeste momenteel in bèta.

U kunt echter nog steeds upgraden naar Next.js 13 omdat de paginadirectory nog steeds werkt en vervolgens de app-directory in uw eigen tempo gaat gebruiken.