VIDEO
HIGHLIGHT
Log InSign up
Next.js 15 Tutorial - 13 - Route Groups
SummaryTranscriptChat

Next.js 15 Tutorial - 13 - Route Groups

Организация маршрутов с помощью групп маршрутов в Nex.js

Введение в группы маршрутов

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

Создание маршрутов аутентификации

  • Начнем с создания папок для регистрации, входа и восстановления пароля в каталоге приложения.
  • В каждой папке создаем файл page.tsx с простым компонентом React, отображающим заголовок страницы.

Проблемы с разбросанными маршрутами

  • При переходе по созданным маршрутам (localhost:3000/register, /login и /forgot-password) все работает, но возникает проблема: маршруты аутентификации разбросаны по приложению.
  • Это может быть сложно в командной среде; необходимо улучшить опыт разработчиков путем группировки связанных маршрутов.

Улучшение структуры проекта

  • Создаем папку au для хранения всех связанных с аутентификацией маршрутов и перемещаем туда соответствующие папки.
  • После перемещения необходимо обновить импорты и сохранить изменения. Структура проекта становится более аккуратной.

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

  • Nex.js автоматически сопоставляет вложенные папки с URL-путями, что приводит к ошибкам 404 при попытке доступа к новым путям.
Playlists: Next.js 15 Tutorial - Beginner to Advanced
Video description

Using Next.js Route Groups for Clean Project Organization Let's dive into how to use Next.js route groups for organizing project routes without impacting the URL structure. Learn to build and organize authentication routes like register, login, and forgot password efficiently. We will guide you step-by-step on creating route groups, moving routes into an auth folder, and preserving the clean URL paths by using parentheses in folder names. Improve your project structure and enhance collaboration in team environments. 📔 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 to Route Groups in Next.js 00:20 Implementing Authentication Routes 01:27 Organizing Routes for Better Developer Experience 02:52 Creating and Using Route Groups 03:43 Conclusion and Next Steps 03:51 Support the Channel