M

MLOG

Български

Разгледайте паралелните маршрути в Next.js: ръководство за динамични оформления с независими секции. Научете за внедряване, ползи и добри практики.

Паралелни маршрути в Next.js: Изграждане на динамични оформления на страници

Next.js, водещ React фреймуърк, непрекъснато се развива, за да предостави на разработчиците мощни инструменти за изграждане на модерни уеб приложения. Една от най-вълнуващите функции, въведени в последните версии, са паралелните маршрути. Тази функция ви позволява да рендирате множество независими секции в рамките на едно и също оформление на страницата, предлагайки несравнима гъвкавост и контрол върху структурата и потребителското изживяване на вашето приложение.

Какво представляват паралелните маршрути?

Традиционно, един маршрут в Next.js съответства на един-единствен компонент на страница. Когато навигирате до друг маршрут, цялата страница се рендира отново. Паралелните маршрути нарушават тази парадигма, като ви позволяват да рендирате множество компоненти едновременно в рамките на едно и също оформление, като всеки от тях се управлява от собствен независим сегмент на маршрута. Мислете за това като за разделяне на страницата ви на отделни секции, всяка със собствен URL адрес и жизнен цикъл, които съществуват съвместно на един екран.

Това отключва много възможности за създаване на по-сложни и динамични потребителски интерфейси. Например, можете да използвате паралелни маршрути, за да:

Разбиране на концепцията: Слотове

Основната концепция зад паралелните маршрути е понятието за „слотове“ (slots). Слотът е именувана област във вашето оформление, където се рендира конкретен сегмент от маршрута. Дефинирате тези слотове във вашата app директория, като използвате символа @, последван от името на слота. Например @sidebar представлява слот с име „sidebar“.

Всеки слот след това може да бъде свързан със сегмент от маршрута. Когато потребителят навигира до конкретен маршрут, Next.js ще рендира компонента, свързан с този сегмент от маршрута, в съответния слот в оформлението.

Внедряване: Практически пример

Нека илюстрираме как работят паралелните маршрути с практически пример. Представете си, че изграждате приложение за електронна търговия и искате да покажете страница с подробности за продукта с постоянна странична лента за пазарската количка.

1. Директорийна структура

Първо, нека дефинираме директорийната структура за нашето приложение:

app/
  product/
    [id]/
      @cart/
        page.js  // Компонент за пазарска количка
      page.js      // Компонент с подробности за продукта
    layout.js   // Оформление на продукта
  layout.js     // Основно оформление

Ето какво представлява всеки файл:

2. Основно оформление (app/layout.js)

Основното оформление обикновено съдържа елементи, които се споделят в цялото приложение, като хедъри и футъри.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Моето приложение за електронна търговия

        {children}
        
© 2024

      
    
  );
}

3. Оформление на продукта (app/product/[id]/layout.js)

Това е ключовата част, където дефинираме нашите слотове. Получаваме компонентите за основната страница на продукта и количката като пропове (props), съответстващи на 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: `Продукт ${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 ще:

  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.

Резултатът е страница с подробности за продукта с постоянна странична лента за пазарска количка, като всичко това е рендирано в едно-единствено оформление.

Предимства от използването на паралелни маршрути

Съображения и добри практики

Разширено използване: Условно рендиране и динамични слотове

Паралелните маршрути не се ограничават до статични дефиниции на слотове. Можете също така да използвате условно рендиране и динамични слотове, за да създадете още по-гъвкави оформления.

Условно рендиране

Можете условно да рендирате различни компоненти в даден слот въз основа на потребителски роли, статус на удостоверяване или други фактори.

// 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“, в слота @cart ще бъде рендиран компонент AdminPanel вместо пазарската количка.

Динамични слотове

Въпреки че е по-рядко срещано, теоретично *можете* да конструирате имена на слотове динамично, но това обикновено не се препоръчва поради сложността и потенциалните последици за производителността. По-добре е да се придържате към предварително дефинирани и добре разбираеми слотове. Ако възникне необходимост от динамични „слотове“, обмислете алтернативни решения като използване на стандартни React компоненти с пропове и условно рендиране.

Примери от реалния свят и случаи на употреба

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

Заключение

Паралелните маршрути в Next.js са мощна функция, която отваря нов свят от възможности за изграждане на динамични и гъвкави уеб приложения. Като ви позволяват да рендирате множество независими секции в рамките на едно и също оформление на страницата, паралелните маршрути ви дават възможност да създавате по-ангажиращи потребителски изживявания, да увеличите преизползваемостта на кода и да опростите процеса на разработка. Въпреки че е важно да се вземат предвид потенциалните сложности и да се следват добрите практики, овладяването на паралелните маршрути може значително да подобри вашите умения за разработка с Next.js и да ви позволи да създавате наистина иновативни уеб приложения.

С непрекъснатото развитие на Next.js, паралелните маршрути несъмнено ще се превърнат във все по-важен инструмент за разработчиците, които искат да разширят границите на възможното в уеб. Експериментирайте с концепциите, очертани в това ръководство, и открийте как паралелните маршрути могат да преобразят вашия подход към изграждането на модерни уеб приложения.