Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Next.js 13 představil nový systém směrování pomocí adresáře aplikace. Next.js 12 již poskytoval snadný způsob zpracování tras prostřednictvím tras založených na souborech. Přidáním komponenty do složky stránek by se z ní automaticky stala trasa. V této nové verzi je směrovač založený na souborovém systému dodáván s vestavěným nastavením pro rozvržení, vnořené směrování šablon, uživatelské rozhraní načítání, zpracování chyb a podporu serverových komponent a streamování.

Tento článek vysvětluje tyto nové funkce a proč jsou důležité.

Začínáme s Next.js 13

Vytvořte si svůj vlastní projekt Next.js 13 spuštěním následujícího příkazu v terminálu.

npx vytvořit-další-app@latest next13 --experimentální-aplikace

To by mělo vytvořit novou složku s názvem next13 s novým adresářem aplikace.

Porozumění adresáři New App Directory

Next.js 12 použil stránky

instagram viewer
adresář pro směrování, ale je nahrazen adresářem aplikace/ adresář v Next.js 13. The stránky/ adresář stále funguje v Next 13, aby umožnil postupné přijetí. Musíte se pouze ujistit, že nevytváříte soubory ve dvou adresářích pro stejnou trasu, protože se zobrazí chyba.

Zde je aktuální struktura adresáře aplikace.

V adresáři aplikace používáte složky k definování tras a soubory uvnitř těchto složek se používají k definování uživatelského rozhraní. Existují také speciální soubory jako:

  • stránka.tsx - Soubor použitý k vytvoření uživatelského rozhraní pro konkrétní trasu.
  • rozložení.tsx - Obsahuje definici rozvržení trasy a lze ji sdílet na více stránkách. Jsou ideální pro navigační nabídky a postranní panely. Při navigaci rozvržení zachovávají stav a nerenderují se znovu. To znamená, že když přecházíte mezi stránkami, které sdílejí rozvržení, stav zůstane stejný. Jedna věc, kterou je třeba poznamenat, je, že musí existovat nejvyšší rozložení (kořenové rozložení) obsahující všechny značky HTML a body sdílené v celé aplikaci.
  • šablona.tsx - Šablony jsou jako rozvržení, ale nezachovávají stav a jsou znovu vykresleny pokaždé, když jsou použity k vytvoření stránky. Šablony jsou ideální pro situace, kdy potřebujete, aby se při každém připojení komponenty spustil určitý kód, například při vstupu a výstupu animací.
  • error.tsx - Tento soubor se používá ke zpracování chyb v aplikaci. Zabalí cestu třídou React error boundary tak, že když dojde k chybě v této trase nebo jejích potomcích, pokusí se z ní obnovit vykreslením uživatelsky přívětivé chybové stránky.
  • loading.tsx - Uživatelské rozhraní pro načítání je okamžitě načteno ze serveru, když se uživatelské rozhraní trasy načítá na pozadí. Uživatelským rozhraním načítání může být spinner nebo skeleton screen. Jakmile se obsah trasy načte, nahradí uživatelské rozhraní pro načítání.
  • nenalezeno.tsx - Nenalezený soubor se vykreslí, když Next.js narazí na a Chyba 404 pro tuto stránku. V Next.js 12 byste museli ručně vytvořit a nastavit stránku 404.
  • head.tsx - Tento soubor určuje značku head pro segment trasy, ve kterém je definován.

Jak vytvořit trasu v Next.js 13

Jak již bylo zmíněno dříve, trasy se vytvářejí pomocí složek v aplikace/ adresář. Uvnitř této složky musíte vytvořit soubor s názvem stránka.tsx který definuje uživatelské rozhraní této konkrétní trasy.

Například pro vytvoření trasy s cestou /products, budete muset vytvořit app/products/page.tsx soubor.

Pro vnořené trasy jako /products/sale, vnořte složky do sebe tak, aby struktura složek vypadala app/products/sale/page.tsx.

Kromě nového způsobu směrování dalších zajímavých funkcí, které adresář aplikace podporuje, jsou serverové komponenty a streamování.

Použití serverových komponent v adresáři aplikace

Adresář aplikace standardně používá komponenty serveru. Tento přístup snižuje množství JavaScriptu odeslaného do prohlížeče při vykreslování komponenty na serveru. To zlepšuje výkon.

Viz tento článek na různé metody vykreslování v Next.js pro podrobnější vysvětlení.

Serverová komponenta znamená, že můžete bezpečně přistupovat k tajemstvím prostředí, aniž by byly vystaveny na straně klienta. Můžete například použít proces.env.

Můžete také přímo komunikovat s backendem. Není potřeba používat getServerSideProps nebo getStaticProps jako můžete použít async/await v komponentě serveru k načtení dat.

Zvažte tuto asynchronní funkci, která načítá data z API.

asynchronnífunkcegetData() {
Snaž se{
konst res = čekat vynést(' https://api.example.com/...');
vrátit se res.json();
 } chytit(chyba) {
házetNovýChyba('Nelze načíst data')
 }
}

Můžete to zavolat přímo na stránce takto:

vývoznívýchozíasynchronnífunkceStrana() {
konst údaje = čekat getData();
vrátit se<div>div>;
}

Komponenty serveru jsou skvělé pro vykreslování neinteraktivního obsahu. Pokud potřebuješ použijte háky React, posluchači událostí nebo rozhraní API pouze pro prohlížeč používají klientskou komponentu přidáním direktivy „use client“ do horní části komponenty před jakýmkoli importem.

Přírůstkové streamování komponent v adresáři aplikace

Streamování znamená postupné odesílání částí uživatelského rozhraní klientovi, dokud nejsou vykresleny všechny komponenty. To umožňuje uživateli zobrazit část obsahu, zatímco zbytek se vykresluje. Chcete-li uživatelům poskytnout lepší zkušenost, vykreslujte načítací komponentu jako spinner, dokud server nedokončí vykreslování obsahu. To provedete dvěma způsoby:

  • Vytvoření a načítání.tsx soubor, který bude vykreslen pro celý segment trasy. 
vývoznívýchozífunkcenačítání() {
vrátit se<p>Načítání...p>
}
  • Obtékání jednotlivých komponent hranicí React Suspense a určení záložního uživatelského rozhraní. 
import { Napětí } z"reagovat";
import { Produkty } z"./Components";
vývoznívýchozífunkceProdej() {
vrátit se (
<sekce>
Produkty...
}>
<produkty />
Napětí>
sekce>
 );
}

Před vykreslením komponenty Produkty se uživateli zobrazí „Produkty…“. To je z hlediska uživatelského zážitku lepší než prázdná obrazovka.

Upgrade na Next.js 13

Nový adresář aplikací je rozhodně vylepšením předchozího adresáře stránek. Zahrnuje speciální soubory jako layout, head, template, error, not-found a loading, které zvládají různé stavy při vykreslování trasy bez nutnosti ručního nastavení.

Adresář aplikací navíc podporuje také streamování a serverové komponenty vedoucí ke zlepšení výkonu. I když jsou tyto funkce skvělé pro uživatele i vývojáře, většina z nich je aktuálně ve verzi beta.

Stále však můžete upgradovat na Next.js 13, protože adresář stránek stále funguje, a poté začněte používat adresář aplikace svým vlastním tempem.