Next.js Parallel Routes: Bygge dynamiske sidelayouter

Next.js, et ledende React-rammeverk, utvikler seg stadig for å gi utviklere kraftige verktøy for å bygge moderne webapplikasjoner. En av de mest spennende funksjonene introdusert i nyere versjoner er Parallel Routes. Denne funksjonen lar deg rendre flere uavhengige seksjoner innenfor samme sidelayout, noe som gir enestående fleksibilitet og kontroll over applikasjonens struktur og brukeropplevelse.

Hva er Parallel Routes?

Tradisjonelt sett tilsvarer en rute i Next.js en enkelt sidekomponent. Når du navigerer til en annen rute, blir hele siden rendret på nytt. Parallel Routes bryter med dette paradigmet ved å gjøre det mulig å rendre flere komponenter samtidig innenfor samme layout, hver administrert av sitt eget uavhengige rutesegment. Tenk på det som å dele siden din inn i distinkte seksjoner, hver med sin egen URL og livssyklus, som alle eksisterer side om side på én enkelt skjerm.

Dette åpner for mange muligheter for å skape mer komplekse og dynamiske brukergrensesnitt. For eksempel kan du bruke parallelle ruter til å:

• Vise en vedvarende navigasjonsmeny ved siden av hovedinnholdet.
• Implementere modalvinduer eller sidepaneler uten å påvirke hovedflyten på siden.
• Lage dashbord med uavhengige widgets som kan lastes og oppdateres separat.
• A/B-teste forskjellige versjoner av en komponent uten å påvirke den overordnede sidestrukturen.

Forstå konseptet: Slots

Kjernekonseptet bak Parallel Routes er ideen om «slots». En slot er et navngitt område i layouten din hvor et spesifikt rutesegment blir rendret. Du definerer disse slotsene i app-mappen din ved å bruke @-symbolet etterfulgt av navnet på slot-en. For eksempel representerer @sidebar en slot som heter «sidebar».

Hver slot kan deretter knyttes til et rutesegment. Når brukeren navigerer til en spesifikk rute, vil Next.js rendre komponenten som er knyttet til det rutesegmentet inn i den tilsvarende slot-en i layouten.

Implementering: Et praktisk eksempel

La oss illustrere hvordan Parallel Routes fungerer med et praktisk eksempel. Se for deg at du bygger en e-handelsapplikasjon, og du vil vise en produktdetaljside med et vedvarende sidepanel for handlekurven.

1. Mappestruktur

Først, la oss definere mappestrukturen for applikasjonen vår:

app/
  product/
    [id]/
      @cart/
        page.js  // Handlekurv-komponent
      page.js      // Produktdetalj-komponent
    layout.js   // Produktlayout
  layout.js     // Rotlayout

Her er hva hver fil representerer:

• app/layout.js: Rotlayouten for hele applikasjonen.
• app/product/[id]/layout.js: En layout spesifikk for produktdetaljsiden. Det er her vi vil definere våre slots.
• app/product/[id]/page.js: Hovedkomponenten for produktdetaljer.
• app/product/[id]/@cart/page.js: Handlekurv-komponenten, som vil bli rendret i @cart-slot-en.

2. Rotlayout (app/layout.js)

Rotlayouten inneholder vanligvis elementer som deles på tvers av hele applikasjonen, som for eksempel «header» og «footer».

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Min E-handelsapp
        {children}
        
      
    
  );
}

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

Dette er den avgjørende delen hvor vi definerer våre slots. Vi mottar komponentene for hovedproduktsiden og handlekurven som props, som tilsvarer henholdsvis page.js og @cart/page.js.

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

      
{children}
      
    
  );
}

I dette eksempelet bruker vi en enkel flexbox-layout for å plassere hovedproduktinnholdet og handlekurv-sidepanelet side om side. children-propen vil inneholde den renderede utdataen fra app/product/[id]/page.js, og cart-propen vil inneholde den renderede utdataen fra app/product/[id]/@cart/page.js.

4. Produktdetaljside (app/product/[id]/page.js)

