VIDEO
HIGHLIGHT
Log InSign up
Next.js 15 Tutorial - 16 - Multiple Root Layouts
SummaryTranscriptChat

Next.js 15 Tutorial - 16 - Multiple Root Layouts

Создание многоуровневых макетов в Next.js

Введение в проект

  • Автор переключился на новый проект для упрощения демонстрации создания приложения с маршрутами для страниц Revenue и Customers, а также логина и регистрации.
  • Задача состоит в том, чтобы страницы Revenue и Customers имели заголовок и подвал, тогда как страницы логина и регистрации должны оставаться чистыми и минималистичными.

Проблема с единственным корневым макетом

  • Если добавить заголовок и подвал в файл root layout.tsx, они будут применены ко всем страницам приложения.
  • Обсуждается необходимость различных макетов для разных частей приложения, что приводит к использованию нескольких корневых макетов.

Использование групп маршрутов

  • Группы маршрутов помогают организовать структуру проекта без изменения URL. Они позволяют применять макеты выборочно к определённым частям приложения.
  • Создаются две группы маршрутов: одна для маркетинга (Revenue и Customers), другая — для логина и регистрации.

Перемещение файлов макета

  • Файл root layout.tsx перемещается из папки app в группу маршрутов маркетинга с обновлением импортов; его название меняется на marketing layout.
  • Создаётся новый макет в группе O: файл копируется и переименовывается в Au layout, при этом удаляется заголовок, остаётся только подвал.

Проверка изменений

  • После сохранения файлов возникает ошибка: page.tsx не имеет корневого макета. Необходимо переместить этот файл в группу маршрутов маркетинга.
  • При проверке браузера видно, что URL остались прежними; страницы логина и регистрации теперь имеют только подвал, а страницы клиентов — оба элемента (заголовок и подвал).

Заключение о мощи групп маршрутов

Playlists: Next.js 15 Tutorial - Beginner to Advanced
Video description

Mastering Multiple Root Layouts with Route Groups in Next.js In this video, we'll explore how to create and manage multiple root layouts in a Next.js project using route groups. Learn how to apply different layouts to various sections of your app, such as revenue and customers, while keeping login and register pages clean and minimal. This step-by-step tutorial will help you understand the power and flexibility of route groups, making your code more organized and maintainable. 📔 GitHub Repo - https://github.com/gopinav/Next.js-15-Tutorials 📘 Frontend Interview Course - https://learn.codevolution.dev/ 💖 Support UPI - https://support.codevolution.dev/ 💖 Support Paypal - https://www.paypal.me/Codevolution 💾 Github - https://github.com/gopinav 📱 Follow Codevolution + Twitter - https://twitter.com/CodevolutionWeb + Facebook - https://www.facebook.com/codevolutionweb 📫 Business - codevolution.business@gmail.com 00:00 Introduction and Project Setup 00:39 Understanding Multiple Root Layouts 01:09 Implementing Route Groups 01:31 Creating and Moving Layout Files 02:04 Handling Errors and Finalizing Layouts 02:45 The Power of Route Groups in Next.js 03:03 Exploring Metadata in Layouts 03:17 Supporting the Channel