Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Next.js 13 esitteli uuden reititysjärjestelmän sovellushakemiston avulla. Next.js 12 tarjosi jo helpon tavan käsitellä reittejä tiedostopohjaisten reittien kautta. Komponentin lisääminen sivut-kansioon tekisi siitä automaattisesti reitin. Tässä uudessa versiossa tiedostojärjestelmäpohjaisessa reitittimessä on sisäänrakennettu asetukset asetteluille, mallien sisäkkäisreititys, latauskäyttöliittymä, virheiden käsittely sekä tuki palvelinkomponenteille ja suoratoistolle.

Tässä artikkelissa selitetään nämä uudet ominaisuudet ja miksi ne ovat tärkeitä.

Next.js: n käytön aloittaminen 13

Luo oma Next.js 13 -projektisi suorittamalla seuraava komento päätteessä.

npx luoda-Seuraava-app@latest next13 --kokeellinen-sovellus

Tämän pitäisi luoda uusi kansio nimeltä next13 uudella sovellushakemistolla.

Uuden sovellushakemiston ymmärtäminen

Next.js 12 käytti sivuja

instagram viewer
reitityshakemisto, mutta se korvataan hakemistolla sovellus/ hakemistossa Next.js 13. The sivut/ hakemisto toimii edelleen Next 13:ssa mahdollistaakseen asteittaisen käyttöönoton. Sinun tarvitsee vain varmistaa, että et luo tiedostoja kahteen hakemistoon samaa reittiä varten, koska saat virheilmoituksen.

Tässä on sovellushakemiston nykyinen rakenne.

Sovellushakemistossa voit määrittää reitit kansioiden avulla, ja näiden kansioiden sisällä olevia tiedostoja käytetään käyttöliittymän määrittämiseen. On myös erikoistiedostoja, kuten:

  • page.tsx - Tietyn reitin käyttöliittymän luomiseen käytetty tiedosto.
  • layout.tsx - Se sisältää reitin asettelun ja on jaettavissa useille sivuille. Ne sopivat täydellisesti navigointivalikoihin ja sivupalkkeihin. Navigoinnin aikana asettelut säilyttävät tilan eivätkä hahmonnu uudelleen. Tämä tarkoittaa, että kun navigoit sivujen välillä, joilla on yhteinen asettelu, tila pysyy samana. Yksi huomioitava asia on, että on oltava ylin asettelu (juuriasettelu), joka sisältää kaikki HTML- ja body-tunnisteet, jotka on jaettu koko sovellukselle.
  • template.tsx - Mallit ovat kuin asetteluja, mutta ne eivät säilytä tilaa ja ne hahmonnetaan uudelleen aina, kun niitä käytetään sivun luomiseen. Mallit sopivat täydellisesti tilanteisiin, joissa tarvitset tietyn koodin käytettäväksi joka kerta, kun komponentti asennetaan, esimerkiksi syötä- ja poistumisanimaatiot.
  • error.tsx - Tätä tiedostoa käytetään käsittelemään sovelluksen virheitä. Se kääri reitin React-virherajaluokkaan siten, että kun kyseisellä reitillä tai sen lapsilla tapahtuu virhe, se yrittää toipua siitä luomalla käyttäjäystävällisen virhesivun.
  • loading.tsx - Latauskäyttöliittymä latautuu välittömästi palvelimelta, kun reitin käyttöliittymä latautuu taustalla. Latauskäyttöliittymä voi olla kehruu tai luurankonäyttö. Kun reitin sisältö latautuu, se korvaa latauskäyttöliittymän.
  • not-found.tsx - Tiedostoa ei löydy, kun Next.js kohtaa a 404 virhe tälle sivulle. Next.js 12:ssa sinun on luotava ja määritettävä 404-sivu manuaalisesti.
  • head.tsx - Tämä tiedosto määrittää head-tunnisteen sille reittisegmentille, jossa se on määritetty.

Reitin luominen Next.js: ssä 13

Kuten aiemmin mainittiin, reitit luodaan kansioissa sovellus/ hakemistosta. Tämän kansion sisällä sinun on luotava tiedosto nimeltä page.tsx joka määrittää kyseisen reitin käyttöliittymän.

Esimerkiksi luodaksesi reitin polun kanssa /products, sinun on luotava app/products/page.tsx tiedosto.

