Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Next.js 13 a introdus un nou sistem de rutare folosind directorul aplicației. Next.js 12 a oferit deja o modalitate ușoară de a gestiona rutele prin rute bazate pe fișiere. Adăugarea unei componente în folderul de pagini ar face automat o rută. În această nouă versiune, routerul bazat pe sistemul de fișiere vine cu o configurație încorporată pentru layout-uri, rutare imbricată de șabloane, o interfață de utilizare de încărcare, gestionarea erorilor și suport pentru componentele serverului și streaming.

Acest articol explică aceste noi funcții și de ce sunt importante.

Noțiuni introductive cu Next.js 13

Creați-vă propriul proiect Next.js 13 rulând următoarea comandă în terminal.

npx crea-Următorul-app@latest next13 --experimental-app

Acest lucru ar trebui să creeze un folder nou numit next13 cu noul director al aplicației.

instagram viewer

Înțelegerea noului director de aplicații

Next.js 12 a folosit pagini director pentru rutare, dar este înlocuit cu aplicatie/ directorul din Next.js 13. The pagini/ directorul încă funcționează în Next 13 pentru a permite adoptarea incrementală. Trebuie doar să vă asigurați că nu creați fișiere în cele două directoare pentru aceeași rută, deoarece veți primi o eroare.

Iată structura actuală a directorului aplicației.

În directorul aplicației, utilizați foldere pentru a defini rutele, iar fișierele din interiorul acestor foldere sunt folosite pentru a defini interfața de utilizare. Există și fișiere speciale precum:

  • pagina.tsx - Fișierul folosit pentru a crea interfața de utilizare pentru o anumită rută.
  • layout.tsx - Conține definiția aspectului rutei și poate fi partajat pe mai multe pagini. Sunt perfecte pentru meniurile de navigare și barele laterale. La navigare, aspectele păstrează starea și nu se redau din nou. Aceasta înseamnă că atunci când navigați între paginile care partajează un aspect, starea rămâne aceeași. Un lucru de remarcat este că trebuie să existe un aspect superior (aspectul rădăcină) care să conțină toate etichetele HTML și body partajate în întreaga aplicație.
  • template.tsx - Șabloanele sunt ca aspecte, dar nu păstrează starea și sunt re-redate de fiecare dată când sunt folosite pentru a crea o pagină. Șabloanele sunt perfecte pentru situațiile în care aveți nevoie de un anumit cod pentru a rula de fiecare dată când componenta este montată, de exemplu, pentru a intra și a ieși din animații.
  • error.tsx - Acest fișier este utilizat pentru a gestiona erorile din aplicație. Acesta include o rută cu clasa de limită de eroare React, astfel încât, atunci când apare o eroare pe acea rută sau pe copiii săi, acesta încearcă să se recupereze de la ea redând o pagină de eroare ușor de utilizat.
  • loading.tsx - Interfața de utilizare de încărcare este încărcată instantaneu de pe server pe măsură ce interfața de utilizare a rutei se încarcă în fundal. Interfața de utilizare de încărcare poate fi un rotor sau un ecran schelet. Odată ce conținutul rutei se încarcă, acesta înlocuiește interfața de utilizare de încărcare.
  • negăsit.tsx - Fișierul negăsit este redat atunci când Next.js întâlnește un Eroare 404 pentru pagina respectivă. În Next.js 12, va trebui să creați și să configurați manual o pagină 404.
  • head.tsx - Acest fișier specifică eticheta head pentru segmentul de rută în care este definit.

Cum se creează o rută în Next.js 13

După cum s-a menționat anterior, rutele sunt create folosind foldere în aplicatie/ director. În interiorul acestui folder, trebuie să creați un fișier numit pagina.tsx care definește interfața de utilizare a acelei rute specifice.

De exemplu, pentru a crea un traseu cu calea /products, va trebui să creați un app/products/page.tsx fişier.

Pentru trasee imbricate ca /products/sale, imbrica foldere unul în celălalt astfel încât structura folderului să arate ca app/products/sale/page.tsx.

Pe lângă un nou mod de rutare, alte caracteristici interesante pe care directorul de aplicații le acceptă sunt componentele serverului și streamingul.

Utilizarea componentelor serverului în directorul de aplicații

Directorul aplicației folosește componente de server în mod implicit. Această abordare reduce cantitatea de JavaScript trimisă către browser pe măsură ce componenta este redată pe server. Acest lucru îmbunătățește performanța.

Vezi acest articol pe diferite metode de randare în Next.js pentru o explicație mai aprofundată.

O componentă de server înseamnă că puteți accesa în siguranță secretele mediului fără ca acestea să fie expuse partea clientului. De exemplu, puteți utiliza proces.env.

De asemenea, puteți interacționa direct cu backend-ul. Nu este nevoie de utilizare getServerSideProps sau getStaticProps deoarece puteți utiliza async/wait în componenta server pentru a prelua date.

Luați în considerare această funcție asincronă care preia date dintr-un API.

asincronfuncţieObțineți date() {
încerca{
const res = așteaptă aduce(' https://api.example.com/...');
întoarcere res.json();
 } captură(eroare) {
aruncanouEroare(„Nu s-au putut prelua datele”)
 }
}

Îl puteți apela direct pe o pagină după cum urmează:

exportMod implicitasincronfuncţiePagină() {
const date = așteaptă Obțineți date();
întoarcere<div>div>;
}

Componentele serverului sunt excelente pentru redarea conținutului non-interactiv. Dacă ai nevoie să utilizați cârlige React, ascultătorii de evenimente sau API-urile numai pentru browser, utilizează o componentă client adăugând directiva „utilizați client” în partea de sus a componentei înainte de orice import.

Componente de streaming incremental în Directorul de aplicații

Streamingul se referă la trimiterea progresivă a părților din interfața de utilizare către client până când toate componentele sunt redate. Acest lucru permite utilizatorului să vadă o parte din conținut în timp ce restul este redat. Pentru a oferi utilizatorilor o experiență mai bună, redați o componentă de încărcare ca un spinner până când serverul finalizează redarea conținutului. Faceți acest lucru folosind în două moduri:

  • Crearea unui încărcare.tsx fișier care va fi redat pentru întregul segment de rută. 
exportMod implicitfuncţieSe încarcă() {
întoarcere<p>Se încarcă...p>
}
  • Încheierea componentelor individuale cu limita React Suspense și specificarea unei interfețe de utilizare de rezervă. 
import { Suspans } din"reacţiona";
import { Produse } din"./Componente";
exportMod implicitfuncţieVânzare() {
întoarcere (
<secțiune>
Produse...
}>
<Produse />
Suspans>
secțiune>
 );
}

Înainte ca componenta Produse să fie redată, un utilizator va vedea „Produse…”. Acest lucru este mai bun decât un ecran gol în ceea ce privește experiența utilizatorului.

Trecerea la Next.js 13

Noul director de aplicații este cu siguranță o îmbunătățire față de directorul de pagini anterioare. Include fișiere speciale precum aspect, cap, șablon, eroare, negăsit și încărcare, care se ocupă de diferite stări atunci când redați o rută fără a fi nevoie de o configurare manuală.

În plus, directorul de aplicații acceptă, de asemenea, streaming și componente de server care conduc la o performanță îmbunătățită. Deși aceste funcții sunt excelente atât pentru utilizatori, cât și pentru dezvoltatori, majoritatea sunt în prezent în versiune beta.

Cu toate acestea, puteți face upgrade la Next.js 13, deoarece directorul paginii încă funcționează, apoi începeți să utilizați directorul aplicației în ritmul dvs.