M

MLOG

Українська

Глибоке занурення в перехоплення маршрутів у Next.js з демонстрацією практичних стратегій реалізації модальних вікон та оверлеїв для покращення користувацького досвіду.

Перехоплення маршрутів у Next.js: Майстерне володіння модальними вікнами та оверлеями

Next.js, популярний фреймворк для React, пропонує потужні функції для створення продуктивних та масштабованих веб-додатків. Однією з таких функцій є перехоплення маршрутів (Interception Routes), що надає витончений спосіб обробки складних сценаріїв маршрутизації, особливо при реалізації модальних вікон та оверлеїв. Цей вичерпний посібник розглядає, як використовувати перехоплення маршрутів для створення безшовного та захопливого користувацького досвіду.

Що таке перехоплення маршрутів?

Перехоплення маршрутів дозволяє перехопити маршрут і відобразити інший інтерфейс користувача, не змінюючи URL-адресу в браузері. Уявіть це як тимчасовий обхідний шлях, що збагачує користувацький досвід. Це особливо корисно для:

Чому варто використовувати перехоплення маршрутів для модальних вікон та оверлеїв?

Традиційні методи обробки модальних вікон та оверлеїв часто включають керування станом у компоненті, що може ускладнювати код і призводити до проблем із продуктивністю. Перехоплення маршрутів пропонує кілька переваг:

Налаштування перехоплення маршрутів у Next.js

Проілюструймо, як реалізувати перехоплення маршрутів на практичному прикладі: створення модального вікна для відображення деталей продукту в додатку для електронної комерції.

Структура проєкту

Спочатку визначимо структуру каталогів. Припустимо, у нас є каталог `products`, де кожен продукт має унікальний ID.

app/
  products/
    [id]/
      page.js       // Сторінка деталей продукту
    @modal/
      [id]/
        page.js   // Вміст модального вікна для деталей продукту
    default.js  // Макет для каталогу продуктів
  page.js           // Головна сторінка

Пояснення

Реалізація коду

1. Головна сторінка (app/page.js)

Ця сторінка відображає список продуктів, кожен з яких має посилання, що відкриває деталі продукту в модальному вікні.

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

const products = [
 { id: '1', name: 'Ноутбук' },
 { id: '2', name: 'Смартфон' },
 { id: '3', name: 'Планшет' },
];

export default function Home() {
 return (
 

 
Список продуктів

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

 

 );
}

2. Сторінка деталей продукту (app/products/[id]/page.js)

Ця сторінка рендерить повну інформацію про продукт. У реальному додатку дані отримувалися б з API або бази даних. Важливо, що вона надає посилання для повернення до початкового списку продуктів.

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

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

 return (
 

 
Деталі продукту

 
ID продукту: {id}

 
Це повна сторінка деталей продукту.

 Назад до списку продуктів
 

 );
}

3. Вміст модального вікна (app/products/@modal/[id]/page.js)

Це найважливіша частина – маршрут перехоплення. Він рендерить вміст модального вікна, використовуючи той самий ID продукту. Зверніть увагу на хук `useParams` для доступу до ID.

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

 

 
Модальне вікно продукту

 
ID продукту: {id}

 
Цей контент рендериться всередині модального вікна!

  history.back()}>Закрити модальне вікно
 

 

 );
}

Примітка: Директива `'use client';` необхідна для інтерактивності на стороні клієнта, особливо при використанні `useParams`.

Стилізація (modal.module.css): Простий CSS-модуль використовується для базових стилів модального вікна. Це вкрай важливо для правильного позиціонування вікна.

/* 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; /* Переконатися, що воно зверху */
}

.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. Макет (app/products/default.js)

Цей макет обгортає маршрут `@modal`, гарантуючи, що він рендериться в контексті продуктів.

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

 {children}
 

 );
}

