Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A Next.js 13 új útválasztási rendszert vezetett be az alkalmazáskönyvtár használatával. A Next.js 12 már egyszerű módot adott az útvonalak fájlalapú útvonalakon keresztül történő kezelésére. Ha hozzáad egy komponenst az oldalak mappához, az automatikusan útvonal lesz. Ebben az új verzióban a fájlrendszer-alapú útválasztó beépített beállításokkal rendelkezik az elrendezésekhez, a sablonok beágyazott útválasztásához, a betöltési felhasználói felülethez, a hibakezeléshez, valamint a szerverösszetevők és a streaming támogatásához.

Ez a cikk elmagyarázza ezeket az új funkciókat és azt, hogy miért fontosak.

A Next.js használatának megkezdése 13

Hozzon létre saját Next.js 13 projektet a következő parancs futtatásával a terminálon.

npx teremt-következő-app@latest next13 --experimental-app

Ezzel létre kell hoznia egy next13 nevű új mappát az új alkalmazáskönyvtárral.

Az új alkalmazáskönyvtár megértése

A Next.js 12 a oldalakat könyvtárat az útválasztáshoz, de a helyére a app/ könyvtár a Next.js 13-ban. A oldal/ könyvtár továbbra is működik a Next 13-ban, hogy lehetővé tegye a fokozatos átvételt. Csak arról kell gondoskodnia, hogy ne hozzon létre fájlokat a két könyvtárban ugyanazon az útvonalon, mert hibaüzenetet kap.

Itt látható az alkalmazáskönyvtár jelenlegi szerkezete.

Az alkalmazáskönyvtárban mappákat használ az útvonalak meghatározásához, az ezekben a mappákban található fájlok pedig a felhasználói felület meghatározására szolgálnak. Vannak speciális fájlok is, mint például:

  • oldal.tsx - Egy adott útvonal felhasználói felületének létrehozásához használt fájl.
  • elrendezés.tsx - Tartalmazza az útvonal elrendezési meghatározását, és több oldalon is megosztható. Tökéletesek a navigációs menükhöz és az oldalsávokhoz. A navigáció során az elrendezések megőrzik állapotukat, és nem jelennek meg újra. Ez azt jelenti, hogy amikor az elrendezésen osztozó oldalak között navigál, az állapot változatlan marad. Egy dolog, amit meg kell jegyeznünk, hogy léteznie kell egy legfelső elrendezésnek (a gyökérelrendezésnek), amely tartalmazza az összes HTML- és body-címkét, amely a teljes alkalmazásban meg van osztva.
  • template.tsx - A sablonok olyanok, mint az elrendezések, de nem őrzik meg az állapotukat, és minden alkalommal újra megjelennek, amikor egy oldal létrehozására használják őket. A sablonok tökéletesek olyan helyzetekben, amikor szükség van bizonyos kód futtatására az összetevő minden egyes csatlakoztatásakor, például animációk be- és kilépése esetén.
  • error.tsx - Ez a fájl az alkalmazás hibáinak kezelésére szolgál. Az útvonalat a React hibahatárosztályba csomagolja úgy, hogy amikor hiba történik az útvonalon vagy annak alárendeltjeiben, egy felhasználóbarát hibaoldal megjelenítésével próbálja helyreállítani azt.
  • loading.tsx - A betöltő felhasználói felület azonnal betöltődik a szerverről, ahogy az útvonal felhasználói felület betöltődik a háttérben. A betöltő felhasználói felület lehet egy pörgető vagy egy vázas képernyő. Az útvonaltartalom betöltése után lecseréli a betöltő felhasználói felületet.
  • not-found.tsx - A nem található fájl akkor jelenik meg, amikor a Next.js találkozik a 404-es hiba az oldalon. A Next.js 12-ben manuálisan kell létrehoznia és beállítania egy 404-es oldalt.
  • head.tsx - Ez a fájl adja meg a head címkét a meghatározott útvonalszakaszhoz.

Útvonal létrehozása a Next.js-ben 13

Mint korábban említettük, az útvonalak a mappában található mappák használatával jönnek létre app/ Könyvtár. Ebben a mappában létre kell hoznia egy fájlt, melynek neve oldal.tsx amely meghatározza az adott útvonal felhasználói felületét.

Például útvonal létrehozásához az útvonallal /products, létre kell hoznia egy app/products/page.tsx fájlt.

