Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Next.js 13 tutvustas rakenduste kataloogi kasutades uut marsruutimissüsteemi. Next.js 12 pakkus juba lihtsat viisi marsruutide haldamiseks failipõhiste marsruutide kaudu. Komponendi lisamine lehtede kausta muudaks selle automaatselt marsruudiks. Selles uues versioonis on failisüsteemipõhisel ruuteril sisseehitatud paigutus paigutuste, mallide pesastatud marsruutimise, laadimisliidese, veakäsitluse ning serverikomponentide ja voogesituse tugi.

Selles artiklis selgitatakse neid uusi funktsioone ja nende tähtsust.

Rakenduse Next.js alustamine 13

Looge oma Next.js 13 projekt, käivitades terminalis järgmise käsu.

npx luua-järgmiseks-app@latest next13 --eksperimentaalne rakendus

See peaks looma uue rakenduste kataloogiga uue kausta nimega next13.

Uue rakenduste kataloogi mõistmine

Next.js 12 kasutas lehekülgi kataloogi marsruutimiseks, kuid see asendatakse kataloogiga

instagram viewer
rakendus/ kataloogis Next.js 13. The lehekülge/ kataloog töötab endiselt rakenduses Next 13, et võimaldada järkjärgulist kasutuselevõttu. Peate ainult tagama, et te ei loo faile kahes kataloogis sama marsruudi jaoks, kuna kuvatakse tõrketeade.

Siin on rakenduste kataloogi praegune struktuur.

Rakenduste kataloogis kasutate marsruutide määratlemiseks kaustu ja nendes kaustades olevaid faile kasutatakse kasutajaliidese määratlemiseks. Samuti on olemas spetsiaalsed failid, näiteks:

  • page.tsx - Fail, mida kasutatakse konkreetse marsruudi kasutajaliidese loomiseks.
  • layout.tsx - See sisaldab marsruudi paigutuse määratlust ja seda saab jagada mitmel lehel. Need sobivad suurepäraselt navigeerimismenüüde ja külgribade jaoks. Navigeerimisel säilitavad paigutused oleku ja neid ei renderdata uuesti. See tähendab, et kui navigeerite küljendust jagavate lehtede vahel, jääb olek samaks. Üks asi, mida tuleb tähele panna, on see, et peab olema kõige ülemine paigutus (juurpaigutus), mis sisaldab kõiki kogu rakenduses jagatud HTML-i ja kehamärgendeid.
  • template.tsx – Mallid on nagu küljendused, kuid nad ei säilita olekut ja renderdatakse uuesti iga kord, kui neid lehe loomiseks kasutatakse. Mallid sobivad suurepäraselt olukordadeks, kus iga kord, kui komponent on ühendatud, on vaja teatud koodi käitada, näiteks animatsioonide sisestamiseks ja väljumiseks.
  • error.tsx – Seda faili kasutatakse rakenduse vigade käsitlemiseks. See mähib marsruudi React errori piiriklassiga nii, et kui sellel marsruudil või selle alarühmadel ilmneb viga, proovib see sellest taastuda, renderdades kasutajasõbraliku vealehe.
  • loading.tsx – Laadimisliides laaditakse kohe serverist, kui marsruudi kasutajaliides laaditakse taustal. Laadimisliides võib olla kas vurr või luukere. Kui marsruudi sisu laaditakse, asendab see laadimisliidese.
  • not-found.tsx - Fail, mida ei leitud, renderdatakse, kui Next.js kohtab a Selle lehe viga 404. Teenuses Next.js 12 peate käsitsi looma ja seadistama 404 lehe.
  • head.tsx - See fail määrab selle marsruudilõigu peasildi, milles see on määratletud.

Kuidas luua marsruuti rakenduses Next.js 13

Nagu eelnevalt mainitud, luuakse marsruudid kaustade abil rakendus/ kataloog. Selle kausta sees peate looma faili nimega page.tsx mis määrab selle konkreetse marsruudi kasutajaliidese.

