Создание динамических страниц с помощью Next.js — параметры маршрута

Динамическая маршрутизация с Next.js

Принципы динамической маршрутизации

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

В Next.js мы можем создавать файлы с названием вида [param].tsx в папке pages. Это позволяет динамически обрабатывать маршруты, такие как /article/123 или /user/john. Следуя этому пути, Next.js генерирует страницу подставляя значение из URL.

Создание динамического маршрута

Начнем с примера. Представьте, что мы пишем приложение для просмотра информации о пользователях. Каждая страница пользователя должна отображаться по адресу /users/[id], где id — это динамический параметр.

1. Создайте файл pages/users/[id].tsx. Именно квадратные скобки [id] говорят Next.js, что это динамический маршрут.

import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>Пользователь с ID: {id}</h1>
    </div>
  );
};

export default UserPage;

Теперь, если вы откроете /users/12345, то увидите: "Пользователь с ID: 12345". Ура, первая динамическая страница готова!

Работа с параметрами маршрутов

Когда вы работаете с динамическими маршрутами, параметры — это ваше все. В Next.js параметр маршрута доступен через объект router.query. Этот объект позволяет получить данные из [param] в URL.

Допустим, теперь нам нужно обрабатывать маршруты вида /users/[id]/[action]. Создаем соответствующий файл: pages/users/[id]/[action].tsx.

import { useRouter } from 'next/router';

const UserActionPage = () => {
  const router = useRouter();
  const { id, action } = router.query; // Извлекаем параметры из маршрута

  return (
    <div>
      <h1>Пользователь с ID: {id}</h1>
      <p>Действие: {action}</p>
    </div>
  );
};

export default UserActionPage;

Теперь, если вы откроете /users/42/edit, то увидите:

• Пользователь с ID: 42
• Действие: edit

Параметры маршрута — это просто магия, которая делает ваши приложения невероятно гибкими.

Типизация параметров маршрутов с TypeScript

Давайте добавим TypeScript в эту волшебную смесь! Как мы уже знаем, router.query возвращает параметры маршрута в виде объекта, но... его тип — any. Как быть? Естественно, типизировать!

Добавим интерфейс для наших параметров маршрута:

import { useRouter } from 'next/router';

interface UserActionQuery {
  id?: string; // "id" необязателен, пока маршрут не загружен
  action?: string;
}

const UserActionPage = () => {
  const router = useRouter();
  const { id, action } = router.query as UserActionQuery; // Явное указание типа

  return (
    <div>
      <h1>Пользователь с ID: {id}</h1>
      <p>Действие: {action}</p>
    </div>
  );
};

export default UserActionPage;

Почему id и action необязательны? Пока страница загружается, router.query может быть пустым объектом. Поэтому TypeScript требует, чтобы мы учитывали этот случай.

Дополнение через getStaticProps

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

import { GetStaticProps } from 'next';

interface UserProps {
  userId: string;
}

const UserPage: React.FC<UserProps> = ({ userId }) => {
  return <h1>Пользователь с ID: {userId}</h1>;
};

export const getStaticProps: GetStaticProps = async (context) => {
  const { id } = context.params!; // id из динамического маршрута
  return {
    props: {
      userId: id, // Передаем prop в компонент
    },
  };
};

export default UserPage;

Мы типизируем context.params, как объект, содержащий параметры из URL. Обратите внимание на params! — это TypeScript-хак, чтобы сказать, что значение точно есть.

Частые ошибки и нюансы

1. Если параметр в маршруте имеет другое название (например, [slug]), а вы пытаетесь обратиться к router.query.id, это вызовет undefined. Название параметра должно совпадать!

2. Не забывайте обрабатывать случаи, когда router.query еще не загружен. Next.js сначала рендерит пустую страницу до подготовки маршрута.

3. Для сложных динамических маршрутов (например, /category/[id]/[slug]) старайтесь всегда использовать понятные имена для параметров. Никто не хочет разбираться, что значит [xyz].