Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Next.js 13 pristatė naują maršruto parinkimo sistemą naudojant programų katalogą. „Next.js 12“ jau suteikė paprastą būdą valdyti maršrutus naudojant failų pagrindu veikiančius maršrutus. Pridėjus komponentą į puslapių aplanką, jis automatiškai taptų maršrutu. Šioje naujoje versijoje failų sistema pagrįstas maršruto parinktuvas turi įmontuotą išdėstymo sąranką, šablonų įdėtą maršrutą, įkėlimo vartotojo sąsają, klaidų tvarkymą ir serverio komponentų bei srautinio perdavimo palaikymą.

Šiame straipsnyje paaiškinamos šios naujos funkcijos ir kodėl jos svarbios.

Darbo su Next.js pradžia 13

Sukurkite savo Next.js 13 projektą terminale paleisdami šią komandą.

npx sukurti-Kitas-app@latest next13 --eksperimentinė programa

Tai turėtų sukurti naują aplanką next13 su nauju programų katalogu.

Naujų programų katalogo supratimas

Next.js 12 naudojo puslapių maršruto parinkimo katalogą, tačiau jis pakeičiamas

instagram viewer
programa/ kataloge Next.js 13. The puslapiai/ katalogas vis dar veikia Next 13, kad būtų galima laipsniškai priimti. Jums tereikia užtikrinti, kad nekurtumėte failų dviejuose kataloguose tam pačiam maršrutui, nes gausite klaidą.

Štai dabartinė programų katalogo struktūra.

Programų kataloge maršrutams apibrėžti naudojate aplankus, o šiuose aplankuose esantys failai naudojami vartotojo sąsajai apibrėžti. Taip pat yra specialių failų, tokių kaip:

  • page.tsx – Failas, naudojamas kuriant konkretaus maršruto vartotojo sąsają.
  • išdėstymas.tsx - Jame yra maršruto išdėstymo apibrėžimas ir galima bendrinti keliuose puslapiuose. Jie puikiai tinka naršymo meniu ir šoninėms juostoms. Naršydami maketai išsaugo būseną ir nevaizduojami iš naujo. Tai reiškia, kad naršant tarp puslapių, kurie turi bendrą išdėstymą, būsena išlieka ta pati. Vienas dalykas, į kurį reikia atkreipti dėmesį, yra tai, kad turi būti aukščiausias išdėstymas (šakninis išdėstymas), kuriame yra visos HTML ir kūno žymos, bendrinamos visoje programoje.
  • šablonas.tsx – Šablonai yra tarsi maketai, tačiau jie neišsaugo būsenos ir pateikiami iš naujo kiekvieną kartą, kai naudojami kuriant puslapį. Šablonai puikiai tinka situacijoms, kai jums reikia tam tikro kodo, kad būtų paleistas kiekvieną kartą, kai sudedamas komponentas, pavyzdžiui, įvesti ir išeiti animacijos.
  • error.tsx – Šis failas naudojamas programos klaidoms tvarkyti. Jis apvynioja maršrutą su klaidos klaidos klase „React“ taip, kad, kai tame maršrute arba jo antrinėse dalyse įvyksta klaida, jis bando ją atkurti pateikdamas vartotojui patogų klaidos puslapį.
  • loading.tsx – Įkėlimo vartotojo sąsaja iš karto įkeliama iš serverio, kai maršruto vartotojo sąsaja įkeliama fone. Įkėlimo vartotojo sąsaja gali būti suktukas arba ekrano skeletas. Kai įkeliamas maršruto turinys, jis pakeičia įkėlimo vartotojo sąsają.
  • nerasta.tsx - Nerastas failas atvaizduojamas, kai Next.js susiduria su a 404 klaida šiame puslapyje. „Next.js 12“ turėsite rankiniu būdu sukurti ir nustatyti 404 puslapį.
  • head.tsx - Šis failas nurodo maršruto atkarpos, kurioje jis apibrėžtas, galvos žymą.

Kaip sukurti maršrutą Next.js 13

Kaip minėta anksčiau, maršrutai sukuriami naudojant aplankus programa/ katalogas. Šiame aplanke turite sukurti failą pavadinimu page.tsx kuri apibrėžia to konkretaus maršruto vartotojo sąsają.

