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

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

Що таке паралельні маршрути?

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

Це відкриває багато можливостей для створення більш складних та динамічних користувацьких інтерфейсів. Наприклад, ви можете використовувати паралельні маршрути для:

Відображення постійної панелі навігації поруч з основним контентом.
Реалізації модальних вікон або бічних панелей, не впливаючи на основний потік сторінки.
Створення дашбордів з незалежними віджетами, які можна завантажувати та оновлювати окремо.
A/B тестування різних версій компонента без впливу на загальну структуру сторінки.

Розуміння концепції: Слоти

Основною концепцією паралельних маршрутів є поняття "слотів". Слот — це іменована область у вашому макеті, де рендериться певний сегмент маршруту. Ви визначаєте ці слоти у вашій директорії app, використовуючи символ @, за яким слідує назва слота. Наприклад, @sidebar представляє слот з назвою "sidebar".

Кожен слот може бути пов'язаний із сегментом маршруту. Коли користувач переходить на певний маршрут, Next.js рендерить компонент, пов'язаний з цим сегментом маршруту, у відповідний слот у макеті.

Реалізація: практичний приклад

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

1. Структура директорій

Спочатку визначимо структуру директорій для нашого застосунку:

app/
  product/
    [id]/
      @cart/
        page.js  // Компонент кошика
      page.js      // Компонент з деталями товару
    layout.js   // Макет товару
  layout.js     // Кореневий макет

Ось що представляє кожен файл:

app/layout.js: Кореневий макет для всього застосунку.
app/product/[id]/layout.js: Макет, специфічний для сторінки з детальною інформацією про товар. Саме тут ми будемо визначати наші слоти.
app/product/[id]/page.js: Основний компонент з детальною інформацією про товар.
app/product/[id]/@cart/page.js: Компонент кошика, який буде рендеритися у слоті @cart.

2. Кореневий макет (app/layout.js)

Кореневий макет зазвичай містить елементи, які є спільними для всього застосунку, наприклад, хедери та футери.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        Мій E-commerce застосунок
        {children}
        © 2024
      
    
  );
}

3. Макет товару (app/product/[id]/layout.js)

Це ключова частина, де ми визначаємо наші слоти. Ми отримуємо компоненти для основної сторінки товару та кошика як пропси, що відповідають page.js та @cart/page.js відповідно.

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

У цьому прикладі ми використовуємо простий макет flexbox для розміщення основного контенту товару та бічної панелі кошика поруч. Пропс children міститиме відрендерений результат app/product/[id]/page.js, а пропс cart міститиме відрендерений результат app/product/[id]/@cart/page.js.

4. Сторінка з детальною інформацією про товар (app/product/[id]/page.js)

