Avage Next.js-is skaleeritavad ja dünaamilised kasutajaliidesed. Meie põhjalik juhend katab marsruudigrupid organiseerimiseks ja paralleelsed marsruudid keeruliste töölaudade jaoks. Täiendage oma oskusi kohe!
Next.js App Router'i meisterlik valdamine: Süvaülevaade marsruudigruppide ja paralleelsete marsruutide arhitektuurist
Next.js App Router'i väljatulek tähistas paradigma muutust selles, kuidas arendajad populaarse Reacti raamistikuga veebirakendusi ehitavad. Eemaldudes Pages Router'i failipõhistest tavadest, tutvustas App Router võimsamat, paindlikumat ja serverikesksemat mudelit. See areng võimaldab meil luua väga keerukaid ja suure jõudlusega kasutajaliideseid suurema kontrolli ja organiseeritusega. Kõige murrangulisemate funktsioonide hulgas on marsruudigrupid (Route Groups) ja paralleelsed marsruudid (Parallel Routes).
Arendajatele, kes soovivad luua ettevõtte tasemel rakendusi, on nende kahe kontseptsiooni valdamine mitte lihtsalt kasulik – see on hädavajalik. Need lahendavad levinud arhitektuurilisi väljakutseid, mis on seotud paigutuse haldamise, marsruutide organiseerimise ja dünaamiliste, mitme paneeliga liideste, nagu töölauad, loomisega. See juhend pakub põhjalikku ülevaadet marsruudigruppidest ja paralleelsetest marsruutidest, liikudes põhimõistetest edasijõudnud rakendusstrateegiate ja parimate tavadeni globaalsele arendajaskonnale.
Next.js App Router'i mõistmine: Kiire meeldetuletus
Enne kui süveneme üksikasjadesse, vaatame lühidalt üle App Router'i põhiprintsiibid. Selle arhitektuur põhineb kaustapõhisel süsteemil, kus kaustad määratlevad URL-i segmente. Nendes kaustades olevad spetsiaalsed failid määravad selle segmendi kasutajaliidese ja käitumise:
page.js
: Marsruudi peamine kasutajaliidese komponent, mis muudab selle avalikult kättesaadavaks.layout.js
: Kasutajaliidese komponent, mis ümbritseb alam-paigutusi või lehti. See on oluline kasutajaliidese jagamiseks mitme marsruudi vahel, näiteks päiste ja jaluste jaoks.loading.js
: Valikuline kasutajaliides, mida näidatakse lehe sisu laadimise ajal, ehitatud React Suspense'i peale.error.js
: Valikuline kasutajaliides, mida kuvatakse vigade korral, luues robustseid veapiire (error boundaries).
See struktuur koos Reacti serverikomponentide (RSC) vaikimisi kasutamisega soodustab server-first lähenemist, mis võib oluliselt parandada jõudlust ja andmete hankimise mustreid. Marsruudigrupid ja paralleelsed marsruudid on edasijõudnud tavad, mis tuginevad sellele vundamendile.
Marsruudigruppide demüstifitseerimine: Projekti organiseerimine selguse ja skaleeritavuse nimel
Rakenduse kasvades võib marsruutide arv muutuda kohmakaks. Teil võib olla lehtede komplekt turunduse jaoks, teine kasutaja autentimiseks ja kolmas rakenduse põhitöölaua jaoks. Loogiliselt on need eraldi osad, aga kuidas neid oma failisüsteemis organiseerida ilma URL-e risustamata? Just selle probleemi lahendavadki marsruudigrupid.
Mis on marsruudigrupid?
Marsruudigrupp on mehhanism failide ja marsruudisegmentide loogilistesse gruppidesse organiseerimiseks ilma URL-i struktuuri mõjutamata. Marsruudigrupi loote, ümbritsedes kausta nime sulgudega, näiteks (marketing)
või (app)
.
Sulgudes olev kausta nimi on puhtalt organiseerimise eesmärgil. Next.js ignoreerib seda täielikult URL-i tee määramisel. Näiteks fail asukohas app/(marketing)/about/page.js
serveeritakse URL-il /about
, mitte /(marketing)/about
.
Marsruudigruppide peamised kasutusjuhud ja eelised
Kuigi lihtne organiseerimine on eelis, peitub marsruudigruppide tegelik jõud nende võimes jaotada rakendus eraldiseisvate, jagatud paigutustega osadeks.
1. Erinevate paigutuste loomine marsruudisegmentidele
See on kõige levinum ja võimsam kasutusjuht. Kujutage ette veebirakendust, millel on kaks peamist osa:
- Avalik turundussait (Avaleht, Meist, Hinnakiri) globaalse päise ja jalusega.
- Privaatne, autenditud kasutaja töölaud (Töölaud, Seaded, Profiil) külgribaga, kasutajapõhise navigeerimisega ja erineva üldise struktuuriga.
Ilma marsruudigruppideta oleks nendele osadele erinevate juurpaigutuste rakendamine keeruline. Marsruudigruppidega on see uskumatult intuitiivne. Saate luua igas grupis unikaalse layout.js
faili.
Siin on tüüpiline failistruktuur selle stsenaariumi jaoks:
app/
├── (marketing)/
│ ├── layout.js // Avalik paigutus turunduse päise/jalusega
│ ├── page.js // Renderdatakse aadressil '/'
│ └── about/
│ └── page.js // Renderdatakse aadressil '/about'
├── (app)/
│ ├── layout.js // Töölaua paigutus külgribaga
│ ├── dashboard/
│ │ └── page.js // Renderdatakse aadressil '/dashboard'
│ └── settings/
│ └── page.js // Renderdatakse aadressil '/settings'
└── layout.js // Juurpaigutus (nt <html> ja <body> siltidele)
Selles arhitektuuris:
- Iga marsruut
(marketing)
grupis ümbritsetakse(marketing)/layout.js
paigutusega. - Iga marsruut
(app)
grupis ümbritsetakse(app)/layout.js
paigutusega. - Mõlemad grupid jagavad juurpaigutust
app/layout.js
, mis on ideaalne globaalse HTML-struktuuri defineerimiseks.
2. Segmendi väljajätmine jagatud paigutusest
Mõnikord peab konkreetne leht või jaotis vanempaigutusest täielikult vabanema. Levinud näide on ostukorvi protsess või spetsiaalne maandumisleht, millel ei tohiks olla saidi peamist navigeerimist. Saate selle saavutada, paigutades marsruudi gruppi, mis ei jaga kõrgema taseme paigutust. Kuigi see kõlab keeruliselt, tähendab see lihtsalt marsruudigrupile oma tipptaseme layout.js
andmist, mis ei renderda juurpaigutuse `children` elementi.
Praktiline näide: Mitme paigutusega rakenduse ehitamine
Ehitame minimaalse versiooni eespool kirjeldatud turunduse/rakenduse struktuurist.
1. Juurpaigutus (app/layout.js
)
See paigutus on minimaalne ja kehtib igale lehele. See määratleb olulise HTML-struktuuri.
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="et">
<body>{children}</body>
</html>
);
}
2. Turunduse paigutus (app/(marketing)/layout.js
)
See paigutus sisaldab avalikku päist ja jalust.
// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
return (
<div>
<header>Turunduse päis</header>
<main>{children}</main>
<footer>Turunduse jalus</footer>
</div>
);
}
3. Rakenduse töölaua paigutus (app/(app)/layout.js
)
Sellel paigutusel on erinev struktuur, mis sisaldab külgriba autenditud kasutajatele.
// app/(app)/layout.js
export default function AppLayout({ children }) {
return (
<div style={{ display: 'flex' }}>
<aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
Töölaua külgriba
</aside>
<main style={{ flex: 1, padding: '20px' }}>{children}</main>
</div>
);
}
Selle struktuuriga renderdatakse aadressile /about
navigeerides leht `MarketingLayout`-iga, samas kui aadressile /dashboard
navigeerides renderdatakse see `AppLayout`-iga. URL jääb puhtaks ja semantiliseks, samal ajal kui meie projekti failistruktuur on täiuslikult organiseeritud ja skaleeritav.
Dünaamiliste kasutajaliideste avamine paralleelsete marsruutidega
Kui marsruudigrupid aitavad organiseerida rakenduse erinevaid osi, siis paralleelsed marsruudid lahendavad teistsuguse väljakutse: mitme, sõltumatu lehevaate kuvamine ühes paigutuses. See on levinud nõue keeruliste töölaudade, sotsiaalmeedia voogude või mis tahes kasutajaliidese puhul, kus erinevaid paneele tuleb samaaegselt renderdada ja hallata.
Mis on paralleelsed marsruudid?
Paralleelsed marsruudid võimaldavad teil samaaegselt renderdada ühte või mitut lehte samas paigutuses. Need marsruudid defineeritakse spetsiaalse kaustakonventsiooni abil, mida nimetatakse pesadeks (slots). Pesad luuakse süntaksiga @kaustaNimi
. Need ei ole osa URL-i struktuurist; selle asemel edastatakse need automaatselt prop'idena lähimale jagatud vanemfailile layout.js
.
Näiteks kui teil on paigutus, mis peab kuvama kõrvuti meeskonna tegevuste voo ja analüütika graafiku, saate määratleda kaks pesa: `@team` ja `@analytics`.
Põhiidee: Pesad
Mõelge pesadest kui nimega kohatäitjatest oma paigutuses. Paigutuse fail aktsepteerib need pesad selgesõnaliselt prop'idena ja otsustab, kuhu neid renderdada.
Vaatleme seda paigutuskomponenti:
// Paigutus, mis aktsepteerib kahte pesa: 'team' ja 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
return (
<div>
{children}
<div style={{ display: 'flex' }}>
{team}
{analytics}
</div>
</div>
);
}
Siin on `children`, `team` ja `analytics` kõik pesad. `children` on kaudne pesa, mis vastab standardsele `page.js` failile kaustas. `team` ja `analytics` on selgesõnalised pesad, mis tuleb failisüsteemis luua `@` prefiksiga.
Põhijooned ja eelised
- Sõltumatu marsruutide haldamine: Igal paralleelsel marsruudil (pesal) võivad olla oma laadimis- ja veaolukorrad. See tähendab, et teie analüütikapaneel võib näidata laadimisikooni, samal ajal kui meeskonna voog on juba renderdatud, mis tagab palju parema kasutajakogemuse.
- Tingimuslik renderdamine: Saate programmeeriliselt otsustada, milliseid pesasid renderdada, tuginedes teatud tingimustele, näiteks kasutaja autentimisolekule või õigustele.
- Alamnavigeerimine: Igat pesa saab navigeerida iseseisvalt, ilma teisi pesasid mõjutamata. See on ideaalne vahelehtedega liideste või töölaudade jaoks, kus ühe paneeli olek on teisest täiesti eraldiseisev.
Reaalse maailma stsenaarium: Keeruka töölaua ehitamine
Kujundame töölaua URL-il /dashboard
. Sellel on peamine sisuala, meeskonna tegevuste paneel ja jõudlusanalüütika paneel.
Failistruktuur:
app/
└── dashboard/
├── @analytics/
│ ├── page.js // Analüütika pesa kasutajaliides
│ └── loading.js // Laadimisliides spetsiaalselt analüütika jaoks
├── @team/
│ └── page.js // Meeskonna pesa kasutajaliides
├── layout.js // Paigutus, mis orkestreerib pesasid
└── page.js // Kaudne 'children' pesa (põhisisu)
1. Töölaua paigutus (app/dashboard/layout.js
)
See paigutus võtab vastu ja paigutab kolm pesa.
// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
const isLoggedIn = true; // Asenda päris autentimisloogikaga
return isLoggedIn ? (
<div>
<h1>Peamine töölaud</h1>
{children}
<div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
<div style={{ border: '1px solid blue', padding: '10px' }}>
<h2>Meeskonna tegevused</h2>
{team}
</div>
<div style={{ border: '1px solid green', padding: '10px' }}>
<h2>Jõudlusanalüütika</h2>
{analytics}
</div>
</div>
</div>
) : (
<div>Töölaua vaatamiseks palun logige sisse.</div>
);
}
2. Pesa lehed (nt app/dashboard/@analytics/page.js
)
Iga pesa `page.js` fail sisaldab selle konkreetse paneeli kasutajaliidest.
// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
// Simuleeri võrgupäringut
await new Promise(resolve => setTimeout(resolve, 3000));
return { views: '1.2M', revenue: '$50,000' };
}
export default async function AnalyticsPage() {
const data = await getAnalyticsData();
return (
<div>
<p>Lehevaatamised: {data.views}</p>
<p>Tulu: {data.revenue}</p>
</div>
);
}
// app/dashboard/@analytics/loading.js
export default function Loading() {
return <p>Analüütika andmete laadimine...</p>;
}
Selle seadistusega renderdab Next.js `DashboardLayout`-i, kui kasutaja navigeerib aadressile /dashboard
. Paigutus saab renderdatud sisu failidest dashboard/page.js
, dashboard/@team/page.js
ja dashboard/@analytics/page.js
prop'idena ja paigutab need vastavalt. Oluline on see, et analüütikapaneel näitab oma `loading.js` olekut 3 sekundit, ilma et see blokeeriks ülejäänud töölaua renderdamist.
Sobimatute marsruutide käsitlemine `default.js`-ga
Tekib kriitiline küsimus: Mis juhtub, kui Next.js ei suuda praeguse URL-i jaoks pesa aktiivset olekut hankida? Näiteks esmasel laadimisel või lehe uuesti laadimisel võib URL olla /dashboard
, mis ei anna konkreetseid juhiseid, mida kuvada pesades @team
või `@analytics`. Vaikimisi renderdaks Next.js 404 vea.
Selle vältimiseks saame pakkuda varukasutajaliidest, luues paralleelse marsruudi sisse `default.js` faili.
Näide:
// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
return (
<div>
<p>Analüütika andmeid pole valitud.</p>
</div>
);
}
Nüüd, kui analüütika pesa ei sobi, renderdab Next.js 404 lehe asemel `default.js` sisu. See on oluline sujuva kasutajakogemuse loomiseks, eriti keeruka paralleelsete marsruutide seadistuse esmasel laadimisel.
Marsruudigruppide ja paralleelsete marsruutide kombineerimine edasijõudnud arhitektuuride jaoks
App Router'i tegelik jõud avaldub, kui kombineerite selle funktsioone. Marsruudigrupid ja paralleelsed marsruudid töötavad suurepäraselt koos, et luua keerukaid ja hästi organiseeritud rakenduste arhitektuure.
Kasutusjuht: Mitme modaaliga sisuvaatur
Kujutage ette platvormi nagu meediagalerii või dokumendivaatur, kus kasutaja saab vaadata elementi, aga ka avada modaalakna selle detailide nägemiseks, kaotamata taustal oleva lehe konteksti. Seda nimetatakse sageli "püüdlevaks marsruudiks" (Intercepting Route) ja see on võimas muster, mis on ehitatud paralleelsetele marsruutidele.
Loome fotogalerii. Kui klõpsate fotol, avaneb see modaalaknas. Aga kui värskendate lehte või navigeerite otse foto URL-ile, peaks see näitama selle foto jaoks pühendatud lehte.
Failistruktuur:
app/
├── @modal/(..)(..)photos/[id]/page.js // Püütud marsruut modaali jaoks
├── photos/
│ └── [id]/
│ └── page.js // Pühendatud fotoleht
├── layout.js // Juurpaigutus, mis saab @modal pesa
└── page.js // Peamine galerii leht
Selgitus:
- Loome paralleelse marsruudi pesa nimega `@modal`.
- Veidra välimusega tee
(..)(..)photos/[id]
kasutab konventsiooni nimega "kõikehõlmavad segmendid" (catch-all segments), et sobitada `photos/[id]` marsruut kahe taseme võrra kõrgemalt (juurest). - Kui kasutaja navigeerib peamiselt galeriilehelt (`/`) fotole, püüab Next.js selle navigeerimise kinni ja renderdab modaali lehe `@modal` pessa, selle asemel et teostada täielikku lehe navigeerimist.
- Peamine galeriileht jääb nähtavale paigutuse `children` prop'i all.
- Kui kasutaja külastab otse aadressi `/photos/123`, siis püüdmine ei käivitu ja pühendatud leht asukohas `photos/[id]/page.js` renderdatakse tavapäraselt.
See muster kombineerib paralleelseid marsruute (`@modal` pesa) edasijõudnud marsruutimiskonventsioonidega, et luua sujuv kasutajakogemus, mida oleks käsitsi väga keeruline rakendada.
Parimad tavad ja levinumad lõksud
Marsruudigruppide parimad tavad
- Kasutage kirjeldavaid nimesid: Valige tähendusrikkaid nimesid nagu
(auth)
,(marketing)
või(protected)
, et muuta oma projekti struktuur isedokumenteerivaks. - Hoidke struktuur võimalikult lame: Vältige marsruudigruppide liigset pesastamist. Lamedam struktuur on üldiselt lihtsamini mõistetav ja hooldatav.
- Pidage meeles nende eesmärki: Kasutage neid paigutuse jaotamiseks ja organiseerimiseks, mitte URL-i segmentide loomiseks.
Paralleelsete marsruutide parimad tavad
- Pakkuge alati `default.js` faili: Iga mittetriviaalse paralleelsete marsruutide kasutuse korral lisage `default.js` fail, et sujuvalt käsitleda esialgseid laadimisi ja sobimatuid olekuid.
- Kasutage granuleeritud laadimisolekuid: Asetage `loading.js` fail iga pesa kausta, et pakkuda kasutajale kohest tagasisidet ja vältida kasutajaliidese kaskaade (UI waterfalls).
- Kasutage sõltumatu kasutajaliidese jaoks: Paralleelsed marsruudid säravad siis, kui iga pesa sisu on tõeliselt sõltumatu. Kui paneelid on sügavalt omavahel seotud, võib prop'ide edastamine läbi ühe komponendipuu olla lihtsam lahendus.
Levinumad lõksud, mida vältida
- Konventsioonide unustamine: Levinud viga on sulgude `()` unustamine marsruudigruppide jaoks või at-sümboli `@` unustamine paralleelsete marsruutide pesade jaoks. See toob kaasa nende käsitlemise tavaliste URL-i segmentidena.
- `default.js` puudumine: Kõige sagedasem probleem paralleelsete marsruutidega on ootamatute 404 vigade nägemine, kuna sobimatute pesade jaoks ei pakutud `default.js` varufaili.
- `children`-i valesti mõistmine: Paralleelseid marsruute kasutavas paigutuses pidage meeles, et `children` on vaid üks pesadest, mis on kaudselt vastendatud samas kaustas asuva `page.js` või pesastatud paigutusega.
Kokkuvõte: Veebirakenduste tuleviku ehitamine
Next.js App Router koos selliste funktsioonidega nagu marsruudigrupid ja paralleelsed marsruudid pakub robustset ja skaleeritavat vundamenti kaasaegseks veebiarenduseks. Marsruudigrupid pakuvad elegantset lahendust koodi organiseerimiseks ja eristuvate paigutuste rakendamiseks ilma URL-i semantikat kahjustamata. Paralleelsed marsruudid avavad võimaluse ehitada dünaamilisi, mitme paneeliga liideseid sõltumatute olekutega, mis varem oli saavutatav ainult keeruka kliendipoolse olekuhalduse kaudu.
Mõistes ja kombineerides neid võimsaid arhitektuurilisi mustreid, saate liikuda kaugemale lihtsatest veebisaitidest ja hakata ehitama keerukaid, suure jõudlusega ja hooldatavaid rakendusi, mis vastavad tänapäeva kasutajate nõudmistele. Õppimiskõver võib olla järsem kui klassikalisel Pages Router'il, kuid tasuvus rakenduse arhitektuuri ja kasutajakogemuse osas on tohutu. Alustage nende kontseptsioonidega katsetamist oma järgmises projektis ja avage Next.js'i täielik potentsiaal.