Free React For Beginners on Telegram: “Паралельні роути в Next.JS, Частина друга

Паралельні роути в Next.JS, Частина друга - максимально простий приклад з багами 😂

😎З тим що таке паралельний роутинг ми умовно розібралися. Тепер давайте подивимось це на простому прикладі - створимо два незалежних віджети які будуть вантажитися паралельно з власною обробкою помилок та стану завантаження:

=> Створіть новий Next.JS проект за допомогою create-next-app@latest parallel-demo

=> В теці app створіть теки @widget1 та @widget2. Назви можуть бути довільними, але обов'язково починатися з @.

Знак @ пояснює Next-у що там будуть паралельні роути. Важливо, що назва такої теки не приймає участі в роутингу. Так шлях app/@widget/login/page.tsx буде розрахований як app/login

=> В кожній з тек створіть файл page.tsx з дефолтним експортом. В компоненті напишіть щось гарне, щоб ви бачили що компоненти відображаються.

=> Тепер відкрийте layout.tsx що лежить теці app та додайте до нього наступний код:

export default function RootLayout({
  widget1,
  widget2,
}) {
  return (
    <html lang="en">
      <body>
        {widget1}
        {widget2}
      </body>
    </html>
  );
}

Зверніть увагу, що тепер наші віджети передані через пропси і мають таку саму назву як і назва теки, що починається з @

=> Тепер створіть новій файл в руті і покладіть туди наступний код:

export function delay({ data = 'hello world', error = '', delay = 1000 } = {}) {
  return new Promise((res, rej) =>
    setTimeout(() => (error ? rej(error) : res(data)), delay)
  );
}

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

=> В перший компонент додайте виклик функції без аргументів, а в другій, передайте якийсь текст у властивість error і не забудьте зробити await:

import { delay } from '../delay';

export default async function W2() {
  const sadString = await delay({ error: 'Sorry bro' });
  return <>W2: {sadString}</>;
}

Тепер у вас на екрані має з'явитися дуже не гарна помилка, яка руйнує весь застосунок:

> Unhandled Runtime Error: Error: Error: Sorry bro

=> Але це дуже просто виправити. В теці другого віджету створіть файл error.tsx з дефолтним експортом і якимось змістом. Збережіть файл і тепер, замість компоненту що не зміг завантажитися, ви побачите красиву, або не дуже помилку. Але весь інший контент залишається цілим і ваш користувач все ще може працювати з застосунком!

Залишився останній крок - індикація завантаження:

=> В кожному з віджетів встановіть delay в 7000 та 4000 відповідно. Тепер ваша сторінка буде вантажитися 7 секунд, що геть не зручно для користувача. Давайте зробимо завантаження паралельним!

=> В теку з кожним віджетом додайте файл loading.tsx з дефолтним експортом. Якщо у вас з'явилася помилка default export is not a react component - перезапустіть сервер, або дайте компонентам різні імена.

❤️ Тепер, після завантаження сторінки, ви побачите, що наші віджети вантажаться індивідуально і виводяться на екран по мірі надходження даних, скажіть краса?

❗️Пам'ятайте, що назви loading.tsx, page.tsx та error.tsx є зарезервованими і змінювати їх не можна.

Код для погратися лежить тут

@reactbeginners