Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Next.js 13 je predstavil nov sistem usmerjanja z uporabo imenika aplikacij. Next.js 12 je že zagotovil enostaven način za upravljanje poti prek poti, ki temeljijo na datotekah. Če dodate komponento v mapo strani, bo samodejno postala pot. V tej novi različici ima usmerjevalnik, ki temelji na datotečnem sistemu, vgrajeno nastavitev za postavitve, ugnezdeno usmerjanje predlog, uporabniški vmesnik za nalaganje, obravnavanje napak in podporo za strežniške komponente in pretakanje.

Ta članek pojasnjuje te nove funkcije in zakaj so pomembne.

Kako začeti uporabljati Next.js 13

Ustvarite svoj projekt Next.js 13 tako, da v terminalu zaženete naslednji ukaz.

npx ustvariti-Naslednji-app@najnovejše naslednji13 --eksperimentalna-aplikacija

To bi moralo ustvariti novo mapo z imenom next13 z novim imenikom aplikacij.

Razumevanje novega imenika aplikacij

Next.js 12 je uporabil

instagram viewer
strani imenik za usmerjanje, vendar je nadomeščen z aplikacija/ imenik v Next.js 13. The strani/ imenik še vedno deluje v Next 13 in omogoča postopno sprejemanje. Prepričati se morate le, da ne ustvarite datotek v dveh imenikih za isto pot, saj boste prejeli napako.

Tukaj je trenutna struktura imenika aplikacij.

V imeniku aplikacij uporabite mape za definiranje poti, datoteke v teh mapah pa se uporabljajo za definiranje uporabniškega vmesnika. Obstajajo tudi posebne datoteke, kot so:

  • page.tsx - Datoteka, uporabljena za ustvarjanje uporabniškega vmesnika za določeno pot.
  • layout.tsx - Vsebuje definicijo postavitve poti in jo je mogoče deliti na več straneh. Popolne so za navigacijske menije in stranske vrstice. Pri navigaciji postavitve ohranijo stanje in se ne upodabljajo znova. To pomeni, da ko krmarite med stranmi, ki imajo skupno postavitev, stanje ostane enako. Upoštevati je treba, da mora obstajati najvišja postavitev (korenska postavitev), ki vsebuje vse oznake HTML in telo, ki so v skupni rabi celotne aplikacije.
  • template.tsx - Predloge so kot postavitve, vendar ne ohranijo stanja in se znova upodobijo vsakič, ko se uporabijo za ustvarjanje strani. Predloge so kot nalašč za situacije, ko potrebujete določeno kodo za zagon vsakič, ko je komponenta nameščena, na primer animacije za vstop in izhod.
  • napaka.tsx - Ta datoteka se uporablja za obravnavanje napak v aplikaciji. Ovije pot z mejnim razredom napake React, tako da ko pride do napake na tej poti ali njenih podrejenih delih, jo poskuša obnoviti z upodabljanjem uporabniku prijazne strani z napako.
  • loading.tsx - Uporabniški vmesnik za nalaganje se takoj naloži s strežnika, ko se uporabniški vmesnik poti naloži v ozadju. Uporabniški vmesnik za nalaganje je lahko vrtljiv ali skeleton zaslon. Ko se vsebina poti naloži, nadomesti uporabniški vmesnik za nalaganje.
  • not-found.tsx - Nenajdena datoteka je upodobljena, ko Next.js naleti na a Napaka 404 za to stran. V Next.js 12 bi morali ročno ustvariti in nastaviti stran 404.
  • glava.tsx - Ta datoteka določa oznako glave za segment poti, v katerem je definirana.

Kako ustvariti pot v Next.js 13

Kot že omenjeno, se poti ustvarijo z uporabo map v aplikacija/ imenik. V tej mapi morate ustvariti datoteko z imenom page.tsx ki definira uporabniški vmesnik te specifične poti.

Na primer, da ustvarite pot s potjo /products, boste morali ustvariti app/products/page.tsx mapa.