Dette er en standard dynamisk ruteside som viser produktdetaljer basert på id-parameteren.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Hent produktdata basert på ID
  const product = await fetchProduct(id);

  return (
    

      
Produktdetaljer
      
{product.name}
      
{product.description}
      
Pris: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Erstatt med din faktiske datainnhentingslogikk
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Produkt ${id}`, description: `Beskrivelse av Produkt ${id}`, price: 99.99 });
  }, 500));
}

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

Denne komponenten representerer handlekurven, som vil bli rendret i @cart-slot-en.

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

      
Handlekurv
      
Varer i handlekurven: 3
      Til kassen
    
  );
}

Forklaring

Når en bruker navigerer til /product/123, vil Next.js:

1. Rendre rotlayouten (app/layout.js).
2. Rendre produktlayouten (app/product/[id]/layout.js).
3. Innenfor produktlayouten, rendre produktdetalj-komponenten (app/product/[id]/page.js) inn i children-propen.
4. Samtidig, rendre handlekurv-komponenten (app/product/[id]/@cart/page.js) inn i cart-propen.

Resultatet er en produktdetaljside med et vedvarende sidepanel for handlekurven, alt rendret innenfor en enkelt layout.

Fordeler med å bruke Parallel Routes

• Forbedret brukeropplevelse: Skap mer interaktive og engasjerende brukergrensesnitt med vedvarende elementer og dynamiske seksjoner.
• Økt kodegjenbruk: Del komponenter og layouter på tvers av forskjellige ruter på en enklere måte.
• Forbedret ytelse: Last og oppdater seksjoner av siden uavhengig, noe som reduserer behovet for fullstendige sideregenereringer.
• Forenklet utvikling: Administrer komplekse layouter og interaksjoner med en mer modulær og organisert struktur.
• A/B-testingsmuligheter: Test enkelt forskjellige variasjoner av spesifikke sideseksjoner uten å påvirke hele siden.

Hensyn og beste praksis

• Rutekonflikter: Vær forsiktig for å unngå rutekonflikter mellom parallelle ruter. Hvert rutesegment bør ha et unikt formål og ikke overlappe med andre segmenter.
• Layout-kompleksitet: Selv om parallelle ruter tilbyr fleksibilitet, kan overdreven bruk føre til komplekse layouter som er vanskelige å vedlikeholde. Etterstreb en balanse mellom fleksibilitet og enkelhet.
• SEO-implikasjoner: Vurder SEO-implikasjonene ved bruk av parallelle ruter, spesielt hvis innholdet i forskjellige slots er vesentlig forskjellig. Sørg for at søkemotorer kan gjennomsøke og indeksere innholdet korrekt. Bruk kanoniske URL-er på riktig måte.
• Datainnhenting: Håndter datainnhenting nøye, spesielt når du har med flere uavhengige seksjoner å gjøre. Vurder å bruke delte datalagre eller mellomlagringsmekanismer for å unngå overflødige forespørsler.
• Tilgjengelighet: Sørg for at implementeringen av parallelle ruter er tilgjengelig for alle brukere, inkludert de med nedsatt funksjonsevne. Bruk passende ARIA-attributter og semantisk HTML for å gi en god brukeropplevelse.

Avansert bruk: Betinget rendring og dynamiske slots

Parallelle ruter er ikke begrenset til statiske slot-definisjoner. Du kan også bruke betinget rendring og dynamiske slots for å skape enda mer fleksible layouter.

Betinget rendring

Du kan betinget rendre forskjellige komponenter i en slot basert på brukerroller, autentiseringsstatus eller andre faktorer.

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

      
Adminpanel
      
Administrer produktdetaljer her.
    
  );
}

I dette eksempelet, hvis brukeren har rollen 'admin', vil en AdminPanel-komponent bli rendret i @cart-slot-en i stedet for handlekurven.

Dynamiske slots

Selv om det er mindre vanlig, *kan* du teoretisk sett konstruere slot-navn dynamisk, men dette frarådes generelt på grunn av kompleksitet og potensielle ytelsesimplikasjoner. Det er bedre å holde seg til forhåndsdefinerte og lett forståelige slots. Hvis behovet for dynamiske «slots» oppstår, bør du vurdere alternative løsninger som å bruke standard React-komponenter med props og betinget rendring.

Eksempler og bruksområder fra den virkelige verden

La oss utforske noen eksempler fra den virkelige verden på hvordan parallelle ruter kan brukes i forskjellige typer applikasjoner:

• E-handelsplattformer: Vise en handlekurv, anbefalinger eller brukerkontoinformasjon ved siden av produktdetaljer eller kategorisider.
• Dashbord: Lage dashbord med uavhengige widgets for å vise beregninger, diagrammer og rapporter. Hver widget kan lastes og oppdateres separat uten å påvirke hele dashbordet. Et salgsdashbord kan for eksempel vise geografiske data i en parallell rute, og produktytelse i en annen, slik at brukeren kan tilpasse hva de ser uten en fullstendig sideoppdatering.
• Sosiale medier-applikasjoner: Vise et chat-sidepanel eller varslingspanel ved siden av hovedstrømmen eller profilsider.
• Innholdsstyringssystemer (CMS): Tilby et forhåndsvisningspanel eller redigeringsverktøy ved siden av innholdet som redigeres. En parallell rute kan vise en live forhåndsvisning av artikkelen som skrives, som oppdateres i sanntid etter hvert som endringer gjøres.
• Læringsplattformer: Vise kursmateriell sammen med funksjoner for fremdriftssporing eller sosial interaksjon.
• Finansapplikasjoner: Vise sanntids aksjekurser eller porteføljesammendrag ved siden av nyheter eller analyseartikler. Se for deg et finansnyhetsnettsted som bruker parallelle ruter for å vise live markedsdata ved siden av siste nytt, og gir brukerne en helhetlig oversikt over det finansielle landskapet.
• Globale samarbeidsverktøy: Tillate samtidig redigering av dokumenter eller kode med vedvarende videokonferanse- eller chat-paneler. Et distribuert ingeniørteam i San Francisco, London og Tokyo kan bruke parallelle ruter til å jobbe med det samme designdokumentet i sanntid, med en videosamtale som vises vedvarende i et sidepanel, noe som fremmer sømløst samarbeid på tvers av tidssoner.

Konklusjon

Next.js Parallel Routes er en kraftig funksjon som åpner opp en ny verden av muligheter for å bygge dynamiske og fleksible webapplikasjoner. Ved å la deg rendre flere uavhengige seksjoner innenfor samme sidelayout, gjør parallelle ruter det mulig å skape mer engasjerende brukeropplevelser, øke kodegjenbruk og forenkle utviklingsprosessen. Selv om det er viktig å vurdere potensielle kompleksiteter og følge beste praksis, kan mestring av parallelle ruter betydelig forbedre dine Next.js-utviklingsferdigheter og la deg bygge virkelig innovative webapplikasjoner.

Ettersom Next.js fortsetter å utvikle seg, vil Parallel Routes utvilsomt bli et stadig viktigere verktøy for utviklere som ønsker å flytte grensene for hva som er mulig på nettet. Eksperimenter med konseptene som er beskrevet i denne guiden, og oppdag hvordan Parallel Routes kan transformere din tilnærming til å bygge moderne webapplikasjoner.