Динамическая маршрутизация в next.js 14?

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

Для использования динамической маршрутизации в Next.js 14 вам необходимо создать файл с расширением .js или .ts в папке pages. Название этого файла должно содержать параметр в квадратных скобках, указывающий на то, что это динамический маршрут. Например, если вы хотите создать динамический маршрут для отображения профиля пользователя, вы можете создать файл с именем [username].js или [username].ts.

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

Например, если ваш компонент выглядит следующим образом:

import { useRouter } from 'next/router';

const ProfilePage = () => {
  const router = useRouter();
  const { username } = router.query;

  return (
    <div>
      <h1>Профиль пользователя {username}</h1>
      {/* Здесь может быть другой контент вашей страницы */}
    </div>
  );
};

export default ProfilePage;

Тогда при посещении URL вида /profile/username будет отображаться страница с профилем пользователя с соответствующим именем.

Вы также можете создавать более сложные маршруты, включая несколько динамических параметров. Например, чтобы создать маршрут вида /profile/username/posts/postId, вы можете создать файл с именем [username]/posts/[postId].js или [username]/posts/[postId].ts.

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

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