Next.js Paralēlās Maršrutēšanas: Dinamisku Lapu Izklājumu Veidošana

Next.js, vadošais React ietvars, pastāvīgi attīstās, lai nodrošinātu izstrādātājiem spēcīgus rīkus modernu tīmekļa lietojumu izstrādei. Viena no aizraujošākajām funkcijām, kas ieviesta jaunākajās versijās, ir Paralēlās Maršrutēšanas. Šī funkcija ļauj atveidot vairākas neatkarīgas sadaļas vienā un tajā pašā lapas izklājumā, piedāvājot nepārspējamu elastību un kontroli pār jūsu lietojumprogrammas struktūru un lietotāja pieredzi.

Kas ir Paralēlās Maršrutēšanas?

Tradicionāli maršruts Next.js atbilst vienam lapas komponentam. Kad pārejat uz citu maršrutu, visa lapa tiek atkārtoti atveidota. Paralēlās Maršrutēšanas pārtrauc šo paradigmu, ļaujot atveidot vairākus komponentus vienlaikus vienā un tajā pašā izklājumā, katru pārvalda savs neatkarīgais maršruta segments. Padomājiet par to kā par savas lapas sadalīšanu atsevišķās sadaļās, katrai ar savu URL un dzīves ciklu, kas visi pastāv vienā ekrānā.

Tas paver daudzas iespējas sarežģītāku un dinamiskāku lietotāja interfeisu izveidei. Piemēram, jūs varat izmantot paralēlās maršrutēšanas, lai:

• Parādītu pastāvīgu navigācijas joslu līdzās galvenajam saturam.
• Ieviessiet modālos logus vai sānu joslas, neietekmējot galveno lapas plūsmu.
• Izveidot informācijas paneļus ar neatkarīgiem logrīkiem, kurus var ielādēt un atjaunināt atsevišķi.
• A/B testēt dažādas komponenta versijas, neietekmējot vispārējo lapas struktūru.

Koncepta izpratne: Slots (Slots)

Paralēlo maršrutēšanas pamatkoncepcija ir “slotu” jēdziens. Slots ir nosaukta zona jūsu izklājumā, kurā tiek atveidots konkrēts maršruta segments. Jūs definējat šos slotus savā app direktorijā, izmantojot simbolu @, kam seko slota nosaukums. Piemēram, @sidebar attēlo slotu ar nosaukumu "sidebar".

Katru slotu pēc tam var saistīt ar maršruta segmentu. Kad lietotājs pāriet uz konkrētu maršrutu, Next.js atveidos komponentu, kas saistīts ar šo maršruta segmentu, attiecīgajā slotā izklājumā.

Īstenošana: Praktisks piemērs

Parādīsim, kā paralēlās maršrutēšanas darbojas ar praktisku piemēru. Iedomājieties, ka veidojat e-komercijas lietojumprogrammu un vēlaties attēlot produkta informācijas lapu ar pastāvīgu iepirkumu groza sānu joslu.

1. Direktoriju struktūra

Vispirms definēsim mūsu lietojumprogrammas direktoriju struktūru:

app/
  product/
    [id]/
      @cart/
        page.js  // Iepirkumu groza komponents
      page.js      // Produkta informācijas komponents
    layout.js   // Produkta izklājums
  layout.js     // Saknes izklājums

Šeit ir tas, ko katrs fails attēlo:

• app/layout.js: Saknes izklājums visai lietojumprogrammai.
• app/product/[id]/layout.js: Izklājums, kas raksturīgs produkta informācijas lapai. Šeit mēs definēsim savus slotus.
• app/product/[id]/page.js: Galvenais produkta informācijas komponents.
• app/product/[id]/@cart/page.js: Iepirkumu groza komponents, kas tiks atveidots @cart slotā.

2. Saknes izklājums (app/layout.js)

Saknes izklājums parasti satur elementus, kas tiek koplietoti visā lietojumprogrammā, piemēram, galvenes un kājenes.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Mans e-komercijas lietojums
        {children}
        
      
    
  );
}

3. Produkta izklājums (app/product/[id]/layout.js)

Šī ir būtiskā daļa, kurā mēs definējam savus slotus. Mēs saņemam komponentus galvenajai produkta lapai un grozam kā props, kas atbilst page.js un @cart/page.js.

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

      
{children}
      
    
  );
}

Šajā piemērā mēs izmantojam vienkāršu flexbox izklājumu, lai novietotu galveno produkta saturu un groza sānu joslu blakus. Prop children saturēs atveidoto izvadi no app/product/[id]/page.js, un cart prop saturēs atveidoto izvadi no app/product/[id]/@cart/page.js.