Як це працює

  1. Коли користувач натискає на посилання продукту на головній сторінці (наприклад, `/products/1`), Next.js розпізнає це як маршрут у каталозі `products`.
  2. Через маршрут перехоплення `@modal`, Next.js перевіряє, чи існує відповідний маршрут у `@modal`.
  3. Якщо збіг знайдено (наприклад, `/products/@modal/1`), Next.js рендерить вміст з `app/products/@modal/[id]/page.js` в межах поточної сторінки. URL-адреса в браузері залишається `/products/1`.
  4. Стилі `modalOverlay` позиціонують модальне вікно поверх основного контенту.
  5. Натискання на "Закрити модальне вікно" використовує `history.back()`, щоб повернутися назад, ефективно закриваючи модальне вікно та повертаючись до попереднього стану.

Просунуті техніки перехоплення маршрутів

1. Обробка кнопки "Назад"

Ключовим аспектом реалізації модальних вікон є забезпечення правильної поведінки кнопки "Назад" у браузері. Коли користувач відкриває модальне вікно, а потім натискає кнопку "Назад", він має закрити модальне вікно і повернутися до попереднього контексту, а не покинути додаток.

Метод `history.back()`, використаний у прикладі, досягає цього ефекту, повертаючись на один крок назад в історії браузера. Однак для складніших сценаріїв може знадобитися реалізувати власний обробник кнопки "Назад", який враховує поточний стан маршрутизації.

2. Динамічний вміст модального вікна

У реальних додатках вміст модального вікна, швидше за все, буде динамічним, отриманим з API або бази даних на основі ID продукту. Ви можете використовувати `fetch` API або бібліотеку для отримання даних, таку як SWR або React Query, всередині модального компонента для завантаження необхідних даних.

// 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}`); // Замініть на свій ендпоінт API
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Завантаження...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... інші деталі продукту ... */}
  history.back()}>Закрити модальне вікно
 

 );
}

3. Вкладені модальні вікна

Маршрути перехоплення можна вкладати для створення складних модальних потоків. Наприклад, користувач може відкрити модальне вікно з деталями продукту, а потім натиснути кнопку, щоб відкрити модальне вікно пов'язаного продукту. Цього можна досягти, створивши додаткові маршрути перехоплення в каталозі `@modal`.

4. Обробка помилок 404

Розглянемо сценарій, коли користувач переходить за URL-адресою модального вікна з недійсним ID продукту (наприклад, `/products/@modal/nonexistent`). Вам слід реалізувати належну обробку помилок, щоб відобразити зручну для користувача сторінку 404 або перенаправити його на дійсну сторінку продукту.

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

// ... (решта компонента)

 if (!product) {
 return 
Продукт не знайдено.
; // Або перенаправити на сторінку 404
 }

// ... (решта компонента)

5. Патерни оверлеїв

Хоча приклади були зосереджені на модальних вікнах, перехоплення маршрутів також можна використовувати для оверлеїв. Замість центрування вмісту, оверлей може з'являтися як бічна панель або панель, що висувається збоку екрана. Стилізація CSS буде іншою, але логіка маршрутизації залишається такою ж.

Реальні приклади та випадки використання

Приклад: Міжнародна платформа електронної комерції Уявіть собі глобальний сайт електронної комерції. Коли користувач натискає на продукт, деталі відкриваються в модальному вікні. URL-адреса змінюється на `/products/[product_id]`, що дозволяє прямі посилання та переваги для SEO. Якщо користувач змінює мову на сторінці модального вікна (наприклад, з англійської на іспанську), деталі продукту завантажуються вибраною мовою, і вміст модального вікна безшовно оновлюється. Крім того, сайт може визначати місцезнаходження користувача (за згодою) і відображати інформацію про доставку, актуальну для його регіону, всередині модального вікна.

Найкращі практики використання перехоплення маршрутів

Альтернативи перехопленню маршрутів

Хоча перехоплення маршрутів пропонує потужне рішення для патернів модальних вікон та оверлеїв, можна розглянути й інші підходи:

Висновок

Перехоплення маршрутів у Next.js надає надійний та елегантний спосіб реалізації патернів модальних вікон та оверлеїв у ваших веб-додатках. Використовуючи цю потужну функцію, ви можете створювати безшовні, дружні до SEO та зручні для користувача досвіди. Хоча існують альтернативні підходи, перехоплення маршрутів пропонує унікальне поєднання переваг, що робить їх цінним інструментом в арсеналі будь-якого розробника Next.js.

Додаткові ресурси