Next.js'i Interception Routes: Modaalide ja ülekatete mustrite valdamine

Next.js, populaarne Reacti raamistik, pakub võimsaid funktsioone jõudlaste ja skaleeritavate veebirakenduste ehitamiseks. Üks selline funktsioon, Interception Routes, pakub keerukat viisi keeruliste marsruutimistsenaariumite käsitlemiseks, eriti modaalide ja ülekatete mustrite rakendamisel. See põhjalik juhend uurib, kuidas kasutada Interception Routes funktsiooni, et luua sujuvaid ja kaasahaaravaid kasutajakogemusi.

Mis on Interception Routes?

Interception Routes võimaldab teil marsruudi vahele segada ja renderdada teistsugust kasutajaliidest, muutmata URL-i brauseris. Mõelge sellest kui ajutisest ümbersõidust, mis rikastab kasutajakogemust. See on eriti kasulik:

• Modaalid: sisu kuvamine modaalaknas ilma uuele lehele navigeerimata.
• Ülekatted: lisateabe või juhtelementide kuvamine olemasoleva sisu peal.
• Pildigaleriid: sujuva, leheküljelaadse navigeerimiskogemuse loomine pildigaleriis.
• Sisseelamisvood: kasutajate juhendamine mitmeastmelises protsessis ilma täielike lehe uuestilaadimisteta.

Miks kasutada Interception Routes funktsiooni modaalide ja ülekatete jaoks?

Traditsioonilised meetodid modaalide ja ülekatete käsitlemiseks hõlmavad sageli oleku haldamist komponendi sees, mis võib muutuda keeruliseks ja põhjustada jõudlusprobleeme. Interception Routes pakub mitmeid eeliseid:

• Parem SEO: Modaalides või ülekatetes kuvatav sisu on endiselt otsingumootoritele kättesaadav, kuna see on seotud konkreetse marsruudiga.
• Jagatavad URL-id: Kasutajad saavad jagada otseviidet modaali või ülekatte sisule.
• Brauseri ajalugu: Brauseri tagasi- ja edasi-nupud töötavad ootuspäraselt, võimaldades kasutajatel navigeerida läbi modaali ajaloo.
• Lihtsustatud olekuhaldus: Vähenenud keerukus modaali nähtavuse oleku haldamisel, mis viib puhtama ja paremini hooldatava koodini.
• Parem jõudlus: Vältige tarbetuid uuesti renderdamisi, värskendades ainult modaali sisu.

Interception Routes'i seadistamine Next.js'is

Illustreerime, kuidas rakendada Interception Routes funktsiooni praktilise näitega: modaali loomine toote üksikasjade kuvamiseks e-kaubanduse rakenduses.

Projekti struktuur

Kõigepealt määratleme kaustade struktuuri. Oletame, et meil on `products` kaust, kus igal tootel on unikaalne ID.

app/
  products/
    [id]/
      page.js       // Toote üksikasjade leht
    @modal/
      [id]/
        page.js   // Modaalne sisu toote üksikasjade jaoks
    default.js  // Paigutus 'products' kausta jaoks
  page.js           // Avaleht

Selgitus

• `app/products/[id]/page.js`: See on toote üksikasjade pealeht.
• `app/products/@modal/[id]/page.js`: See määratleb Interception Route'i, mis renderdab modaalse sisu. Pange tähele `@modal` konventsiooni – see on ülioluline, et Next.js tunneks ära vahelt lõikava marsruudi.
• `app/products/default.js`: See on `products` kausta paigutus. `@modal` marsruut tuleb selle paigutuse sisse mähkida.
• `app/page.js`: Avaleht, mis sisaldab linke meie toodetele.

Koodi rakendamine

1. Avaleht (app/page.js)

See leht kuvab toodete loendi, millest igaühel on link, mis avab toote üksikasjad modaalis.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Product List
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. Toote üksikasjade leht (app/products/[id]/page.js)

See leht renderdab täielikud toote üksikasjad. Päris rakenduses hangitaks andmed API-st või andmebaasist. Oluline on see, et see pakub linki tagasi algsesse tootenimekirja.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Product Details
 
