Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Next.js 13 predstavil nový smerovací systém pomocou adresára app. Next.js 12 už poskytuje jednoduchý spôsob manipulácie s cestami cez cesty založené na súboroch. Pridaním komponentu do priečinka stránok by sa z neho automaticky stala trasa. V tejto novej verzii prichádza smerovač založený na súborovom systéme so vstavaným nastavením pre rozloženia, vnorené smerovanie šablón, používateľské rozhranie načítania, spracovanie chýb a podporu serverových komponentov a streamovania.

Tento článok vysvetľuje tieto nové funkcie a prečo sú dôležité.

Začíname s Next.js 13

Vytvorte si vlastný projekt Next.js 13 spustením nasledujúceho príkazu v termináli.

npx vytvoriť-Ďalšie-app@posledná ďalšia13 --experimentálna-aplikácia

Tým by sa mal vytvoriť nový priečinok s názvom next13 s novým adresárom aplikácie.

Pochopenie nového adresára aplikácií

Next.js 12 použil stránky

instagram viewer
adresár pre smerovanie, ale je nahradený adresárom aplikácia/ adresár v Next.js 13. The strany/ adresár stále funguje v Next 13, aby umožnil postupné prijatie. Musíte sa len uistiť, že nevytvárate súbory v dvoch adresároch pre rovnakú trasu, pretože sa zobrazí chyba.

Tu je aktuálna štruktúra adresára aplikácie.

V adresári aplikácie používate priečinky na definovanie trás a súbory v týchto priečinkoch sa používajú na definovanie používateľského rozhrania. Existujú aj špeciálne súbory ako:

  • page.tsx - Súbor použitý na vytvorenie používateľského rozhrania pre konkrétnu trasu.
  • rozloženie.tsx - Obsahuje definíciu rozloženia trasy a je možné ju zdieľať na viacerých stránkach. Sú ideálne pre navigačné ponuky a bočné panely. Pri navigácii si rozloženia zachovávajú stav a nevykresľujú sa znova. To znamená, že keď prechádzate medzi stránkami, ktoré zdieľajú rozloženie, stav zostane rovnaký. Jedna vec, ktorú treba poznamenať, je, že musí existovať najvyššie rozloženie (koreňové rozloženie) obsahujúce všetky značky HTML a body zdieľané v celej aplikácii.
  • template.tsx - Šablóny sú ako rozloženia, avšak nezachovávajú stav a pri každom použití na vytvorenie stránky sa znova vykreslia. Šablóny sú ideálne pre situácie, keď potrebujete na spustenie určitého kódu pri každom pripojení komponentu, napríklad pri vstupe a výstupe animácií.
  • error.tsx - Tento súbor sa používa na spracovanie chýb v aplikácii. Zabalí cestu triedou hraníc chýb React tak, že keď sa vyskytne chyba v tejto ceste alebo jej potomkoch, pokúsi sa z nej obnoviť vykreslením užívateľsky príjemnej chybovej stránky.
  • loading.tsx - Používateľské rozhranie načítania sa okamžite načíta zo servera, keď sa používateľské rozhranie trasy načíta na pozadí. Používateľské rozhranie načítania môže byť spinner alebo skeleton screen. Po načítaní obsahu trasy nahradí používateľské rozhranie načítania.
  • not-found.tsx - Nenájdený súbor sa vykreslí, keď Next.js narazí na a Chyba 404 pre túto stránku. V Next.js 12 by ste museli manuálne vytvoriť a nastaviť stránku 404.
  • head.tsx - Tento súbor určuje značku hlavy pre segment trasy, v ktorom je definovaný.

Ako vytvoriť trasu v Next.js 13

Ako už bolo spomenuté vyššie, trasy sa vytvárajú pomocou priečinkov v aplikácia/ adresár. V tomto priečinku musíte vytvoriť súbor s názvom page.tsx ktorý definuje používateľské rozhranie tejto konkrétnej trasy.

