Next.js Paralleelsed marsruudid: Dünaamiliste leheküljepaigutuste loomine

Next.js, juhtiv Reacti raamistik, areneb pidevalt, et pakkuda arendajatele võimsaid tööriistu kaasaegsete veebirakenduste ehitamiseks. Üks põnevamaid funktsioone, mis on viimastes versioonides kasutusele võetud, on Paralleelsed marsruudid. See funktsioon võimaldab teil renderdada mitu sõltumatut sektsiooni sama leheküljepaigutuse sees, pakkudes võrratut paindlikkust ja kontrolli oma rakenduse struktuuri ja kasutajakogemuse üle.

Mis on paralleelsed marsruudid?

Traditsiooniliselt vastab marsruut Next.js-is ühele leheküljekomponendile. Kui navigeerite teisele marsruudile, renderdatakse kogu lehekülg uuesti. Paralleelsed marsruudid lõhuvad seda paradigmat, võimaldades renderdada mitu komponenti samaaegselt samas paigutuses, kusjuures igaüks on hallatud oma sõltumatu marsruudi segmendi poolt. Mõelge sellest kui oma lehekülje jagamisest eraldi sektsioonideks, millest igaühel on oma URL ja elutsükkel, mis kõik eksisteerivad ühel ekraanil.

See avab palju võimalusi keerukamate ja dünaamilisemate kasutajaliideste loomiseks. Näiteks saate kasutada paralleelseid marsruute, et:

• Kuvada püsivat navigatsiooniriba koos põhisisu.
• Rakendada modaalaknaid või külgribasid, mõjutamata peamist leheküljevoogu.
• Luua armatuurlaudu sõltumatute vidinatega, mida saab eraldi laadida ja värskendada.
• A/B testida erinevaid komponendi versioone, mõjutamata üldist leheküljestruktuuri.

Kontseptsiooni mõistmine: pesad

Paralleelsete marsruutide taga olev põhikontseptsioon on mõiste „pesad“. Pesa on teie paigutuse määratud ala, kus renderdatakse konkreetne marsruudi segment. Te määratlete need pesad oma kataloogis app, kasutades sümbolit @, millele järgneb pesa nimi. Näiteks @sidebar tähistab pesa nimega „sidebar“.

Iga pesa saab seejärel seostada marsruudi segmendiga. Kui kasutaja navigeerib konkreetsele marsruudile, renderdab Next.js selle marsruudi segmendiga seotud komponendi vastavasse paigutuse pesasse.

Rakendamine: praktiline näide

Illustreerime, kuidas paralleelsed marsruudid töötavad praktilise näite abil. Kujutage ette, et loote e-kaubanduse rakenduse ja soovite kuvada toote üksikasjade lehte püsiva ostukorvi külgribaga.

1. Kataloogistruktuur

Kõigepealt määratleme oma rakenduse kataloogistruktuuri:

app/
  product/
    [id]/
      @cart/
        page.js  // Ostukorvi komponent
      page.js      // Toote üksikasjade komponent
    layout.js   // Toote paigutus
  layout.js     // Juurpaigutus

Siin on see, mida iga fail esindab:

• app/layout.js: Kogu rakenduse juurpaigutus.
• app/product/[id]/layout.js: Toote üksikasjade leheküljele spetsiifiline paigutus. Siin määratleme oma pesad.
• app/product/[id]/page.js: Peamine toote üksikasjade komponent.
• app/product/[id]/@cart/page.js: Ostukorvi komponent, mis renderdatakse pesas @cart.

2. Juurpaigutus (app/layout.js)

Juurpaigutus sisaldab tavaliselt elemente, mis jagatakse kogu rakenduses, nagu päised ja jalused.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Minu e-kaubanduse rakendus
        {children}
        
      
    
  );
}

3. Toote paigutus (app/product/[id]/layout.js)

See on oluline osa, kus me määratleme oma pesad. Me saame komponente peamise tootelehekülje ja ostukorvi jaoks rekvisiitidena, mis vastavad vastavalt page.js ja @cart/page.js.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}
      
    
  );
}

Selles näites kasutame lihtsat flexboxi paigutust, et paigutada peamine tootesisu ja ostukorvi külgriba kõrvuti. Rekvisiit children sisaldab app/product/[id]/page.js renderdatud väljundit ja rekvisiit cart sisaldab app/product/[id]/@cart/page.js renderdatud väljundit.

