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

У вас, как у организатора фестиваля, есть важная задача. Вы должны убедиться, что каждая группа выступает на правильной сцене и что рок-группы не оказываются на джазовой сцене, а поп-группы — на кантри-сцене. Это сложная задача, требующая тщательного планирования и организации.

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

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

Механика групп маршрутов

Создание группы маршрутов в Next.js похоже на создание новой сцены на музыкальном фестивале. Вы просто заключаете имя папки в круглые скобки, например (genre). Это похоже на выделение определенной области на вашем фестивале для определенного музыкального жанра. Например, на вашем фестивале может быть (rock) и (jazz) сцены. Несмотря на то, что это разные сцены, карта фестиваля (URL-пути) остается прежней. Зрители видят ту же карту фестиваля, но за кулисами у вас более организованная установка.

Давайте проиллюстрируем это на примере кода:

// Without Route Group
pages/
├─ rock/
│  ├─ band1.js
│  └─ band2.js
└─ jazz/
   ├─ band3.js
   └─ band4.js

В этой структуре пути URL будут /rock/band1, /rock/band2, /jazz/band3 и /jazz/band4. Это похоже на отдельные сцены для рока и джаза, когда группы выступают на своих сценах. Зрители точно знают, где они находятся — на рок-сцене смотрят группу1 или на джазовой сцене смотрят группу3.

// With Route Group
pages/
├─ (rock)/
│  ├─ band1.js
│  └─ band2.js
└─ (jazz)/
   ├─ band3.js
   └─ band4.js

С группами маршрутов URL-пути будут /band1, /band2, /band3 и /band4, даже если группы находятся в папках разных жанров. Это как иметь одну сцену, на которой выступают рок- и джаз-группы, но зрители видят только ту группу, ради которой они пришли. Они смотрят группу1, но им не нужно знать, что группа1 является частью рок-жанра за кулисами.

Другими словами, группы маршрутов позволяют вам организовывать файлы в папки (этапы) для вашего удобства, не затрагивая URL-пути (карту фестиваля), которые видят пользователи. Это может упростить управление вашим приложением, особенно по мере роста его сложности. Это мощный инструмент для обеспечения бесперебойной работы вашего фестиваля (приложения), а также беспрепятственного взаимодействия с аудиторией (пользователями).

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

Маршрутные группы похожи на закулисье на музыкальном фестивале. Они позволяют вам организовывать и управлять вещами, не нарушая карту фестиваля (URL-пути). Они полезны для:

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

Ключевые моменты, которые следует помнить о группах маршрутов

  • Именование групп маршрутов предназначено только для закулисной организации. Это все равно, что называть свои закулисные зоны; имена приведены для справки и не влияют на карту фестиваля (URL-пути). Это помогает держать вещи организованными и простыми в управлении.
  • Бэнды, включающие группу маршрутов, не должны разрешаться в тот же URL-путь, что и другие бэнды. Это как убедиться, что ваши закулисные зоны не ведут на одну и ту же сцену. Это предотвращает любую путаницу или конфликт в графике производительности.
  • Если вы используете несколько основных этапов без файла layout.js верхнего уровня, ваш файл home page.js должен быть определен в одной из групп маршрутов. Это как иметь главный вход на каждую главную сцену. Это гарантирует, что зрители могут легко найти сцену, которую они ищут.
  • Навигация по нескольким основным этапам приведет к полной загрузке страницы. Это как перейти с главной сцены рока на главную сцену джаза; вам нужно пройти через территорию фестиваля (полная загрузка страницы), а не просто перемещаться за кулисы. Это важно помнить, так как это влияет на производительность и взаимодействие с пользователем вашего приложения.

Организуйте маршруты, не влияя на путь URL

Группы маршрутов в Next.js позволяют организовывать маршруты, не влияя на путь URL. Это похоже на закулисные зоны вашего музыкального фестиваля, которые не влияют на карту фестиваля. Например, у вас может быть область (marketing) и область (shop). Несмотря на то, что эти области разделены, карта фестиваля остается прежней. Вы можете создать отдельный макет для каждой области, добавив файл layout.js в их папки.

Выбор определенных сегментов в макете

С помощью групп маршрутов вы можете выбрать определенные маршруты в макете. Это похоже на наличие VIP-зоны на музыкальном фестивале для определенных групп. Например, у вас может быть область (shop) с маршрутами account и cart. Эти маршруты имеют одинаковую компоновку, как группы в VIP-зоне используют одни и те же ресурсы. Маршруты за пределами группы, такие как checkout, не имеют общего макета, как и маршруты за пределами VIP-зоны, не разделяют ресурсы VIP.

Создание нескольких корневых макетов

Группы маршрутов также позволяют создавать несколько корневых макетов. Это похоже на наличие нескольких основных сцен на музыкальном фестивале, каждая со своей уникальной обстановкой. Например, у вас может быть этап (marketing) и этап (shop), каждый со своим собственным файлом layout.js. Это полезно для разделения приложения на разделы с совершенно другим пользовательским интерфейсом или опытом. Теги <html> и <body> необходимо добавить в каждый корневой макет.

Хорошо знать

  • Именование групп маршрутов не имеет особого значения, кроме как для организации. Они не влияют на путь URL. Это все равно, что называть свои закулисные зоны; имена приведены для справки и не влияют на карту фестиваля.
  • Маршруты, включающие группу маршрутов, не должны разрешаться в тот же путь URL, что и другие маршруты. Например, поскольку группы маршрутов не влияют на структуру URL, (marketing)/about/page.js и (shop)/about/page.js будут преобразованы в /about и вызовут ошибку. Это все равно, что убедиться, что ваши закулисные зоны не ведут на одну и ту же сцену.
  • Если вы используете несколько корневых макетов без файла layout.js верхнего уровня, ваш домашний файл page.js должен быть определен в одной из групп маршрутов, например: app/(marketing)/page.js. Это как иметь главный вход на каждую главную сцену.
  • Навигация по нескольким корневым макетам приведет к полной загрузке страницы (в отличие от навигации на стороне клиента). Например, переход от /cart, использующего app/(shop)/layout.js, к /blog, использующему app/(marketing)/layout.js, приведет к полной загрузке страницы. Это относится только к нескольким корневым макетам. Это похоже на переход с главной сцены рока на главную сцену джаза; вам нужно пройти через территорию фестиваля (полная загрузка страницы), а не просто перемещаться за кулисы.

Заключение

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

Помните, что ключом к эффективному использованию групп маршрутов является поддержание организованности и управляемости за кулисами, не затрагивая пути URL-адресов, с которыми сталкиваются пользователи. Это обеспечивает беспрепятственный пользовательский опыт, а также делает работу разработчика более приятной и менее напряженной.

Продолжая свое путешествие в веб-разработку, не забывайте уроки из нашей аналогии с музыкальным фестивалем. Так же, как организатор фестиваля следит за тем, чтобы каждая группа выступала на правильной сцене, вы тоже должны следить за тем, чтобы ваши маршруты были хорошо организованы и выступали должным образом. Это похоже на переход с главной сцены рока на главную сцену джаза; вам нужно пройти по всей территории фестиваля (эквивалентно полной загрузке страницы), а не просто перемещаться за кулисы.

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

Итак, вперед и код! Окунитесь в хаос, наслаждайтесь процессом и создавайте приложения, которые станут незабываемыми, как грандиозный музыкальный фестиваль. Если вы нашли это руководство полезным, поделитесь им со своими друзьями-разработчиками. Давайте помогать друг другу учиться и расти. И если у вас есть какие-либо вопросы или отзывы, не стесняйтесь обращаться к нам. Удачного кодирования!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.