Команда Vercel обрала простий підхід до маршрутизації. Вони вирішили використовувати папки як маршрути. Це означає, що чим більше папок ви додаєте до вашої папки app, тим більше маршрутів ви отримаєте. Додатково, якщо ви створите нову папку всередині іншої папки (маршруту), ви отримаєте вкладені маршрути. Щоб краще зрозуміти ці концепції, радимо переглянути зображення нижче.

Ми розібралися зі структурою папок, а тепер давайте розглянемо файли, які знаходяться в цих папках. Next.js підтримує два різних типи файлів: page.tsx та layout.tsx. Відмінність полягає в їхніх ролях:

• layout.tsx відповідає за обгортання спеціальних елементів інтерфейсу, які спільні для кількох сторінок;
• Натомість, page.tsx відповідає за інтерфейс, специфічний для поточного маршруту, динамічно реагуючи на зміни URL. Він відображає візуальне представлення, пов'язане з унікальним контентом і функціоналом, характерним для конкретного маршруту.

Повертаємося до проєкту

Створимо вкладений маршрут під назвою /dashboard для нашого застосунку. Виконайте наступні кроки:

1. Створіть нову папку dashboard всередині папки app;
2. У новоствореній папці dashboard створіть новий файл з назвою page.tsx;
3. Скопіюйте та вставте наступний вміст у файл page.tsx.

Після виконання всіх необхідних кроків відкрийте наступну URL-адресу http://localhost:3000/dashboard. Ви повинні побачити створену сторінку (текст Dashboard Page).

У наступному розділі ми продовжимо роботу над сторінками. Але не хвилюйтеся, ми ще не закінчили.