M

MLOG

Eesti

Põhjalik ülevaade Next.js'i Interception Routes funktsioonist, tutvustades praktilisi modaalide ja ülekatete rakendusstrateegiaid parema kasutajakogemuse saavutamiseks.

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:

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:

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

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

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

Alternatiivid Interception Routes'ile

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

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