Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Next.js 13 ieviesa jaunu maršrutēšanas sistēmu, izmantojot lietotņu direktoriju. Next.js 12 jau nodrošināja vienkāršu veidu, kā apstrādāt maršrutus, izmantojot uz failiem balstītus maršrutus. Komponenta pievienošana lapu mapei automātiski padarītu to par maršrutu. Šajā jaunajā versijā uz failu sistēmu balstīts maršrutētājs ir aprīkots ar iebūvētu iestatījumu izkārtojumiem, veidņu ligzdotu maršrutēšanu, ielādes lietotāja interfeisu, kļūdu apstrādi un servera komponentu un straumēšanas atbalstu.

Šajā rakstā ir izskaidrotas šīs jaunās funkcijas un to nozīme.

Darba sākšana ar Next.js 13

Izveidojiet savu Next.js 13 projektu, terminālī izpildot šādu komandu.

npx izveidot-Nākamais-app@latest next13 --eksperimentāla lietotne

Tam vajadzētu izveidot jaunu mapi next13 ar jauno lietotņu direktoriju.

Izpratne par jauno lietotņu direktoriju

Next.js 12 izmantoja lapas

instagram viewer
maršrutēšanas direktorijā, bet tas tiek aizstāts ar lietotne/ direktorijā Next.js 13. The lapas/ direktorijs joprojām darbojas programmā Next 13, lai nodrošinātu pakāpenisku pārņemšanu. Jums tikai jāpārliecinās, ka neveidojat failus abos direktorijos vienam un tam pašam maršrutam, jo ​​tiks parādīts kļūdas ziņojums.

Šeit ir redzama lietotņu direktorija pašreizējā struktūra.

Programmu direktorijā jūs izmantojat mapes, lai definētu maršrutus, un šajās mapēs esošie faili tiek izmantoti lietotāja interfeisa definēšanai. Ir arī īpaši faili, piemēram:

  • page.tsx - Fails, ko izmanto, lai izveidotu lietotāja saskarni konkrētam maršrutam.
  • izkārtojums.tsx - Tā satur maršruta izkārtojuma definīciju un ir koplietojama vairākās lapās. Tie ir lieliski piemēroti navigācijas izvēlnēm un sānjoslām. Navigācijā izkārtojumi saglabā stāvokli un netiek atkārtoti renderēti. Tas nozīmē, ka, pārvietojoties starp lapām, kurām ir kopīgs izkārtojums, stāvoklis paliek nemainīgs. Viena lieta, kas jāņem vērā, ir tāda, ka ir jābūt augšējam izkārtojumam (saknes izkārtojumam), kas satur visus HTML un pamatteksta tagus, kas tiek koplietoti visā lietojumprogrammā.
  • template.tsx — Veidnes ir kā izkārtojumi, taču tās nesaglabā stāvokli un tiek atveidotas katru reizi, kad tās tiek izmantotas lapas izveidei. Veidnes ir lieliski piemērotas situācijām, kad ir nepieciešams noteikts kods, kas jāpalaiž katru reizi, kad komponents ir uzstādīts, piemēram, ievadiet un izejiet no animācijām.
  • error.tsx — Šis fails tiek izmantots, lai apstrādātu kļūdas lietojumprogrammā. Tas aptver maršrutu ar React kļūdas robežklasi tā, ka, ja šajā maršrutā vai tā atvasēs rodas kļūda, tas mēģina no tā atgūties, renderējot lietotājam draudzīgu kļūdu lapu.
  • loading.tsx — Ielādes lietotāja saskarne tiek uzreiz ielādēta no servera, jo maršruta lietotāja saskarne tiek ielādēta fonā. Ielādes lietotāja saskarne var būt vērpējs vai skeleta ekrāns. Kad maršruta saturs tiek ielādēts, tas aizstāj ielādes lietotāja interfeisu.
  • not-found.tsx — Neatrasts fails tiek renderēts, kad Next.js saskaras ar a 404 kļūda šai lapai. Programmā Next.js 12 jums ir manuāli jāizveido un jāiestata 404. lapa.
  • head.tsx — Šis fails norāda maršruta segmenta head tagu, kurā tas ir definēts.

Kā izveidot maršrutu vietnē Next.js 13

Kā minēts iepriekš, maršruti tiek izveidoti, izmantojot mapes lietotne/ direktoriju. Šajā mapē ir jāizveido fails ar nosaukumu page.tsx kas nosaka konkrētā maršruta lietotāja interfeisu.