Näiteks marsruudi loomiseks koos teega /products, peate looma app/products/page.tsx faili.

Pesastatud marsruutidele nagu /products/salepesastavad kaustad üksteise sisse nii, et kausta struktuur näeks välja selline app/products/sale/page.tsx.

Lisaks uuele marsruutimisviisile, toetab rakenduste kataloog ka serverikomponente ja voogesitust.

Serverikomponentide kasutamine rakenduste kataloogis

Rakenduse kataloog kasutab vaikimisi serverikomponente. See lähenemine vähendab brauserisse saadetava JavaScripti hulka, kui komponenti serveris renderdatakse. See parandab jõudlust.

Vaadake seda artiklit erinevad renderdusmeetodid rakenduses Next.js põhjalikuma selgituse saamiseks.

Serverikomponent tähendab, et pääsete keskkonnasaladustele turvaliselt juurde, ilma et need kliendi poolel paljastataks. Näiteks võite kasutada protsess.env.

Saate ka otse taustaprogrammiga suhelda. Pole vaja kasutada getServerSideProps või getStaticProps nagu saate andmete toomiseks kasutada serverikomponendis async/await.

Mõelge sellele asünkroonimisfunktsioonile, mis hangib andmeid API-st.

asünkrfunktsioonigetData() {
proovi{
konst res = ootama tõmba(' https://api.example.com/...');
tagasi res.json();
 } püüda(viga) {
viskamauusViga("Andmeid ei saanud tuua")
 }
}

Saate sellele otse lehel helistada järgmiselt:

eksportidavaikimisiasünkrfunktsiooniLehekülg() {
konst andmed = ootama getData();
tagasi<div>div>;
}

Serverikomponendid sobivad suurepäraselt mitteinteraktiivse sisu renderdamiseks. Kui teil on vaja kasutage Reacti konkse, sündmustekuulajad või ainult brauseri jaoks mõeldud API-d, kasutavad kliendikomponenti, lisades enne importimist komponendi ülaossa käsu „kasuta klienti”.

Komponentide järkjärguline voogesitamine rakenduste kataloogis

Voogesitus tähendab kasutajaliidese osade järkjärgulist saatmist kliendile, kuni kõik komponendid on renderdatud. See võimaldab kasutajal osa sisust vaadata, kui ülejäänud osa renderdatakse. Kasutajatele parema kasutuskogemuse pakkumiseks renderdage laadimiskomponent, nagu spinner, kuni server on sisu renderdamise lõpetanud. Saate seda teha kahel viisil:

  • Loomine a laadimine.tsx fail, mis renderdatakse kogu marsruudilõigu jaoks. 
eksportidavaikimisifunktsiooniLaadimine() {
tagasi<lk>Laadimine...lk>
}
  • Üksikute komponentide mähkimine React Suspense'i piiriga ja varu kasutajaliidese määramine. 
importida { Põnevus } alates"reageerida";
importida { Tooted } alates"./Komponendid";
eksportidavaikimisifunktsiooniSoodustus() {
tagasi (
<osa>
Tooted...
}>
<Tooted />
Põnevus>
osa>
 );
}

Enne komponendi Tooted renderdamist näeb kasutaja „Tooted…”. See on kasutajakogemuse mõttes parem kui tühi ekraan.

Üleminek versioonile Next.js 13

Uus rakenduste kataloog on kindlasti eelmiste lehtede kataloogi edasiminek. See sisaldab spetsiaalseid faile, nagu paigutus, päis, mall, viga, ei leitud ja laadimine, mis käsitlevad erinevaid olekuid marsruudi renderdamisel ilma käsitsi seadistamist vajamata.

Lisaks toetab rakenduste kataloog ka voogesitust ja serverikomponente, mis parandavad jõudlust. Kuigi need funktsioonid on suurepärased nii kasutajatele kui ka arendajatele, on enamik neist praegu beetaversioonis.

Siiski saate siiski minna üle versioonile Next.js 13, kuna lehekataloog ikka töötab, seejärel hakake rakenduste kataloogi kasutama omas tempos.