M

MLOG

Magyar

Ismerje meg a Next.js Interception Routes használatát! Gyakorlati stratégiák modális ablakok és átfedések létrehozásához a jobb felhasználói élményért.

Next.js Interception Routes: A modális ablakok és átfedések mesteri alkalmazása

A Next.js, egy népszerű React keretrendszer, hatékony funkciókat kínál a nagy teljesítményű és skálázható webalkalmazások készítéséhez. Az egyik ilyen funkció, a Interception Routes, kifinomult módszert nyújt a komplex útválasztási helyzetek kezelésére, különösen a modális ablakok és átfedő minták megvalósításakor. Ez az átfogó útmutató bemutatja, hogyan használhatjuk ki az Interception Routes-t a zökkenőmentes és lebilincselő felhasználói élmények létrehozásához.

Mik azok az Interception Routes?

Az Interception Routes lehetővé teszi egy útvonal elfogását és egy másik felhasználói felület megjelenítését anélkül, hogy a böngészőben megváltozna az URL. Gondoljunk rá úgy, mint egy ideiglenes kitérőre, amely gazdagítja a felhasználói élményt. Ez különösen hasznos a következő esetekben:

Miért használjunk Interception Routes-t modális ablakokhoz és átfedésekhez?

A modális ablakok és átfedések kezelésének hagyományos módszerei gyakran egy komponensen belüli állapotkezelést foglalnak magukban, ami bonyolulttá válhat és teljesítményproblémákhoz vezethet. Az Interception Routes számos előnyt kínál:

Az Interception Routes beállítása a Next.js-ben

Nézzük meg egy gyakorlati példán keresztül, hogyan valósíthatjuk meg az Interception Routes-t: hozzunk létre egy modális ablakot a termékadatok megjelenítésére egy e-kereskedelmi alkalmazásban.

Projektstruktúra

Először is, határozzuk meg a könyvtárstruktúrát. Tegyük fel, hogy van egy `products` könyvtárunk, ahol minden terméknek egyedi azonosítója van.

app/
  products/
    [id]/
      page.js       // Termékadatlap oldal
    @modal/
      [id]/
        page.js   // Modális tartalom a termékadatokhoz
    default.js  // Layout a products könyvtárhoz
  page.js           // Főoldal

Magyarázat

Kód implementáció

1. Főoldal (app/page.js)

Ez az oldal egy terméklistát jelenít meg, ahol minden termékhez tartozik egy link, amely modális ablakban nyitja meg a termék részleteit.

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

 
Terméklista

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. Termékadatlap (app/products/[id]/page.js)

Ez az oldal a teljes termékadatlapot jeleníti meg. Egy valós alkalmazásban ez adatokat kérne le egy API-ról vagy adatbázisból. Fontos, hogy visszalinkel az eredeti terméklistára.

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

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

 return (
 

 
Termékadatok

 
Termékazonosító: {id}

 
Ez a teljes termékadatlap.

 Vissza a terméklistához
 

 );
}

3. Modális tartalom (app/products/@modal/[id]/page.js)

Ez a kulcsfontosságú rész – az Interception Route. Ugyanazzal a termékazonosítóval jeleníti meg a modális ablak tartalmát. Vegyük észre a `useParams` hook használatát az azonosító eléréséhez.

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

 

 
Termék modális ablak

 
Termékazonosító: {id}

 
Ez a tartalom egy modális ablakban jelenik meg!

  history.back()}>Modális ablak bezárása
 

 

 );
}

Megjegyzés: A `'use client';` direktíva szükséges a kliensoldali interaktivitáshoz, különösen a `useParams` használatakor.

Stílusok (modal.module.css): Egy egyszerű CSS modul szolgál az alapvető modális ablak stílusok beállítására. Ez kulcsfontosságú a modális ablak helyes pozicionálásához.

/* 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; /* Biztosítja, hogy felül legyen */
}

.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. Elrendezés (app/products/default.js)

Ez az elrendezés (layout) beburkolja a `@modal` útvonalat, biztosítva, hogy a termék kontextusán belül jelenjen meg.

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

 {children}
 

 );
}

Hogyan működik?

  1. Amikor egy felhasználó egy termék linkre kattint a főoldalon (pl. `/products/1`), a Next.js ezt a `products` könyvtáron belüli útvonalként ismeri fel.
  2. A `@modal` elfogó útvonal miatt a Next.js ellenőrzi, hogy van-e megfelelő útvonal a `@modal` alatt.
  3. Ha talál egyezést (pl. `/products/@modal/1`), a Next.js a `app/products/@modal/[id]/page.js` tartalmát jeleníti meg az aktuális oldalon belül. A böngészőben az URL `/products/1` marad.
  4. A `modalOverlay` stílusok a modális ablakot az alapul szolgáló tartalom fölé pozicionálják.
  5. A "Modális ablak bezárása" gombra kattintva a `history.back()` metódussal lépünk vissza, ami hatékonyan bezárja a modális ablakot és visszatér az előző állapothoz.