Za ugnezdene poti, kot je /products/sale, ugnezdijo mape eno v drugo, tako da struktura map izgleda app/products/sale/page.tsx.

Poleg novega načina usmerjanja druge zanimive funkcije, ki jih imenik aplikacij podpira, so komponente strežnika in pretakanje.

Uporaba strežniških komponent v imeniku aplikacij

Imenik aplikacij privzeto uporablja komponente strežnika. Ta pristop zmanjša količino JavaScripta, poslanega v brskalnik, ko je komponenta upodobljena na strežniku. To izboljša delovanje.

Oglejte si ta članek o različne metode upodabljanja v Next.js za bolj poglobljeno razlago.

Strežniška komponenta pomeni, da lahko varno dostopate do skrivnosti okolja, ne da bi bile izpostavljene na strani odjemalca. Na primer, lahko uporabite proces.env.

Prav tako lahko neposredno komunicirate z zaledjem. Ni potrebe po uporabi getServerSideProps oz getStaticProps saj lahko za pridobivanje podatkov uporabite async/await v komponenti strežnika.

Razmislite o tej asinhroni funkciji, ki pridobi podatke iz API-ja.

asinhfunkcijogetData() {
poskusi{
konst res = čakati prinesi (' https://api.example.com/...');
vrnitev res.json();
 } ulov(napaka) {
metatinovoNapaka("Ni bilo mogoče pridobiti podatkov")
 }
}

Pokličete ga lahko neposredno na strani, kot sledi:

izvozprivzetoasinhfunkcijoStran() {
konst podatki = čakati getData();
vrnitev<div>div>;
}

Strežniške komponente so odlične za upodabljanje neinteraktivne vsebine. Če potrebujete uporabite kljuke React, poslušalci dogodkov ali API-ji samo za brskalnik, uporabljajo odjemalsko komponento tako, da dodajo direktivo »uporabi odjemalca« na vrh komponente pred morebitnimi uvozi.

Postopno pretakanje komponent v imeniku aplikacij

Pretakanje se nanaša na postopno pošiljanje delov uporabniškega vmesnika odjemalcu, dokler niso upodobljene vse komponente. To omogoča uporabniku, da si ogleda del vsebine, medtem ko se preostanek upodablja. Če želite uporabnikom omogočiti boljšo izkušnjo, upodabljajte nalagalno komponento kot vrtalnik, dokler strežnik ne dokonča upodabljanja vsebine. To storite na dva načina:

  • Ustvarjanje a nalaganje.tsx datoteko, ki bo upodobljena za celoten segment poti. 
izvozprivzetofunkcijonalaganje() {
vrnitev<str>Nalaganje...str>
}
  • Ovijanje posameznih komponent z mejo React Suspense in določanje nadomestnega uporabniškega vmesnika. 
uvoz { Napetost } od"reagirati";
uvoz { Izdelki } od"./Komponente";
izvozprivzetofunkcijoProdaja() {
vrnitev (
<razdelek>
Izdelki...
}>
<Izdelki />
Napetost>
razdelek>
 );
}

Pred upodobitvijo komponente Izdelki bo uporabnik videl »Izdelki…«. To je bolje kot prazen zaslon v smislu uporabniške izkušnje.

Nadgradnja na Next.js 13

Novi imenik aplikacij je vsekakor izboljšava prejšnjega imenika strani. Vključuje posebne datoteke, kot so postavitev, glava, predloga, napaka, ni bilo najdeno in nalaganje, ki obravnavajo različna stanja pri upodabljanju poti, ne da bi bila potrebna ročna nastavitev.

Poleg tega imenik aplikacij podpira tudi pretakanje in strežniške komponente, ki omogočajo izboljšano zmogljivost. Čeprav so te funkcije odlične tako za uporabnike kot za razvijalce, jih je večina trenutno v različici beta.

Kljub temu lahko še vedno nadgradite na Next.js 13, saj imenik strani še vedno deluje, nato pa začnite uporabljati imenik aplikacij v svojem tempu.