Файловая маршрутизация в Next.js 13+

Маршрутизация всегда была одной из сильных сторон Next.js. Next.js использует маршрутизацию на основе файлов. Как работает этот подход, так это представление маршрутизатора с использованием файловой системы в соответствии с концепцией страницы вместо того, чтобы настраивать маршрутизатор самостоятельно (с помощью react-router-dom или любой другой библиотеки).

Вы можете получить доступ к его превосходной документации здесь.

Основы

Прежде всего, важно отметить, что маршрутизация не претерпела больших изменений в версии 13, а почти одноимённые конвекции по-прежнему актуальны.

У вас есть здесь совершенно бесплатный доступ к репозиторию Github со всеми примерами, которые мы увидим в этом посте.

Основное, что влияет на маршрутизацию в новой версии, связано с введением нового каталога под названием app вместо уже известных страниц.

Начиная с v13, индексный маршрутизатор находится там, но и остальные страницы должны быть перемещены в каталог приложения. Чтобы создать новые маршруты, мы должны сделать то же самое, что и раньше, но добавив в папку файл с именем page.{tsx, jsx, js}. Помните, что файлы должны называться page, чтобы при маршрутизации они считались страницей.

С этими новыми знаниями давайте разобьем этот процесс на этапы.

Во-первых, нам нужно создать приложение Next.js (вы можете просто запустить npx create-next-app@latest — Experimental-App, установив все запрашиваемые значения по умолчанию). Затем, если мы откроем проект в VSC или в вашем любимом редакторе, мы увидим файл page.tsx, который был создан по умолчанию в скаффолдере (внутри каталога app). Это будет домашняя страница вашего приложения.

Если вы хотите создать новые вложенные маршруты, вам нужно создать новые папки, а внутри них новый файл page. Просто сделав это, Next.js создаст для вас новые маршруты.

Сделаем пример. Создайте новый файл подкачки внутри папки about. По сути, вам нужно добавить в папку apps файл about/page.tsx со следующим кодом.

const About = () => <div>about</div> 
export default About;

Запустите npm run dev и перейдите к localhost:3000/about. Вот скриншот, иллюстрирующий вышесказанное.

Мы можем создать новый уровень простым способом с помощью about/us/page.tsx в папке app. Напишите следующий код:

const Us = () => <div>about us</div>; 
export default Us;

С другой стороны, если мы попробуем локацию с несуществующей страницей в роутере, то получим следующее:

Динамические маршруты

Во многих случаях маршруты являются динамическими, и, например, нам может потребоваться получить данные в зависимости от значения, поступающего из URL-адреса.

Давайте возьмем простой, но понятный вариант использования. У нас есть блог, и мы хотим динамически управлять разными сообщениями.

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

const Post = ({ params }: { params: { slug: string } }) => { 
  return <div>My Post: {params.slug}</div>; 
} 
export default Post;

Мы также можем сделать это, когда у нас есть более одного сегмента. В этом случае мы называем папку […slug]. Под приложением мы можем создать файл dress/[…slug]/page.tsx. Это позволит поймать все сегменты. Это означает, что если вы просматриваете localhost:3000/shop/women/jeans, вы получите значения для женщин и джинсов. Вот кусок кода:

const Clothes = ({ params }: { params: { slug: string[] } }) => { 
  return ( 
    <> 
      {params.slug.map((slug) => ( 
        <div key={slug}>
          {slug}
        </div> 
      ))} 
    </> 
  ); 
}; 
export default Clothes;

И вот результат, иллюстрирующий вышесказанное:

Вы можете найти всю эту документацию и многое другое о динамических параметрах здесь.

Группировка маршрутизаторов

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

Давайте посмотрим это на одном примере.

В каталоге app создайте папку с именем (marketing). Затем внутри создайте файл home/page.tsx и добавьте в него текст. . Мы можем добавить больше, например, ценообразование, … . С другой стороны мы создаем папку с именем (product), а под ней dashboard/page.tsx.

Таким образом, мы можем создавать различные макеты, провайдеров, ... которые группируют только определенный маршрутизатор.

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

Подведение итогов

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

Если Next.js является подходящим инструментом для вашего приложения, вам повезло, что у вас есть, возможно, если не лучший, но лучший и простой способ обработки маршрутов приложений.

Если вы действительно готовы поднять свои навыки на новый уровень, не забудьте нажать кнопку подписки в моем профиле ✉️.