4. Produkta informācijas lapa (app/product/[id]/page.js)

Šī ir standarta dinamiskā maršruta lapa, kas attēlo produkta informāciju, pamatojoties uz parametru id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Iegūstiet produkta datus, pamatojoties uz ID
  const product = await fetchProduct(id);

  return (
    

      
Produkta informācija
      
{product.name}
      
{product.description}
      
Cena: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Aizstājiet ar savu faktisko datu iegūšanas loģiku
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Produkts ${id}`, description: `Produkta ${id} apraksts`, price: 99.99 });
  }, 500));
}

5. Iepirkumu groza komponents (app/product/[id]/@cart/page.js)

Šis komponents attēlo iepirkumu grozu, kas tiks atveidots @cart slotā.

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

      
Iepirkumu grozs
      
Preces grozā: 3
      Izrakstīšanās
    
  );
}

Paskaidrojums

Kad lietotājs pāriet uz /product/123, Next.js:

1. Atveidos saknes izklājumu (app/layout.js).
2. Atveidos produkta izklājumu (app/product/[id]/layout.js).
3. Produkta izklājumā atveidos produkta informācijas komponentu (app/product/[id]/page.js) propā children.
4. Vienlaikus atveidos iepirkumu groza komponentu (app/product/[id]/@cart/page.js) propā cart.

Rezultāts ir produkta informācijas lapa ar pastāvīgu iepirkumu groza sānu joslu, kas visi atveidoti vienā izklājumā.

Paralēlo maršrutu izmantošanas priekšrocības

• Uzlabota lietotāja pieredze: Izveidojiet interaktīvākus un saistošākus lietotāja interfeisus ar pastāvīgiem elementiem un dinamiskām sadaļām.
• Palielināta koda atkārtota izmantošana: Viegli kopīgojiet komponentus un izklājumus dažādos maršrutos.
• Uzlabota veiktspēja: Ielādējiet un atjauniniet lapas sadaļas neatkarīgi, samazinot pilnīgas lapas atkārtotas atveidošanas nepieciešamību.
• Vienkāršota izstrāde: Pārvaldiet sarežģītus izklājumus un mijiedarbības ar modulārāku un organizētāku struktūru.
• A/B testēšanas iespējas: Viegli testējiet dažādus konkrētu lapu sadaļu variantus, neietekmējot visu lapu.

Apsvērumi un labākā prakse

• Maršrutu konflikti: Esiet uzmanīgi, lai izvairītos no maršrutu konfliktiem starp paralēlajiem maršrutiem. Katram maršruta segmentam jābūt unikālam mērķim un nepārklāties ar citiem segmentiem.
• Izklājuma sarežģītība: Kaut arī paralēlās maršrutēšanas piedāvā elastību, pārmērīga izmantošana var novest pie sarežģītiem izklājumiem, kurus ir grūti uzturēt. Centieties saglabāt līdzsvaru starp elastību un vienkāršību.
• SEO ietekme: Apsveriet paralēlo maršrutu izmantošanas SEO ietekmi, jo īpaši, ja saturs dažādos slotos ir ievērojami atšķirīgs. Nodrošiniet, lai meklētājprogrammas varētu pareizi indeksēt saturu. Izmantojiet kanoniskos URL atbilstoši.
• Datu iegūšana: Pārvaldiet datu iegūšanu uzmanīgi, jo īpaši, strādājot ar vairākām neatkarīgām sadaļām. Apsveriet iespēju izmantot koplietotas datu krātuves vai kešatmiņas mehānismus, lai izvairītos no liekiem pieprasījumiem.
• Pieejamība: Nodrošiniet, ka jūsu paralēlās maršrutēšanas ieviešana ir pieejama visiem lietotājiem, tostarp cilvēkiem ar invaliditāti. Izmantojiet atbilstošus ARIA atribūtus un semantisko HTML, lai nodrošinātu labu lietotāja pieredzi.

Papildu izmantošana: Nosacīta atveidošana un dinamiskie slots

Paralēlās maršrutēšanas neaprobežojas ar statisku slotu definīcijām. Jūs varat arī izmantot nosacītu atveidošanu un dinamiskos slotus, lai izveidotu vēl elastīgākus izklājumus.

Nosacīta atveidošana

Jūs varat nosacīti atveidot dažādus komponentus slotā, pamatojoties uz lietotāju lomām, autentifikācijas statusu vai citiem faktoriem.

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

      
Administratora panelis
      
Pārvaldiet produkta informāciju šeit.
    
  );
}

Šajā piemērā, ja lietotājam ir loma “admin”, AdminPanel komponents tiks atveidots @cart slotā iepirkumu groza vietā.

Dinamiskie slots

Kaut arī mazāk izplatīts, jūs *varat* teorētiski konstruēt slotu nosaukumus dinamiski, bet tas parasti netiek atbalstīts sarežģītības un potenciālo veiktspējas problēmu dēļ. Labāk ir pieturēties pie iepriekš definētiem un labi saprotiem slotu. Ja rodas nepieciešamība pēc dinamiskajiem "slotu", apsveriet alternatīvus risinājumus, piemēram, izmantojot standarta React komponentus ar props un nosacītu atveidošanu.

Reālās pasaules piemēri un lietošanas gadījumi

Izpētīsim dažus reālās pasaules piemērus tam, kā paralēlās maršrutēšanas var izmantot dažāda veida lietojumprogrammās:

• E-komercijas platformas: Iepirkumu groza, ieteikumu vai lietotāja konta informācijas attēlošana līdzās produkta informācijai vai kategoriju lapām.
• Informācijas paneļi: Informācijas paneļu izveidošana ar neatkarīgiem logrīkiem metrisko datu, diagrammu un atskaišu attēlošanai. Katru logrīku var ielādēt un atjaunināt atsevišķi, neietekmējot visu informācijas paneli. Pārdošanas informācijas panelis varētu rādīt ģeogrāfiskos datus vienā paralēlajā maršrutēšanā un produktu veiktspēju citā, ļaujot lietotājam pielāgot to, ko viņš redz, bez pilnīgas lapas pārlādes.
• Sociālo mediju lietojumprogrammas: Tērzēšanas sānu joslas vai paziņojumu paneļa rādīšana līdzās galvenajai plūsmai vai profilu lapām.
• Satura pārvaldības sistēmas (CMS): Priekšskatījuma paneļa vai rediģēšanas rīku nodrošināšana līdzās rediģējamajam saturam. Paralēlā maršrutēšana varētu parādīt tiešo raksta priekšskatījumu, atjauninot reāllaikā, kad tiek veiktas izmaiņas.
• Mācību platformas: Mācību materiālu attēlošana līdzās progresa izsekošanas vai sociālās mijiedarbības funkcijām.
• Finanšu lietojumprogrammas: Reāllaika akciju kotējumu vai portfeļa kopsavilkumu attēlošana līdzās ziņām vai analīzes rakstiem. Iedomājieties finanšu ziņu vietni, kas izmanto paralēlās maršrutēšanas, lai attēlotu reāllaika tirgus datus līdzās jaunākajām ziņu stāstiem, nodrošinot lietotājiem visaptverošu finanšu ainavas skatu.
• Globālie sadarbības rīki: Atļaujot vienlaicīgu dokumentu vai koda rediģēšanu ar pastāvīgām video konferences vai tērzēšanas paneļiem. Izplatītā inženieru komanda Sanfrancisko, Londonā un Tokijā varētu izmantot paralēlās maršrutēšanas, lai reāllaikā strādātu pie viena un tā paša dizaina dokumenta, ar videozvanu pastāvīgi attēlotu sānu joslā, veicinot netraucētu sadarbību dažādās laika zonās.

Secinājums

Next.js Paralēlās maršrutēšanas ir spēcīga funkcija, kas paver jaunu iespēju pasauli dinamisko un elastīgu tīmekļa lietojumprogrammu veidošanai. Ļaujot atveidot vairākas neatkarīgas sadaļas vienā un tajā pašā lapas izklājumā, paralēlās maršrutēšanas ļauj jums izveidot saistošāku lietotāju pieredzi, palielināt koda atkārtotu izmantošanu un vienkāršot izstrādes procesu. Kaut arī ir svarīgi apsvērt potenciālās sarežģītības un ievērot labāko praksi, paralēlo maršrutu apgūšana var ievērojami uzlabot jūsu Next.js izstrādes prasmes un ļaut jums veidot patiesi novatoriskas tīmekļa lietojumprogrammas.

Tā kā Next.js turpina attīstīties, paralēlās maršrutēšanas neapšaubāmi kļūs par arvien svarīgāku rīku izstrādātājiem, kuri vēlas pārbīdīt iespējamā robežas tīmeklī. Eksperimentējiet ar šajā rokasgrāmatā izklāstītajiem konceptiem un atklājiet, kā paralēlās maršrutēšanas var pārveidot jūsu pieeju modernu tīmekļa lietojumprogrammu veidošanai.