JavaRush /Курсы /Модуль 3: React /Лекция 129: Обработка маршрутов и параметров в Next.js

Лекция 129: Обработка маршрутов и параметров в Next.js

Модуль 3: React

13 уровень , 8 лекция

Открыта

Обработка динамических маршрутов

Сначала давайте разберёмся, как работать с динамическими маршрутами в Next.js. В отличие от React, где вы вручную прописываете все маршруты в react-router-dom, Next.js автоматически определяет маршруты на основе структуры файлов в папке pages.

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

Прежде чем перейти к динамическим маршрутам, давайте взглянем на пример статического маршрута:

// pages/about.tsx
const About = () => {
  return <h1>О нас</h1>;
};

export default About;

Теперь, если вы запустите приложение, перейдя по адресу http://localhost:3000/about, вы увидите надпись "О нас". Эта магия происходит благодаря маршрутизации, встроенной в Next.js. Каждый файл в папке pages становится маршрутом.

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

Но что, если вам нужно создать страницу для каждого пользователя, продукта или статьи? Для этого используются динамические маршруты. Динамические сегменты маршрута обозначаются квадратными скобками.

Вот пример:

// pages/user/[id].tsx
import { useRouter } from 'next/router';

const UserPage = () => {
  const router = useRouter();
  const { id } = router.query; // Получаем параметр маршрута

  return <h1>Страница пользователя с ID: {id}</h1>;
};

export default UserPage;

Здесь [id] в имени файла превращается в динамический сегмент маршрута. Теперь перейдя на http://localhost:3000/user/123, вы увидите: "Страница пользователя с ID: 123".

Работа с несколькими параметрами

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

// pages/product/[category]/[id].tsx
import { useRouter } from 'next/router';

const ProductPage = () => {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <h1>
      Категория: {category}, Продукт ID: {id}
    </h1>
  );
};

export default ProductPage;

Теперь, если вы откроете http://localhost:3000/product/electronics/42, у вас появится текст "Категория: electronics, Продукт ID: 42".

Использование getStaticPaths

Когда речь идёт о динамических маршрутах, вы можете заранее подготовить страницы с помощью функции getStaticPaths в сочетании с getStaticProps. Это особенно полезно, если вы используете статическую генерацию страниц.

Что делает getStaticPaths

getStaticPaths позволяет Next.js на этапе сборки узнать, какие страницы нужно сгенерировать. Например, вы хотите показать страницы для пользователей, ID которых: 1, 2 и 3. Давайте это реализуем:

// pages/user/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';

export const getStaticPaths: GetStaticPaths = async () => {
  // Здесь вы можете достать данные из API, базы данных или другого источника
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async (context) => {
  const { id } = context.params!;

  // В реальном приложении вы скорее всего получите данные из API
  const user = { id, name: `Пользователь ${id}` };

  return {
    props: { user },
  };
};

const UserPage = ({ user }: { user: { id: string; name: string } }) => {
  return <h1>{user.name}</h1>;
};

export default UserPage;

Теперь страницы /user/1, /user/2 и /user/3 будут сгенерированы на этапе сборки. Если вы попробуете открыть /user/4, то получите 404 ошибку, так как путь не был указан в paths.

Параметры маршрутов: практические приёмы

Типизация параметров

Поскольку мы используем TypeScript, стоит типизировать параметры маршрутов. Вот как это сделать:

import { GetStaticPaths, GetStaticProps } from 'next';

interface Params {
  id: string;
}

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps<
  { user: { id: string; name: string } },
  Params
> = async (context) => {
  const { id } = context.params!;

  const user = { id, name: `Пользователь ${id}` };

  return {
    props: { user },
  };
};

const UserPage = ({ user }: { user: { id: string; name: string } }) => {
  return <h1>{user.name}</h1>;
};

export default UserPage;

Опция fallback в getStaticPaths

Опция fallback задаёт, как ваш сайт должен обрабатывать маршруты, которых нет в paths.

false: только страницы, указанные в paths, будут сгенерированы. Все остальные маршруты вернут 404.
true: если пользователь открывает путь, которого нет в paths, страница будет сгенерирована во время первого запроса.
"blocking": похож на true, но пользователь увидит готовую страницу только после генерации.