M

MLOG

Eesti

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:

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:

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:

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

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:

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

Paralleelsete marsruutide parimad tavad

Levinumad lõksud, mida vältida

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.

Next.js App Router'i meisterlik valdamine: Süvaülevaade marsruudigruppide ja paralleelsete marsruutide arhitektuurist | MLOG