Next.js lygiagretūs maršrutai: dinaminių puslapių išdėstymų kūrimas

Next.js, viena iš pirmaujančių „React“ karkasų, nuolat tobulėja, siekdama suteikti programuotojams galingus įrankius modernioms interneto programoms kurti. Viena iš įdomiausių naujausiose versijose pristatytų funkcijų yra lygiagretūs maršrutai (Parallel Routes). Ši funkcija leidžia atvaizduoti kelis nepriklausomus skyrius tame pačiame puslapio išdėstyme, suteikdama neprilygstamą lankstumą ir kontrolę jūsų programos struktūrai bei naudotojo patirčiai.

Kas yra lygiagretūs maršrutai?

Tradiciškai maršrutas „Next.js“ atitinka vieną puslapio komponentą. Kai pereinate į kitą maršrutą, visas puslapis yra perpiešiamas. Lygiagretūs maršrutai laužo šią paradigmą, leisdami atvaizduoti kelis komponentus vienu metu tame pačiame išdėstyme, kiekvieną valdomą atskiru, nepriklausomu maršruto segmentu. Įsivaizduokite tai kaip puslapio padalijimą į atskirus skyrius, kurių kiekvienas turi savo URL ir gyvavimo ciklą, ir visi egzistuoja viename ekrane.

Tai atveria daug galimybių kurti sudėtingesnes ir dinamiškesnes naudotojo sąsajas. Pavyzdžiui, galite naudoti lygiagrečius maršrutus, kad:

• Rodyti nuolatinę naršymo juostą šalia pagrindinio turinio.
• Įgyvendinti modalinius langus ar šonines juostas, nepaveikiant pagrindinio puslapio srauto.
• Kurti informacinius skydelius su nepriklausomais valdikliais, kuriuos galima įkelti ir atnaujinti atskirai.
• Atlikti A/B testavimą skirtingoms komponento versijoms, nepaveikiant bendros puslapio struktūros.

Koncepcijos supratimas: lizdai (Slots)

Pagrindinė lygiagrečių maršrutų koncepcija yra „lizdų“ (slots) idėja. Lizdas – tai pavadinta sritis jūsų išdėstyme, kurioje atvaizduojamas konkretus maršruto segmentas. Šiuos lizdus apibrėžiate savo app kataloge, naudodami @ simbolį, po kurio eina lizdo pavadinimas. Pavyzdžiui, @sidebar reiškia lizdą, pavadintą „sidebar“.

Kiekvienas lizdas gali būti susietas su maršruto segmentu. Kai naudotojas pereina į konkretų maršrutą, Next.js atvaizduos komponentą, susietą su tuo maršruto segmentu, atitinkamame išdėstymo lizde.

Įgyvendinimas: praktinis pavyzdys

Iliustruokime, kaip veikia lygiagretūs maršrutai, praktiniu pavyzdžiu. Įsivaizduokite, kad kuriate el. prekybos programą ir norite rodyti produkto detalių puslapį su nuolat matoma pirkinių krepšelio šonine juosta.

1. Katalogų struktūra

Pirmiausia apibrėžkime savo programos katalogų struktūrą:

app/
  product/
    [id]/
      @cart/
        page.js  // Pirkinių krepšelio komponentas
      page.js      // Produkto detalių komponentas
    layout.js   // Produkto išdėstymas
  layout.js     // Pagrindinis išdėstymas

Štai ką reiškia kiekvienas failas:

• app/layout.js: Pagrindinis visos programos išdėstymas.
• app/product/[id]/layout.js: Specifinis produkto detalių puslapio išdėstymas. Čia apibrėšime savo lizdus.
• app/product/[id]/page.js: Pagrindinis produkto detalių komponentas.
• app/product/[id]/@cart/page.js: Pirkinių krepšelio komponentas, kuris bus atvaizduotas @cart lizde.

2. Pagrindinis išdėstymas (app/layout.js)

Pagrindiniame išdėstyme paprastai yra elementai, kurie bendri visai programai, pavyzdžiui, antraštės ir poraštės.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Mano el. prekybos programa
        {children}
        
      
    
  );
}

3. Produkto išdėstymas (app/product/[id]/layout.js)

Tai yra svarbiausia dalis, kurioje apibrėžiame savo lizdus. Mes gauname komponentus pagrindiniam produkto puslapiui ir krepšeliui kaip savybes (props), atitinkamai atitinkančias page.js ir @cart/page.js.

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

      
{children}
      
    
  );
}