Pavyzdžiui, sukurti maršrutą su keliu /products, turėsite sukurti app/products/page.tsx failą.

Įdėtiems maršrutams, pvz /products/sale, sudėti aplankus vienas kitam taip, kad atrodytų aplanko struktūra app/products/sale/page.tsx.

Be naujo būdo nukreipti kitas įdomias funkcijas, programų katalogas palaiko serverio komponentus ir srautinį perdavimą.

Serverio komponentų naudojimas programų kataloge

Programų kataloge pagal numatytuosius nustatymus naudojami serverio komponentai. Šis metodas sumažina į naršyklę siunčiamo JavaScript kiekį, kai komponentas pateikiamas serveryje. Tai pagerina našumą.

Žiūrėkite šį straipsnį skirtingi atvaizdavimo metodai Next.js Norėdami gauti išsamesnį paaiškinimą.

Serverio komponentas reiškia, kad galite saugiai pasiekti aplinkos paslaptis, neatskleidžiant jų kliento pusėje. Pavyzdžiui, galite naudoti procesas.aplink.

Taip pat galite tiesiogiai bendrauti su užpakaline programa. Naudoti nereikia getServerSideProps arba getStaticProps kaip galite naudoti async/await serverio komponente duomenims gauti.

Apsvarstykite šią asinchronizavimo funkciją, kuri gauna duomenis iš API.

asyncfunkcijagetData() {
bandyti{
konst res = laukti atnešti (' https://api.example.com/...');
grąžinti res.json();
 } sugauti(klaida) {
mestinaujasKlaida(„Nepavyko gauti duomenų“)
 }
}

Galite paskambinti tiesiai puslapyje taip:

eksportuotinumatytasasyncfunkcijaPuslapis() {
konst duomenys = laukti getData ();
grąžinti<div>div>;
}

Serverio komponentai puikiai tinka neinteraktyviam turiniui pateikti. Jei reikia naudokite React kabliukus, įvykių klausytojai arba tik naršyklei skirtos API, naudoja kliento komponentą pridėdami direktyvą „naudoti klientą“ komponento viršuje prieš bet kokį importavimą.

Laipsniškai perduodami komponentai programų kataloge

Srautas reiškia laipsnišką vartotojo sąsajos dalių siuntimą klientui, kol bus pateikti visi komponentai. Tai leidžia vartotojui peržiūrėti dalį turinio, o likusi dalis pateikiama. Norėdami suteikti vartotojams geresnę patirtį, pateikite įkėlimo komponentą, pvz., suktuką, kol serveris baigs pateikti turinį. Tai darote dviem būdais:

  • Kuriant a įkeliama.tsx failas, kuris bus pateiktas visam maršruto segmentui. 
eksportuotinumatytasfunkcijaĮkeliama() {
grąžinti<p>Įkeliama...p>
}
  • Atskirų komponentų apvyniojimas naudojant „React Suspense“ ribą ir atsarginės vartotojo sąsajos nurodymas. 
importuoti { Įtampa } iš"reaguoti";
importuoti { Produktai } iš"./Komponentai";
eksportuotinumatytasfunkcijaIšpardavimas() {
grąžinti (
<skyrius>
Produktai...
}>
<Produktai />
Įtampa>
skyrius>
 );
}

Prieš pateikiant produktų komponentą, vartotojas matys „Produktai…“. Tai geriau nei tuščias ekranas vartotojo patirties požiūriu.

Naujovinimas į Next.js 13

Naujasis programų katalogas tikrai yra patobulinimas, palyginti su ankstesnių puslapių katalogu. Tai apima specialius failus, pvz., išdėstymą, antraštę, šabloną, klaidą, nerasta ir įkėlimą, kurie apdoroja skirtingas būsenas, kai pateikiamas maršrutas, nereikalaujant rankinio nustatymo.

Be to, programų katalogas taip pat palaiko srautinį perdavimą ir serverio komponentus, kurie pagerina našumą. Nors šios funkcijos puikiai tinka ir vartotojams, ir kūrėjams, dauguma jų šiuo metu yra beta versijos.

Tačiau vis tiek galite naujovinti į Next.js 13, nes puslapio katalogas vis tiek veikia, tada pradėkite naudoti programų katalogą savo tempu.