M

MLOG

Lietuvių

Atraskite Next.js lygiagrečius maršrutus: išsamus gidas, kaip kurti dinamiškus, lanksčius puslapių išdėstymus su keliais nepriklausomais skyriais. Sužinokite apie įgyvendinimą, naudą ir geriausias praktikas.

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:

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:

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}
        
© 2024

      
    
  );
}

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

      
    

  );
}

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

Svarstymai ir geriausios praktikos

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:

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ą.