Napríklad na vytvorenie trasy s cestou /products, budete musieť vytvoriť app/products/page.tsx súbor.

Pre vnorené trasy ako napr /products/sale, vnorte priečinky do seba tak, aby štruktúra priečinkov vyzerala app/products/sale/page.tsx.

Okrem nového spôsobu smerovania ďalšími zaujímavými funkciami, ktoré adresár aplikácie podporuje, sú serverové komponenty a streamovanie.

Používanie serverových komponentov v adresári aplikácií

Adresár aplikácie štandardne používa serverové komponenty. Tento prístup znižuje množstvo JavaScriptu odosielaného do prehliadača, keď sa komponent vykresľuje na serveri. To zlepšuje výkon.

Pozrite si tento článok na rôzne metódy vykresľovania v Next.js pre hlbšie vysvetlenie.

Serverový komponent znamená, že môžete bezpečne pristupovať k tajomstvám prostredia bez toho, aby boli odhalené na strane klienta. Môžete napríklad použiť process.env.

S backendom môžete interagovať aj priamo. Nie je potrebné používať getServerSideProps alebo getStaticProps ako môžete použiť async/wait v komponente servera na načítanie údajov.

Zvážte túto asynchronnú funkciu, ktorá načítava údaje z API.

asyncfunkciugetData() {
skúste{
konšt res = čakať priniesť (' https://api.example.com/...');
vrátiť res.json();
 } chytiť(chyba) {
hodiťNovýChyba(„Nepodarilo sa načítať údaje“)
 }
}

Môžete to zavolať priamo na stránke takto:

exportpredvolenáasyncfunkciuStránka() {
konšt údaje = čakať getData();
vrátiť<div>div>;
}

Komponenty servera sú skvelé na vykresľovanie neinteraktívneho obsahu. Ak potrebujete použite háky React, poslucháči udalostí alebo rozhrania API iba v prehliadači používajú klientsky komponent pridaním príkazu „use client“ do hornej časti komponentu pred akýmkoľvek importom.

Prírastkové streamovanie komponentov v adresári aplikácie

Streamovanie sa týka postupného odosielania častí používateľského rozhrania klientovi, kým sa nevykreslia všetky komponenty. To umožňuje používateľovi zobraziť časť obsahu, zatiaľ čo zvyšok sa vykresľuje. Ak chcete používateľom poskytnúť lepší zážitok, vykresľujte komponent načítania ako spinner, kým server nedokončí vykresľovanie obsahu. Môžete to urobiť dvoma spôsobmi:

  • Vytvorenie a loading.tsx súbor, ktorý sa vykreslí pre celý segment trasy. 
exportpredvolenáfunkciuNačítava() {
vrátiť<p>Načítava...p>
}
  • Obalenie jednotlivých komponentov hranicou React Suspense a špecifikovanie záložného používateľského rozhrania. 
importovať { Napätie } od"reagovať";
importovať { Produkty } od"./Components";
exportpredvolenáfunkciuzľava() {
vrátiť (
<oddiele>
Produkty...
}>
<Produkty />
Napätie>
oddiele>
 );
}

Pred vykreslením komponentu Produkty sa používateľovi zobrazí „Produkty…“. Z hľadiska používateľského zážitku je to lepšie ako prázdna obrazovka.

Inovácia na Next.js 13

Nový adresár aplikácií je určite vylepšením predchádzajúceho adresára stránok. Zahŕňa špeciálne súbory ako rozloženie, hlavička, šablóna, chyba, nenájdené a načítanie, ktoré spracovávajú rôzne stavy pri vykresľovaní trasy bez potreby manuálneho nastavenia.

Adresár aplikácií navyše podporuje aj streamovanie a serverové komponenty, čo vedie k zlepšeniu výkonu. Aj keď sú tieto funkcie skvelé pre používateľov aj vývojárov, väčšina z nich je momentálne vo verzii beta.

Stále však môžete inovovať na Next.js 13, pretože adresár stránok stále funguje, a potom začnite používať adresár aplikácie vlastným tempom.