Sisäkkäisille reiteille, kuten /products/sale, sijoittavat kansiot toistensa sisään siten, että kansiorakenne näyttää app/products/sale/page.tsx.

Uuden reititystavan lisäksi muita mielenkiintoisia ominaisuuksia sovellushakemisto tukee palvelinkomponentteja ja suoratoistoa.

Palvelinkomponenttien käyttäminen sovellushakemistossa

Sovellushakemisto käyttää oletusarvoisesti palvelinkomponentteja. Tämä lähestymistapa vähentää selaimeen lähetettävän JavaScriptin määrää, kun komponentti renderöidään palvelimella. Tämä parantaa suorituskykyä.

Katso tämä artikkeli aiheesta erilaisia ​​renderöintimenetelmiä Next.js: ssä saadaksesi tarkempaa selitystä.

Palvelinkomponentin avulla voit turvallisesti käyttää ympäristön salaisuuksia ilman, että ne paljastuvat asiakaspuolella. Voit esimerkiksi käyttää process.env.

Voit myös olla vuorovaikutuksessa suoraan taustajärjestelmän kanssa. Ei ole tarvetta käyttää getServerSideProps tai getStaticProps kuten voit käyttää async/await-toimintoa palvelinkomponentissa tietojen hakemiseen.

Harkitse tätä asynkronointitoimintoa, joka hakee tiedot API: sta.

asynktoimintogetData() {
yrittää{
konst res = odottaa hae(' https://api.example.com/...');
palata res.json();
 } ottaa kiinni(virhe) {
heittääUusiVirhe("Tietoja ei voitu hakea")
 }
}

Voit kutsua sitä suoraan sivulla seuraavasti:

viedäoletuksenaasynktoimintoSivu() {
konst data = odottaa getData();
palata<div>div>;
}

Palvelinkomponentit sopivat erinomaisesti ei-interaktiivisen sisällön renderöimiseen. Jos sinun täytyy käytä React-koukkuja, tapahtumaseuraajat tai vain selaimen sovellusliittymät, käyttävät asiakaskomponenttia lisäämällä "use client" -käsky komponentin yläosaan ennen tuontia.

Osien asteittainen suoratoisto sovellushakemistossa

Suoratoisto tarkoittaa käyttöliittymän osien lähettämistä asiakkaalle asteittain, kunnes kaikki komponentit on renderöity. Tämä antaa käyttäjälle mahdollisuuden tarkastella osaa sisällöstä, kun loput renderöidään. Anna käyttäjille parempi käyttökokemus renderöimällä latauskomponentti, kuten spinner, kunnes palvelin on suorittanut sisällön renderöinnin. Voit tehdä tämän kahdella tavalla:

  • Luodaan a loading.tsx tiedosto, joka renderöidään koko reittiosuudelle. 
viedäoletuksenatoimintoLadataan() {
palata<s>Ladataan...s>
}
  • Yksittäisten komponenttien kääriminen React Suspense -rajalla ja varakäyttöliittymän määrittäminen. 
tuonti { Jännitys } alkaen"reagoi";
tuonti { Tuotteet } alkaen"./Komponentit";
viedäoletuksenatoimintoMyynti() {
palata (
<osio>
Tuotteet...
}>
<Tuotteet />
Jännitystä>
osio>
 );
}

Ennen Tuotteet-komponentin hahmontamista käyttäjä näkee "Tuotteet…". Tämä on parempi kuin tyhjä näyttö käyttökokemuksen kannalta.

Päivitys Next.js-versioon 13

Uusi sovellushakemisto on ehdottomasti parannus aikaisempaan sivuhakemistoon. Se sisältää erityisiä tiedostoja, kuten asettelu-, otsikko-, malli-, virhe-, ei-löytö- ja lataustiedostoja, jotka käsittelevät eri tiloja reitin hahmontamisessa ilman manuaalista asetusta.

Lisäksi sovellushakemisto tukee myös suoratoistoa ja palvelinkomponentteja, jotka parantavat suorituskykyä. Vaikka nämä ominaisuudet ovat hyviä sekä käyttäjille että kehittäjille, useimmat niistä ovat tällä hetkellä beta-vaiheessa.

Voit kuitenkin silti päivittää Next.js 13:een, koska sivuhakemisto toimii edelleen, ja ala sitten käyttää sovellushakemistoa omaan tahtiisi.