Piemēram, lai izveidotu maršrutu ar ceļu /products, jums būs jāizveido app/products/page.tsx failu.

Ligzdotiem maršrutiem, piemēram /products/sale, ievietojiet mapes vienu otrā tā, lai izskatās mapju struktūra app/products/sale/page.tsx.

Papildus jaunam maršrutēšanas veidam, citas interesantas funkcijas, lietojumprogrammu direktorijs atbalsta servera komponentus un straumēšanu.

Servera komponentu izmantošana lietotņu direktorijā

Lietojumprogrammu direktorijā pēc noklusējuma tiek izmantoti servera komponenti. Šī pieeja samazina JavaScript daudzumu, kas tiek nosūtīts uz pārlūkprogrammu, kad komponents tiek renderēts serverī. Tas uzlabo veiktspēju.

Skatiet šo rakstu par dažādas renderēšanas metodes vietnē Next.js lai iegūtu padziļinātu skaidrojumu.

Servera komponents nozīmē, ka varat droši piekļūt vides noslēpumiem, neatklājot tos klienta pusē. Piemēram, jūs varat izmantot process.env.

Varat arī tieši mijiedarboties ar aizmugursistēmu. Nav nepieciešamības lietot getServerSideProps vai getStaticProps kā jūs varat izmantot async/await servera komponentā, lai iegūtu datus.

Apsveriet šo asinhrono funkciju, kas iegūst datus no API.

asinhronāfunkcijugetData() {
mēģināt{
konst res = gaidīt atnest(' https://api.example.com/...');
atgriezties res.json();
} noķert(kļūda) {
mestjaunsKļūda("Nevarēja izgūt datus")
}
}

Varat to izsaukt tieši lapā šādi:

eksportētnoklusējumaasinhronāfunkcijuLappuse() {
konst dati = gaidīt getData ();
atgriezties<div>div>;
}

Servera komponenti ir lieliski piemēroti neinteraktīva satura renderēšanai. Ja vajag izmantojiet React āķus, notikumu uztvērēji vai tikai pārlūkprogrammas API, izmantojiet klienta komponentu, pievienojot komponenta augšpusē direktīvu “izmantot klientu” pirms importēšanas.

Pakāpeniski straumējiet komponentus lietotņu direktorijā

Straumēšana attiecas uz lietotāja saskarnes daļu pakāpenisku nosūtīšanu klientam, līdz tiek renderēti visi komponenti. Tas ļauj lietotājam skatīt daļu satura, kamēr pārējais tiek renderēts. Lai lietotājiem sniegtu labāku pieredzi, renderējiet ielādes komponentu, piemēram, vērptuvi, līdz serveris pabeidz satura renderēšanu. Jūs to darāt, izmantojot divus veidus:

  • Izveidojot a ielādēšana.tsx failu, kas tiks renderēts visam maršruta segmentam.
eksportētnoklusējumafunkcijuNotiek ielāde() {
atgriezties<lpp>Notiek ielāde...lpp>
}
  • Atsevišķu komponentu ietīšana ar React Suspense robežu un rezerves lietotāja interfeisa norādīšana.
imports { Neziņa } no"reaģēt";
imports { Produkti } no"./Components";

eksportētnoklusējumafunkcijuIzpārdošana() {
atgriezties (
<sadaļā>
Produkti...

}>
<Produkti />
Neziņa>
sadaļā>
);
}

Pirms produktu komponenta renderēšanas lietotājs redzēs “Produkti…”. Lietotāja pieredzes ziņā tas ir labāk nekā tukšs ekrāns.

Jaunināšana uz Next.js 13

Jaunais lietotņu direktorijs noteikti ir uzlabojums salīdzinājumā ar iepriekšējo lapu direktoriju. Tajā ir iekļauti īpaši faili, piemēram, izkārtojums, galviņa, veidne, kļūda, nav atrasts un ielāde, kas apstrādā dažādus stāvokļus, renderējot maršrutu bez manuālas iestatīšanas.

Turklāt lietotņu direktorijs atbalsta arī straumēšanu un servera komponentus, kas uzlabo veiktspēju. Lai gan šīs funkcijas ir lieliskas gan lietotājiem, gan izstrādātājiem, lielākā daļa no tām pašlaik ir beta versijā.

Tomēr joprojām varat jaunināt uz Next.js 13, jo lapas direktorijs joprojām darbojas, un pēc tam sāciet lietot lietotņu direktoriju savā tempā.