Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Next.js 13 uveo je novi sustav usmjeravanja pomoću direktorija aplikacije. Next.js 12 već je omogućio jednostavan način rukovanja rutama kroz rute temeljene na datotekama. Dodavanje komponente u mapu stranica automatski bi to učinilo rutom. U ovoj novoj verziji, usmjerivač temeljen na datotečnom sustavu dolazi s ugrađenim postavkama za rasporede, predloške ugniježđenog usmjeravanja, korisničko sučelje za učitavanje, rukovanje pogreškama i podršku za komponente poslužitelja i strujanje.

Ovaj članak objašnjava te nove značajke i zašto su važne.

Početak rada s Next.js 13

Napravite vlastiti projekt Next.js 13 pokretanjem sljedeće naredbe u terminalu.

npx stvoriti-Sljedeći-aplikacija@najnovije sljedeći13 --eksperimentalna-aplikacija

Ovo bi trebalo stvoriti novu mapu pod nazivom next13 s novim imenikom aplikacija.

Razumijevanje novog imenika aplikacija

Next.js 12 koristio je

instagram viewer
stranice direktorij za usmjeravanje, ali je zamijenjen s aplikacija/ direktorij u Next.js 13. The stranice/ direktorij i dalje radi u Next 13 kako bi omogućio inkrementalno usvajanje. Samo trebate osigurati da ne stvarate datoteke u dva direktorija za istu rutu jer ćete dobiti pogrešku.

Ovdje je trenutna struktura direktorija aplikacija.

U direktoriju aplikacija koristite mape za definiranje ruta, a datoteke unutar tih mapa koriste se za definiranje korisničkog sučelja. Postoje i posebne datoteke kao što su:

  • stranica.tsx - Datoteka koja se koristi za stvaranje korisničkog sučelja za određenu rutu.
  • raspored.tsx - Sadrži definiciju izgleda rute i može se dijeliti na više stranica. Savršeni su za navigacijske izbornike i bočne trake. Prilikom navigacije, izgledi čuvaju stanje i ne prikazuju se ponovno. To znači da kada se krećete između stranica koje dijele izgled, stanje ostaje isto. Jedna stvar koju treba imati na umu je da mora postojati gornji izgled (korijenski izgled) koji sadrži sve HTML i body oznake koje se dijele u cijeloj aplikaciji.
  • predložak.tsx - Predlošci su poput izgleda, ali ne čuvaju stanje i ponovno se prikazuju svaki put kada se koriste za izradu stranice. Predlošci su savršeni za situacije u kojima vam je potreban određeni kod za pokretanje svaki put kada se komponenta montira, na primjer, animacije ulaza i izlaza.
  • greška.tsx - Ova se datoteka koristi za obradu pogrešaka u aplikaciji. Omotava rutu s klasom granice pogreške React tako da kada se dogodi pogreška u toj ruti ili njezinim potomcima, pokušava se oporaviti od nje renderiranjem stranice s pogreškom prilagođenom korisniku.
  • loading.tsx - UI za učitavanje trenutno se učitava s poslužitelja dok se UI rute učitava u pozadini. UI za učitavanje može biti spinner ili kostur zaslona. Nakon što se sadržaj rute učita, zamjenjuje korisničko sučelje za učitavanje.
  • nije pronađeno.tsx - Datoteka koja nije pronađena prikazuje se kada Next.js naiđe na a Greška 404 za tu stranicu. U Next.js 12 morali biste ručno izraditi i postaviti stranicu 404.
  • glava.tsx - Ova datoteka navodi oznaku glave za segment rute u kojem je definirana.

Kako stvoriti rutu u Next.js 13

Kao što je prije spomenuto, rute se stvaraju pomoću mapa u aplikacija/ imenik. Unutar ove mape morate stvoriti datoteku pod nazivom stranica.tsx koji definira UI te specifične rute.

Na primjer, za izradu rute sa stazom /products, morat ćete izraditi aplikacija/proizvodi/stranica.tsx datoteka.