Šiame pavyzdyje naudojame paprastą „flexbox“ išdėstymą, kad pagrindinis produkto turinys ir krepšelio šoninė juosta būtų išdėstyti vienas šalia kito. children savybė (prop) turės atvaizduotą app/product/[id]/page.js išvestį, o cart savybė (prop) turės atvaizduotą app/product/[id]/@cart/page.js išvestį.

4. Produkto detalių puslapis (app/product/[id]/page.js)

Tai yra standartinis dinaminio maršruto puslapis, kuris rodo produkto detales pagal id parametrą.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Gaunami produkto duomenys pagal ID
  const product = await fetchProduct(id);

  return (
    

      
Produkto detalės
      
{product.name}
      
{product.description}
      
Kaina: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Pakeiskite savo realia duomenų gavimo logika
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Produktas ${id}`, description: `Produkto ${id} aprašymas`, price: 99.99 });
  }, 500));
}

5. Pirkinių krepšelio komponentas (app/product/[id]/@cart/page.js)

Šis komponentas atspindi pirkinių krepšelį, kuris bus atvaizduotas @cart lizde.

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

      
Pirkinių krepšelis
      
Prekių krepšelyje: 3
      Apmokėti
    
  );
}

Paaiškinimas

Kai naudotojas pereina į /product/123, Next.js atliks šiuos veiksmus:

1. Atvaizduos pagrindinį išdėstymą (app/layout.js).
2. Atvaizduos produkto išdėstymą (app/product/[id]/layout.js).
3. Produkto išdėstymo viduje, atvaizduos produkto detalių komponentą (app/product/[id]/page.js) į children savybę (prop).
4. Tuo pačiu metu atvaizduos pirkinių krepšelio komponentą (app/product/[id]/@cart/page.js) į cart savybę (prop).

Rezultatas – produkto detalių puslapis su nuolat matoma pirkinių krepšelio šonine juosta, viskas atvaizduota viename išdėstyme.

Lygiagrečių maršrutų naudojimo privalumai

• Geresnė naudotojo patirtis: Kurkite interaktyvesnes ir patrauklesnes naudotojo sąsajas su nuolatiniais elementais ir dinaminiais skyriais.
• Didesnis kodo pakartotinis panaudojimas: Lengviau bendrinkite komponentus ir išdėstymus tarp skirtingų maršrutų.
• Pagerintas našumas: Įkelkite ir atnaujinkite puslapio dalis nepriklausomai, sumažindami poreikį perpiešti visą puslapį.
• Supaprastintas kūrimas: Valdykite sudėtingus išdėstymus ir sąveikas su moduliškesne ir organizuotesne struktūra.
• A/B testavimo galimybės: Lengvai testuokite skirtingas konkrečių puslapio skyrių variacijas, nepaveikdami viso puslapio.

Svarstymai ir geriausios praktikos

• Maršrutų konfliktai: Būkite atsargūs, kad išvengtumėte maršrutų konfliktų tarp lygiagrečių maršrutų. Kiekvienas maršruto segmentas turėtų turėti unikalų tikslą ir nepersidengti su kitais segmentais.
• Išdėstymo sudėtingumas: Nors lygiagretūs maršrutai suteikia lankstumo, per didelis jų naudojimas gali lemti sudėtingus ir sunkiai prižiūrimus išdėstymus. Siekite pusiausvyros tarp lankstumo ir paprastumo.
• SEO pasekmės: Apsvarstykite SEO pasekmes naudojant lygiagrečius maršrutus, ypač jei turinys skirtinguose lizduose labai skiriasi. Užtikrinkite, kad paieškos sistemos galėtų tinkamai nuskaityti ir indeksuoti turinį. Tinkamai naudokite kanoninius URL.
• Duomenų gavimas: Atidžiai valdykite duomenų gavimą, ypač dirbant su keliais nepriklausomais skyriais. Apsvarstykite galimybę naudoti bendras duomenų saugyklas ar podėliavimo (caching) mechanizmus, kad išvengtumėte perteklinių užklausų.
• Prieinamumas: Užtikrinkite, kad jūsų lygiagrečių maršrutų įgyvendinimas būtų prieinamas visiems naudotojams, įskaitant ir turinčius negalią. Naudokite tinkamus ARIA atributus ir semantinį HTML, kad užtikrintumėte gerą naudotojo patirtį.

Pažangesnis naudojimas: sąlyginis atvaizdavimas ir dinaminiai lizdai

Lygiagretūs maršrutai neapsiriboja statiniais lizdų apibrėžimais. Taip pat galite naudoti sąlyginį atvaizdavimą ir dinaminius lizdus, kad sukurtumėte dar lankstesnius išdėstymus.

Sąlyginis atvaizdavimas

Galite sąlygiškai atvaizduoti skirtingus komponentus lizde, atsižvelgiant į naudotojo vaidmenis, autentifikacijos būseną ar kitus veiksnius.

// 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 (
    

      
Administratoriaus skydelis
      
Čia valdykite produkto detales.
    
  );
}

Šiame pavyzdyje, jei naudotojas turi „admin“ vaidmenį, @cart lizde vietoj pirkinių krepšelio bus atvaizduotas AdminPanel komponentas.

Dinaminiai lizdai

Nors tai mažiau įprasta, teoriškai *galima* konstruoti lizdų pavadinimus dinamiškai, tačiau tai paprastai nerekomenduojama dėl sudėtingumo ir galimų našumo pasekmių. Geriau laikytis iš anksto apibrėžtų ir gerai suprantamų lizdų. Jei atsiranda dinaminių „lizdų“ poreikis, apsvarstykite alternatyvius sprendimus, pavyzdžiui, naudoti standartinius „React“ komponentus su savybėmis (props) ir sąlyginiu atvaizdavimu.

Realaus pasaulio pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą realaus pasaulio pavyzdžių, kaip lygiagretūs maršrutai gali būti naudojami įvairių tipų programose:

• El. prekybos platformos: Pirkinių krepšelio, rekomendacijų ar naudotojo paskyros informacijos rodymas šalia produkto detalių ar kategorijų puslapių.
• Informaciniai skydeliai: Skydelių kūrimas su nepriklausomais valdikliais metrikoms, diagramoms ir ataskaitoms rodyti. Kiekvienas valdiklis gali būti įkeltas ir atnaujintas atskirai, nepaveikiant viso skydelio. Pardavimų skydelyje viename lygiagrečiame maršrute gali būti rodomi geografiniai duomenys, o kitame – produktų našumas, leidžiant naudotojui pritaikyti tai, ką mato, be viso puslapio perkrovimo.
• Socialinių tinklų programos: Pokalbių šoninės juostos arba pranešimų skydelio rodymas šalia pagrindinio naujienų srauto ar profilio puslapių.
• Turinio valdymo sistemos (TVS): Peržiūros lango ar redagavimo įrankių pateikimas šalia redaguojamo turinio. Lygiagretus maršrutas galėtų rodyti tiesioginę rašomo straipsnio peržiūrą, atsinaujinančią realiu laiku, kai atliekami pakeitimai.
• Mokymosi platformos: Kurso medžiagos rodymas kartu su pažangos stebėjimo ar socialinės sąveikos funkcijomis.
• Finansinės programos: Realaus laiko akcijų kainų ar portfelio suvestinių rodymas šalia naujienų ar analizės straipsnių. Įsivaizduokite finansinių naujienų svetainę, kuri naudoja lygiagrečius maršrutus, kad rodytų tiesioginius rinkos duomenis kartu su naujausiomis naujienomis, suteikdama naudotojams išsamų finansų rinkos vaizdą.
• Globalūs bendradarbiavimo įrankiai: Leidžia vienu metu redaguoti dokumentus ar kodą su nuolat matomomis vaizdo konferencijų ar pokalbių skydeliais. Paskirstyta inžinierių komanda San Franciske, Londone ir Tokijuje galėtų naudoti lygiagrečius maršrutus, kad realiu laiku dirbtų su tuo pačiu dizaino dokumentu, o šoninėje juostoje nuolat būtų rodomas vaizdo skambutis, taip skatinant sklandų bendradarbiavimą skirtingose laiko juostose.

Išvada

Next.js lygiagretūs maršrutai yra galinga funkcija, atverianti naują galimybių pasaulį kuriant dinamiškas ir lanksčias interneto programas. Leisdami atvaizduoti kelis nepriklausomus skyrius tame pačiame puslapio išdėstyme, lygiagretūs maršrutai leidžia sukurti patrauklesnę naudotojo patirtį, padidinti kodo pakartotinį panaudojimą ir supaprastinti kūrimo procesą. Nors svarbu atsižvelgti į galimus sudėtingumus ir laikytis geriausių praktikų, lygiagrečių maršrutų įvaldymas gali ženkliai pagerinti jūsų Next.js kūrimo įgūdžius ir leisti kurti tikrai inovatyvias interneto programas.

Kadangi Next.js toliau tobulėja, lygiagretūs maršrutai neabejotinai taps vis svarbesniu įrankiu programuotojams, siekiantiems peržengti to, kas įmanoma internete, ribas. Eksperimentuokite su šiame gide aprašytomis koncepcijomis ir atraskite, kaip lygiagretūs maršrutai gali pakeisti jūsų požiūrį į modernių interneto programų kūrimą.