Це стандартна сторінка динамічного маршруту, яка відображає деталі товару на основі параметра id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Отримання даних товару за ID
  const product = await fetchProduct(id);

  return (
    
      Деталі товару
      {product.name}
      {product.description}
      Ціна: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // Замініть на вашу реальну логіку отримання даних
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Товар ${id}`, description: `Опис Товару ${id}`, price: 99.99 });
  }, 500));
}

5. Компонент кошика (app/product/[id]/@cart/page.js)

Цей компонент представляє кошик, який буде рендеритися у слоті @cart.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    
      Кошик
      Товарів у кошику: 3
      
    
  );
}

Пояснення

Коли користувач переходить на /product/123, Next.js:

Відрендерить кореневий макет (app/layout.js).
Відрендерить макет товару (app/product/[id]/layout.js).
В межах макета товару відрендерить компонент деталей товару (app/product/[id]/page.js) у пропс children.
Одночасно відрендерить компонент кошика (app/product/[id]/@cart/page.js) у пропс cart.

Результатом є сторінка з детальною інформацією про товар з постійною бічною панеллю кошика, все відрендерено в одному макеті.

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

Покращений користувацький досвід: Створюйте більш інтерактивні та захопливі користувацькі інтерфейси з постійними елементами та динамічними секціями.
Підвищення повторного використання коду: Легше ділитися компонентами та макетами між різними маршрутами.
Покращена продуктивність: Завантажуйте та оновлюйте секції сторінки незалежно, зменшуючи потребу в повному перерендерингу сторінки.
Спрощена розробка: Керуйте складними макетами та взаємодіями за допомогою більш модульної та організованої структури.
Можливості A/B тестування: Легко тестуйте різні варіації конкретних секцій сторінки, не впливаючи на всю сторінку.

Що слід враховувати та найкращі практики

Конфлікти маршрутів: Будьте обережні, щоб уникнути конфліктів між паралельними маршрутами. Кожен сегмент маршруту повинен мати унікальне призначення і не перетинатися з іншими сегментами.
Складність макета: Хоча паралельні маршрути пропонують гнучкість, надмірне їх використання може призвести до складних макетів, які важко підтримувати. Прагніть до балансу між гнучкістю та простотою.
Наслідки для SEO: Враховуйте наслідки для SEO при використанні паралельних маршрутів, особливо якщо вміст у різних слотах значно відрізняється. Переконайтеся, що пошукові системи можуть правильно сканувати та індексувати вміст. Використовуйте канонічні URL-адреси належним чином.
Отримання даних: Ретельно керуйте отриманням даних, особливо при роботі з декількома незалежними секціями. Розгляньте можливість використання спільних сховищ даних або механізмів кешування, щоб уникнути зайвих запитів.
Доступність: Переконайтеся, що ваша реалізація паралельних маршрутів доступна для всіх користувачів, включаючи людей з обмеженими можливостями. Використовуйте відповідні атрибути ARIA та семантичний HTML для забезпечення хорошого користувацького досвіду.

Розширене використання: умовний рендеринг та динамічні слоти

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

Умовний рендеринг

Ви можете умовно рендерити різні компоненти у слоті залежно від ролей користувача, статусу автентифікації або інших факторів.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    
      {children}
      
        {userRole === 'admin' ?  : cart}
      
    
  );
}

function AdminPanel() {
  return (
    
      Панель адміністратора
      Керуйте деталями товару тут.
    
  );
}

У цьому прикладі, якщо користувач має роль 'admin', у слоті @cart буде відрендерено компонент AdminPanel замість кошика.

Динамічні слоти

Хоча це менш поширено, теоретично ви *можете* динамічно створювати назви слотів, але це, як правило, не рекомендується через складність та потенційні наслідки для продуктивності. Краще дотримуватися заздалегідь визначених і добре зрозумілих слотів. Якщо виникає потреба в динамічних "слотах", розгляньте альтернативні рішення, такі як використання стандартних компонентів React з пропсами та умовним рендерингом.

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

Розглянемо деякі реальні приклади того, як паралельні маршрути можна використовувати в різних типах застосунків:

Платформи електронної комерції: Відображення кошика, рекомендацій або інформації про обліковий запис користувача поруч із деталями товару або сторінками категорій.
Дашборди: Створення дашбордів з незалежними віджетами для відображення метрик, діаграм та звітів. Кожен віджет можна завантажувати та оновлювати окремо, не впливаючи на весь дашборд. Наприклад, дашборд продажів може показувати географічні дані в одному паралельному маршруті, а продуктивність товарів — в іншому, дозволяючи користувачеві налаштовувати те, що він бачить, без повного перезавантаження сторінки.
Застосунки соціальних мереж: Показ бічної панелі чату або панелі сповіщень поруч з основною стрічкою новин або сторінками профілю.
Системи управління контентом (CMS): Надання панелі попереднього перегляду або інструментів редагування поруч із контентом, що редагується. Паралельний маршрут може відображати живий попередній перегляд статті, що пишеться, оновлюючись у режимі реального часу під час внесення змін.
Навчальні платформи: Відображення матеріалів курсу поруч із відстеженням прогресу або функціями соціальної взаємодії.
Фінансові застосунки: Відображення котирувань акцій у реальному часі або зведень портфеля поруч із новинами або аналітичними статтями. Уявіть собі сайт фінансових новин, який використовує паралельні маршрути для відображення ринкових даних у прямому ефірі поруч із терміновими новинами, надаючи користувачам повну картину фінансового ландшафту.
Глобальні інструменти для спільної роботи: Дозволяють одночасне редагування документів або коду з постійними панелями відеоконференцій або чату. Розподілена інженерна команда в Сан-Франциско, Лондоні та Токіо може використовувати паралельні маршрути для роботи над одним і тим же дизайн-документом у режимі реального часу, з відеодзвінком, що постійно відображається на бічній панелі, сприяючи безперебійній співпраці в різних часових поясах.

Висновок

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

Оскільки Next.js продовжує розвиватися, паралельні маршрути, безсумнівно, стануть все більш важливим інструментом для розробників, які прагнуть розширити межі можливого в Інтернеті. Експериментуйте з концепціями, викладеними в цьому посібнику, і дізнайтеся, як паралельні маршрути можуть трансформувати ваш підхід до створення сучасних вебзастосунків.