4. Toote üksikasjade leht (app/product/[id]/page.js)

See on standardne dünaamilise marsruudi leht, mis kuvab toote üksikasjad vastavalt parameetrile id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Voo toote andmed vastavalt ID-le
  const product = await fetchProduct(id);

  return (
    

      
Toote üksikasjad
      
{product.name}
      
{product.description}
      
Hind: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Asenda oma tegeliku andmete hankimise loogikaga
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Toode ${id}`, description: `Toote ${id} kirjeldus`, price: 99.99 });
  }, 500));
}

5. Ostukorvi komponent (app/product/[id]/@cart/page.js)

See komponent esindab ostukorvi, mis renderdatakse pesas @cart.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
Ostukorv
      
Tooteid korvis: 3
      Kassa
    
  );
}

Selgitus

Kui kasutaja navigeerib aadressile /product/123, siis Next.js:

1. Renderdab juurpaigutuse (app/layout.js).
2. Renderdab toote paigutuse (app/product/[id]/layout.js).
3. Toote paigutuses renderdab toote üksikasjade komponendi (app/product/[id]/page.js) rekvisiiti children.
4. Samaaegselt renderdab ostukorvi komponendi (app/product/[id]/@cart/page.js) rekvisiiti cart.

Tulemuseks on toote üksikasjade leht püsiva ostukorvi külgribaga, mis kõik on renderdatud ühes paigutuses.

Paralleelsete marsruutide kasutamise eelised

• Parem kasutajakogemus: Looge interaktiivsemaid ja kaasahaaravamaid kasutajaliideseid püsivate elementide ja dünaamiliste sektsioonidega.
• Suurem koodi taaskasutatavus: Jagage komponente ja paigutusi erinevate marsruutide vahel hõlpsamalt.
• Suurem jõudlus: Laadige ja värskendage lehe sektsioone iseseisvalt, vähendades vajadust kogu lehe uuesti renderdamise järele.
• Lihtsustatud arendus: Hallake keerukaid paigutusi ja interaktsioone moodulima ja organiseeritud struktuuriga.
• A/B testimise võimalused: Testige hõlpsalt erinevaid konkreetsete lehe sektsioonide variatsioone, mõjutamata kogu lehte.

Kaalutlused ja parimad tavad

• Marsruudi konfliktid: Olge ettevaatlik, et vältida marsruudi konflikte paralleelsete marsruutide vahel. Igal marsruudi segmendil peaks olema ainulaadne eesmärk ja see ei tohiks kattuda teiste segmentidega.
• Paigutuse keerukus: Kuigi paralleelsed marsruudid pakuvad paindlikkust, võib liigne kasutamine viia keerukate paigutusteni, mida on raske hooldada. Püüdke saavutada tasakaal paindlikkuse ja lihtsuse vahel.
• SEO mõjud: Kaaluge paralleelsete marsruutide kasutamise SEO mõjusid, eriti kui erinevate pesade sisu on oluliselt erinev. Veenduge, et otsingumootorid saaksid sisu õigesti indekseerida. Kasutage kanoonilisi URL-e asjakohaselt.
• Andmete hankimine: Hallake andmete hankimist hoolikalt, eriti mitme sõltumatu sektsiooni korral. Kaaluge jagatud andmesalvede või vahemälu mehhanismide kasutamist, et vältida liigseid päringuid.
• Ligipääsetavus: Veenduge, et teie paralleelsete marsruutide rakendamine oleks kättesaadav kõigile kasutajatele, sealhulgas puudega inimestele. Kasutage head kasutajakogemuse pakkumiseks sobivaid ARIA atribuute ja semantilist HTML-i.

Täpsem kasutamine: tingimuslik renderdamine ja dünaamilised pesad

Paralleelsed marsruudid ei piirdu staatiliste pesa definitsioonidega. Saate kasutada ka tingimuslikku renderdamist ja dünaamilisi pesasid, et luua veelgi paindlikumaid paigutusi.

Tingimuslik renderdamine

Saate tingimuslikult renderdada erinevaid komponente pesas, mis põhinevad kasutaja rollidel, autentimisolekul või muudel teguritel.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}
      
    
  );
}

function AdminPanel() {
  return (
    

      
Administreerimispaneel
      
Hallake toote üksikasju siin.
    
  );
}

Selles näites, kui kasutajal on roll 'admin', renderdatakse pesas @cart komponent AdminPanel ostukorvi asemel.

Dünaamilised pesad

Kuigi vähem levinud, saate teoreetiliselt konstrueerida pesa nimesid dünaamiliselt, kuid seda ei soovitata tavaliselt keerukuse ja võimalike jõudlusprobleemide tõttu. Parem on jääda eelmääratletud ja arusaadavate pesade juurde. Kui tekib vajadus dünaamiliste „pesade“ järele, kaaluge alternatiivseid lahendusi, näiteks tavaliste Reacti komponentide kasutamist rekvisiitidega ja tingimusliku renderdamisega.

Reaalmaailma näited ja kasutusjuhud

Uurime mõningaid reaalmaailma näiteid selle kohta, kuidas paralleelseid marsruute saab kasutada erinevat tüüpi rakendustes:

• E-kaubanduse platvormid: Ostukorvi, soovituste või kasutajakonto teabe kuvamine koos toote üksikasjade või kategooria lehtedega.
• Armatuurlauad: Armatuurlaudade loomine sõltumatute vidinatega mõõdikute, graafikute ja aruannete kuvamiseks. Iga vidinat saab laadida ja värskendada eraldi, mõjutamata kogu armatuurlauda. Müügiarmatuurlaud võib kuvada geograafilisi andmeid ühel paralleelsel marsruudil ja toote jõudlust teisel, võimaldades kasutajal kohandada seda, mida nad näevad, ilma lehte täielikult laadimata.
• Sotsiaalmeedia rakendused: Vestlusribade või teavituste paneeli kuvamine koos peamise voo või profiililehtedega.
• Sisuhaldussüsteemid (CMS): Eelvaatepaneeli või redigeerimistööriistade pakkumine koos redigeeritava sisuga. Paralleelne marsruut võib kuvada kirjutatava artikli reaalajas eelvaate, mis värskendatakse reaalajas, kui muudatusi tehakse.
• Õppeplatvormid: Kursusematerjalide kuvamine koos edenemise jälgimise või sotsiaalsete suhtluse funktsioonidega.
• Finantsrakendused: Reaalajas aktsiahindade või portfellide kokkuvõtete kuvamine koos uudiste või analüüsiartiklitega. Kujutage ette, et finantsuudiste veebisait kasutab paralleelseid marsruute reaalajas turuandmete kuvamiseks koos uudisteartiklitega, pakkudes kasutajatele terviklikku ülevaadet finantsmaastikust.
• Globaalsed koostöövahendid: Dokumentide või koodi samaaegne redigeerimine püsivate videokonverentside või vestluspaneelidega. San Franciscos, Londonis ja Tokyos asuv hajutatud insenerimeeskond saaks paralleelseid marsruute kasutada sama disainidokumendi kallal reaalajas töötamiseks, kusjuures videokõne kuvatakse püsivalt külgribal, soodustades sujuvat koostööd ajavööndite vahel.

Järeldus

Next.js paralleelsed marsruudid on võimas funktsioon, mis avab uue maailma võimalusi dünaamiliste ja paindlike veebirakenduste loomiseks. Võimaldades renderdada mitu sõltumatut sektsiooni samas leheküljepaigutuses, võimaldavad paralleelsed marsruudid luua kaasahaaravamaid kasutajakogemusi, suurendada koodi taaskasutatavust ja lihtsustada arendusprotsessi. Kuigi on oluline kaaluda võimalikke keerukusi ja järgida parimaid tavasid, võib paralleelsete marsruutide valdamine oluliselt suurendada teie Next.js arendusoskusi ja võimaldada teil luua tõeliselt uuenduslikke veebirakendusi.

Kuna Next.js areneb edasi, muutuvad paralleelsed marsruudid kahtlemata üha olulisemaks tööriistaks arendajatele, kes soovivad nihutada veebis võimaliku piire. Katsetage selles juhendis kirjeldatud kontseptsioonidega ja avastage, kuidas paralleelsed marsruudid võivad muuta teie lähenemist kaasaegsete veebirakenduste loomisele.