Product ID: {id}
 
This is the full product details page.
 Back to Product List
 
 );
}

3. Modaalne sisu (app/products/@modal/[id]/page.js)

See on ülioluline osa – Interception Route. See renderdab modaalse sisu, kasutades sama toote ID-d. Pange tähele `useParams` hook'i kasutamist ID kättesaamiseks.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Product Modal
 
Product ID: {id}
 
This content is rendered within a modal!
  history.back()}>Close Modal
 
 
 );
}

Märkus: `'use client';` direktiiv on vajalik kliendipoolse interaktiivsuse jaoks, eriti `useParams` kasutamisel.

Stiilid (modal.module.css): Lihtsat CSS-moodulit kasutatakse modaali põhiliseks stiliseerimiseks. See on ülioluline modaali õigeks positsioneerimiseks.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Veenduge, et see oleks peal */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Paigutus (app/products/default.js)

See paigutus ümbritseb `@modal` marsruuti, tagades selle renderdamise toote kontekstis.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

Kuidas see töötab

1. Kui kasutaja klõpsab avalehel toote lingil (nt `/products/1`), tunneb Next.js selle ära kui marsruudi `products` kausta sees.
2. Kuna on olemas `@modal` vahelt lõikav marsruut, kontrollib Next.js, kas `@modal` all on vastav marsruut.
3. Kui leitakse vaste (nt `/products/@modal/1`), renderdab Next.js sisu failist `app/products/@modal/[id]/page.js` praeguse lehe sees. URL brauseris jääb `/products/1`.
4. `modalOverlay` stiilid positsioneerivad modaali aluseks oleva sisu peale.
5. Nupule "Close Modal" klõpsamine kasutab `history.back()` tagasi navigeerimiseks, sulgedes tõhusalt modaali ja naastes eelmisesse olekusse.

Interception Route'i täiustatud tehnikad

1. Tagasi-nupu käsitlemine

Modaali rakendamise oluline aspekt on brauseri tagasi-nupu korrektse käitumise tagamine. Kui kasutaja avab modaali ja klõpsab seejärel tagasi-nuppu, peaks ta ideaalis sulgema modaali ja naasma eelmisesse konteksti, mitte rakendusest eemale navigeerima.

Näites kasutatud `history.back()` meetod saavutab selle efekti, navigeerides brauseri ajaloos ühe sammu tagasi. Keerulisemate stsenaariumite puhul võib aga olla vajalik rakendada kohandatud tagasi-nupu käsitleja, mis arvestab praegust marsruutimise olekut.

2. Dünaamiline modaalne sisu

Päris rakendustes on modaali sisu tõenäoliselt dünaamiline, hangitud API-st või andmebaasist toote ID alusel. Saate kasutada `fetch` API-d või andmete hankimise teeki nagu SWR või React Query modaali komponendis vajalike andmete hankimiseks.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Asenda oma API otspunktiga
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Loading...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... other product details ... */}
  history.back()}>Close Modal
 
 );
}

3. Pesastatud modaalid

Interception Routes'e saab pesastada, et luua keerukaid modaalseid töövooge. Näiteks võib kasutaja avada toote üksikasjade modaali ja seejärel klõpsata nupul, et avada seotud toote modaal. Seda saab saavutada, luues `@modal` kausta sees täiendavaid vahelt lõikavaid marsruute.

4. 404 vigade käsitlemine

Mõelge stsenaariumile, kus kasutaja navigeerib modaali URL-ile kehtetu toote ID-ga (nt `/products/@modal/nonexistent`). Peaksite rakendama korrektse veakäsitluse, et kuvada kasutajasõbralik 404 leht või suunata kasutaja kehtivale tootelehele.

// app/products/@modal/[id]/page.js

// ... (ülejäänud komponent)

 if (!product) {
 return 
Toodet ei leitud.
; // Või suunake 404 lehele
 }

// ... (ülejäänud komponent)

5. Ülekatete mustrid

