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

Next.js, ведущий фреймворк React, постоянно развивается, чтобы предоставить разработчикам мощные инструменты для создания современных веб-приложений. Одна из самых интересных функций, представленных в последних версиях, — это параллельные маршруты. Эта функция позволяет отображать несколько независимых разделов в одном и том же макете страницы, предлагая беспрецедентную гибкость и контроль над структурой и пользовательским опытом вашего приложения.

Что такое параллельные маршруты?

Традиционно маршрут в 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 (
    
      
        
Мое приложение электронной коммерции
        {children}
        
      
    
  );
}

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

Это важная часть, где мы определяем наши слоты. Мы получаем компоненты для основной страницы продукта и корзины в качестве свойств, соответствующих page.js и @cart/page.js соответственно.

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

      
{children}
      
    
  );
}

В этом примере мы используем простой макет 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: `Product ${id}`, description: `Description of Product ${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 выполнит следующее:

1. Отобразит корневой макет (app/layout.js).
2. Отобразит макет продукта (app/product/[id]/layout.js).
3. Внутри макета продукта отобразит компонент с информацией о продукте (app/product/[id]/page.js) в свойство children.
4. Одновременно отобразит компонент корзины покупок (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}
      
    
  );
}

function AdminPanel() {
  return (
    

      
Админ-панель
      
Управляйте информацией о продукте здесь.
    
  );
}

В этом примере, если у пользователя роль «admin», компонент AdminPanel будет отображаться в слоте @cart вместо корзины покупок.

Динамические слоты

Хотя это менее распространено, теоретически вы *можете* создавать имена слотов динамически, но это обычно не рекомендуется из-за сложности и потенциальных последствий для производительности. Лучше придерживаться предопределенных и хорошо понятных слотов. Если возникает необходимость в динамических «слотах», рассмотрите альтернативные решения, такие как использование стандартных компонентов React со свойствами и условным рендерингом.

Примеры из реальной жизни и варианты использования

Давайте рассмотрим некоторые примеры из реальной жизни использования параллельных маршрутов в различных типах приложений:

• Платформы электронной коммерции: Отображение корзины покупок, рекомендаций или информации об учетной записи пользователя рядом с информацией о продукте или страницами категорий.
• Информационные панели: Создание информационных панелей с независимыми виджетами для отображения метрик, диаграмм и отчетов. Каждый виджет можно загружать и обновлять отдельно, не влияя на всю информационную панель. Информационная панель продаж может отображать географические данные в одном параллельном маршруте, а производительность продукта — в другом, что позволяет пользователю настраивать отображаемые данные без полной перезагрузки страницы.
• Приложения социальных сетей: Отображение боковой панели чата или панели уведомлений рядом с основной лентой или страницами профилей.
• Системы управления контентом (CMS): Предоставление панели предварительного просмотра или инструментов редактирования рядом с редактируемым контентом. Параллельный маршрут может отображать предварительный просмотр статьи в реальном времени, обновляемый в реальном времени по мере внесения изменений.
• Обучающие платформы: Отображение учебных материалов рядом с функциями отслеживания прогресса или социального взаимодействия.
• Финансовые приложения: Отображение котировок акций в реальном времени или сводок портфелей рядом с новостями или аналитическими статьями. Представьте себе новостной финансовый веб-сайт, использующий параллельные маршруты для отображения данных рынка в реальном времени вместе с новостными сюжетами, предоставляя пользователям всесторонний обзор финансового ландшафта.
• Глобальные инструменты совместной работы: Разрешение одновременного редактирования документов или кода с постоянными панелями видеоконференций или чата. Распределенная инженерная команда в Сан-Франциско, Лондоне и Токио может использовать параллельные маршруты для работы над одним и тем же дизайнерским документом в реальном времени, с видеозвонком, постоянно отображаемым на боковой панели, что способствует бесперебойному сотрудничеству в разных часовых поясах.

Заключение

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

Поскольку Next.js продолжает развиваться, параллельные маршруты, несомненно, станут все более важным инструментом для разработчиков, стремящихся расширить границы возможного в Интернете. Поэкспериментируйте с концепциями, изложенными в этом руководстве, и узнайте, как параллельные маршруты могут преобразовать ваш подход к созданию современных веб-приложений.