Haladó Interception Route technikák

1. A Vissza gomb kezelése

A modális ablakok implementálásának kulcsfontosságú szempontja a böngésző vissza gombjának megfelelő kezelése. Amikor egy felhasználó megnyit egy modális ablakot, majd a vissza gombra kattint, ideális esetben a modális ablaknak kell bezáródnia, és a felhasználónak az előző kontextusba kell visszatérnie, nem pedig elnavigálnia az alkalmazásból.

A példában használt `history.back()` metódus ezt a hatást éri el azzal, hogy egy lépést visszalép a böngésző előzményeiben. Bonyolultabb esetekben azonban szükség lehet egy egyedi vissza gomb kezelő implementálására, amely figyelembe veszi az aktuális útválasztási állapotot.

2. Dinamikus modális tartalom

Valós alkalmazásokban a modális ablak tartalma valószínűleg dinamikus lesz, amelyet egy API-ból vagy adatbázisból kérünk le a termékazonosító alapján. A `fetch` API-t vagy egy adatlekérő könyvtárat, mint például az SWR-t vagy a React Query-t, használhatjuk a modális komponensen belül a szükséges adatok lekérésére.

// 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}`); // Cserélje le a saját API végpontjára
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Betöltés...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... egyéb termékadatok ... */}
  history.back()}>Modális ablak bezárása
 

 );
}

3. Beágyazott modális ablakok

Az Interception Routes-ok beágyazhatók, hogy komplex modális munkafolyamatokat hozzunk létre. Például egy felhasználó megnyithat egy termékadatok modális ablakot, majd egy gombra kattintva megnyithat egy kapcsolódó termék modális ablakát. Ezt további elfogó útvonalak létrehozásával érhetjük el a `@modal` könyvtáron belül.

4. 404-es hibák kezelése

Vegyük fontolóra azt az esetet, amikor egy felhasználó egy érvénytelen termékazonosítóval rendelkező modális URL-re navigál (pl. `/products/@modal/nonexistent`). Megfelelő hibakezelést kell implementálnunk, hogy egy felhasználóbarát 404-es oldalt jelenítsünk meg, vagy átirányítsuk a felhasználót egy érvényes termékoldalra.

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

// ... (a komponens többi része)

 if (!product) {
 return 
A termék nem található.
; // Vagy átirányítás egy 404-es oldalra
 }

// ... (a komponens többi része)

5. Átfedő minták

Bár a példák a modális ablakokra összpontosítottak, az Interception Routes-t átfedésekre is lehet használni. A tartalom középre igazítása helyett az átfedés megjelenhet oldalsávként vagy egy panelként, amely a képernyő oldaláról csúszik be. A CSS stílusok különböznének, de az útválasztási logika ugyanaz marad.

Valós példák és felhasználási esetek

Példa: Nemzetközi e-kereskedelmi platform Képzeljünk el egy globális e-kereskedelmi oldalt. Amikor egy felhasználó egy termékre kattint, a részletek egy modális ablakban nyílnak meg. Az URL megváltozik `/products/[product_id]`-ra, lehetővé téve a közvetlen linkelést és SEO előnyöket biztosítva. Ha a felhasználó nyelvet vált a modális oldalon (pl. angolról spanyolra), a termékadatok a kiválasztott nyelven töltődnek be, és a modális tartalom zökkenőmentesen frissül. Továbbá az oldal (a felhasználó hozzájárulásával) érzékelheti a felhasználó tartózkodási helyét, és a régiójára vonatkozó szállítási információkat jeleníthet meg a modális ablakban.

Bevált gyakorlatok az Interception Routes használatához

Alternatívák az Interception Routes-ra

Bár az Interception Routes hatékony megoldást kínál a modális és átfedő mintákra, más megközelítések is megfontolhatók:

Összegzés

A Next.js Interception Routes robusztus és elegáns módszert kínál a modális és átfedő minták implementálására webalkalmazásainkban. Ezt a hatékony funkciót kihasználva zökkenőmentes, SEO-barát és felhasználóbarát élményeket hozhatunk létre. Bár léteznek alternatív megközelítések, az Interception Routes az előnyök egyedülálló kombinációját kínálja, ami értékes eszközzé teszi minden Next.js fejlesztő számára.

További források

Next.js Interception Routes: A modális ablakok és átfedések mesteri alkalmazása | MLOG