Za ugniježđene rute poput /products/sale, ugniježditi mape jednu u drugu tako da struktura mape izgleda ovako app/products/sale/page.tsx.

Osim novog načina usmjeravanja, druge zanimljive značajke koje direktorij aplikacija podržava su komponente poslužitelja i strujanje.

Korištenje komponenti poslužitelja u imeniku aplikacija

Imenik aplikacija prema zadanim postavkama koristi komponente poslužitelja. Ovaj pristup smanjuje količinu JavaScripta koji se šalje pregledniku dok se komponenta prikazuje na poslužitelju. Ovo poboljšava performanse.

Pogledajte ovaj članak na različite metode prikazivanja u Next.js za dublje objašnjenje.

Komponenta poslužitelja znači da možete sigurno pristupiti tajnama okoline bez da budu izložene na strani klijenta. Na primjer, možete koristiti proces.env.

Također možete izravno komunicirati s pozadinom. Nema potrebe za korištenjem getServerSideProps ili getStaticProps kao što možete koristiti async/await u komponenti poslužitelja za dohvaćanje podataka.

Razmotrite ovu asinkronu funkciju koja dohvaća podatke iz API-ja.

asinkronifunkcijagetData() {
probati{
konst res = čekati dohvati (' https://api.example.com/...');
povratak res.json();
 } ulov(pogreška) {
bacanjenoviGreška('Nije moguće dohvatiti podatke')
 }
}

Možete ga pozvati izravno na stranici na sljedeći način:

izvozzadanoasinkronifunkcijaStranica() {
konst podaci = čekati getData();
povratak<div>div>;
}

Komponente poslužitelja izvrsne su za renderiranje neinteraktivnog sadržaja. Ako treba koristiti React kuke, slušatelji događaja ili API-ji samo za preglednik, koriste klijentsku komponentu dodavanjem direktive "koristi klijent" na vrhu komponente prije bilo kakvog uvoza.

Postupno strujanje komponenti u imeniku aplikacija

Streaming se odnosi na postupno slanje dijelova korisničkog sučelja klijentu dok se sve komponente ne renderiraju. Ovo korisniku omogućuje pregled dijela sadržaja dok se ostatak prikazuje. Da biste korisnicima pružili bolje iskustvo, generirajte komponentu za učitavanje poput spinnera dok poslužitelj ne dovrši generiranje sadržaja. To možete učiniti na dva načina:

  • Stvaranje a učitavanje.tsx datoteku koja će se prikazati za cijeli segment rute. 
izvozzadanofunkcijaUčitavam() {
povratak<str>Učitavam...str>
}
  • Omotavanje pojedinačnih komponenti granicom React Suspense i određivanje rezervnog korisničkog sučelja. 
uvoz { Suspenzija } iz"reagirati";
uvoz {Proizvodi} iz"./Komponente";
izvozzadanofunkcijaProdaja() {
povratak (
<odjeljak>
Proizvodi...
}>
<Proizvodi />
Suspenzija>
odjeljak>
 );
}

Prije nego što se komponenta Proizvodi renderira, korisnik će vidjeti "Proizvodi...". Ovo je bolje od praznog ekrana u smislu korisničkog iskustva.

Nadogradnja na Next.js 13

Novi imenik aplikacija definitivno je poboljšanje u odnosu na prethodni imenik stranica. Uključuje posebne datoteke kao što su izgled, glava, predložak, pogreška, nije pronađeno i učitavanje koje obrađuju različita stanja prilikom renderiranja rute bez potrebe za ručnim postavljanjem.

Dodatno, imenik aplikacija također podržava strujanje i komponente poslužitelja što dovodi do poboljšanih performansi. Iako su ove značajke izvrsne i za korisnike i za programere, većina ih je trenutno u beta verziji.

Međutim, još uvijek možete nadograditi na Next.js 13 budući da direktorij stranica i dalje radi, a zatim počnite koristiti direktorij aplikacija svojim tempom.