Beágyazott útvonalakhoz, mint pl /products/sale, egymásba helyezi a mappákat úgy, hogy a mappaszerkezet úgy nézzen ki app/products/sale/page.tsx.

Az útválasztás új módján kívül egyéb érdekes funkciókat is támogat az alkalmazáskönyvtár a szerverkomponenseket és a streamelést.

Kiszolgálóösszetevők használata az App Directoryban

Az alkalmazáskönyvtár alapértelmezés szerint szerverösszetevőket használ. Ez a megközelítés csökkenti a böngészőnek küldött JavaScript mennyiségét, amikor az összetevő megjelenik a szerveren. Ez javítja a teljesítményt.

Lásd ezt a cikket különböző renderelési módszerek a Next.js-ben egy alaposabb magyarázatért.

A kiszolgáló összetevő azt jelenti, hogy biztonságosan hozzáférhet a környezet titkaihoz anélkül, hogy azok az ügyféloldalon megjelennének. Például használhatja folyamat.env.

A háttérrel közvetlenül is kapcsolatba léphet. Nincs szükség a használatára getServerSideProps vagy getStaticProps ahogy az async/await funkciót is használhatja a szerverkomponensben az adatok lekéréséhez.

Fontolja meg ezt az aszinkron funkciót, amely adatokat kér le egy API-ból.

asyncfunkciógetData() {
próbáld ki{
const res = várja fetch(' https://api.example.com/...');
Visszatérés res.json();
 } fogás(hiba) {
dobásújHiba("Nem sikerült lekérni az adatokat")
 }
}

Közvetlenül egy oldalon hívhatja a következőképpen:

exportalapértelmezettasyncfunkcióoldal() {
const adatok = várja getData();
Visszatérés<div>div>;
}

A szerverösszetevők kiválóan alkalmasak nem interaktív tartalom megjelenítésére. Ha kell használjon React horgokat, eseményfigyelők vagy csak böngésző API-k, kliens-összetevőt használnak úgy, hogy az importálás előtt hozzáadják a „use client” direktívát az összetevő tetejéhez.

Összetevők fokozatos streamelése az alkalmazáskönyvtárban

A streamelés a felhasználói felület egyes részeinek fokozatos elküldését jelenti az ügyfélnek, amíg az összes összetevő meg nem jelenik. Ez lehetővé teszi a felhasználó számára a tartalom egy részének megtekintését, miközben a többit rendereli. A jobb felhasználói élmény érdekében rendereljen be egy betöltési összetevőt, például egy pörgetőt, amíg a szerver be nem fejezi a tartalom megjelenítését. Ezt kétféleképpen teheti meg:

  • Létrehozása a loading.tsx fájl, amely a teljes útvonalszakaszra megjelenik. 
exportalapértelmezettfunkcióBetöltés() {
Visszatérés<p>Betöltés...p>
}
  • Az egyes összetevők becsomagolása React Suspense határvonallal és tartalék felhasználói felület megadása. 
import { Suspense } tól től"reagál";
import { Termékek } tól től"./Alkatrészek";
exportalapértelmezettfunkcióEladás() {
Visszatérés (
<szakasz>
Termékek...
}>
<Termékek />
Suspense>
szakasz>
 );
}

A Termékek komponens megjelenítése előtt a felhasználó a „Termékek…” feliratot fogja látni. Ez jobb, mint egy üres képernyő a felhasználói élmény szempontjából.

Frissítés Next.js 13-ra

Az új alkalmazáskönyvtár határozottan előrelépés az előző oldalak könyvtárához képest. Tartalmaz olyan speciális fájlokat, mint az elrendezés, a fej, a sablon, a hiba, a nem található és a betöltés, amelyek különböző állapotokat kezelnek az útvonal renderelésekor anélkül, hogy manuális beállításra lenne szükség.

Ezenkívül az alkalmazáskönyvtár támogatja a streamelést és a jobb teljesítményt eredményező szerverkomponenseket is. Bár ezek a funkciók nagyszerűek a felhasználók és a fejlesztők számára is, legtöbbjük jelenleg bétaverzióban van.

Azonban továbbra is frissíthet Next.js 13-ra, mivel az oldalkönyvtár továbbra is működik, majd kezdje el használni az alkalmazáskönyvtárat a saját tempójában.