Kuigi näited on keskendunud modaalidele, saab Interception Routes'e kasutada ka ülekatete jaoks. Sisu tsentreerimise asemel võib ülekate ilmuda külgribana või paneelina, mis libiseb ekraani küljelt sisse. CSS-stiilid oleksid erinevad, kuid marsruutimisloogika jääb samaks.

Reaalse maailma näited ja kasutusjuhud

• E-kaubandus: toote üksikasjade, ostukorvi kokkuvõtete või kassavoo kuvamine modaalis või ülekattes.
• Sotsiaalmeedia: piltide eelvaadete, kommentaaride jaotiste või kasutajaprofiilide näitamine modaalis.
• Dokumendihaldus: dokumendi eelvaadete, redigeerimisvahendite või versiooniajaloo kuvamine ülekattes.
• Kaardirakendused: asukoha üksikasjade, huvipunktide või marsruuditeabe näitamine ülekattes.
• CRM-süsteemid: kontaktandmete, tegevuslogide või müügivõimaluste kuvamine modaalis.

Näide: Rahvusvaheline e-kaubanduse platvorm Kujutage ette ülemaailmset e-kaubanduse saiti. Kui kasutaja klõpsab tootel, avanevad üksikasjad modaalis. URL muutub `/products/[product_id]`, võimaldades otse linkimist ja SEO eeliseid. Kui kasutaja vahetab keelt modaalilehel (nt inglise keelest hispaania keelde), hangitakse toote üksikasjad valitud keeles ja modaali sisu uueneb sujuvalt. Lisaks võiks sait tuvastada kasutaja asukoha (nõusolekul) ja kuvada modaalis tema piirkonnale vastavat saatmisteavet.

Parimad praktikad Interception Routes'i kasutamiseks

• Hoidke modaali sisu lühike: vältige modaali ülekoormamist liiga rohke teabega. Keskenduge oluliste üksikasjade esitamisele.
• Pakkuge selget navigeerimist: tagage, et kasutajad saaksid modaali hõlpsalt sulgeda ja naasta eelmisesse konteksti.
• Optimeerige mobiilile: kujundage modaali paigutus reageerivaks ja kasutajasõbralikuks väiksematel ekraanidel.
• Testige põhjalikult: testige modaali käitumist erinevates brauserites ja seadmetes, et tagada ühtlane kogemus.
• Arvestage ligipääsetavusega: rakendage korralikud ARIA atribuudid ja klaviatuurinavigatsioon, et muuta modaal puuetega kasutajatele ligipääsetavaks.

Alternatiivid Interception Routes'ile

Kuigi Interception Routes pakub võimsat lahendust modaalide ja ülekatete mustrite jaoks, võib kaaluda ka teisi lähenemisviise:

• Traditsiooniline olekuhaldus: Reacti `useState` hook'i või olekuhaldusteegi nagu Redux või Zustand kasutamine modaali nähtavuse kontrollimiseks. See on lihtsam väga lihtsate modaalide rakenduste puhul, kuid muutub suuremas mastaabis raskemini hallatavaks.
• Kolmandate osapoolte modaaliteegid: eelnevalt ehitatud modaalkomponentide kasutamine teekidest nagu React Modal või Material UI. Need võivad pakkuda kiiret lahendust, kuid võivad piirata kohandamisvõimalusi.
• Kliendipoolsed marsruutimisteegid: teeke nagu React Router saab kasutada kliendipoolse marsruutimise ja modaali nähtavuse haldamiseks.

Kokkuvõte

Next.js'i Interception Routes pakub tugevat ja elegantset viisi modaalide ja ülekatete mustrite rakendamiseks teie veebirakendustes. Seda võimsat funktsiooni kasutades saate luua sujuvaid, SEO-sõbralikke ja kasutajasõbralikke kogemusi. Kuigi on olemas alternatiivseid lähenemisviise, pakub Interception Routes ainulaadset eeliste kombinatsiooni, mis teeb sellest väärtusliku tööriista iga Next.js'i arendaja arsenalis.

Lisamaterjalid

• Next.js Interception Routes dokumentatsioon
• Reacti dokumentatsioon