Как обрабатывать динамические роуты в next.js?

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

Next.js предлагает два основных способа обработки динамических роутов: использование параметров пути и использование файловой системы. Рассмотрим оба этих способа.

1. Использование параметров пути:
Вы можете определить динамический путь, указав параметр в квадратных скобках в файле страницы Next.js. Например, если вам нужно создать страницу, которая принимает динамический идентификатор пользователя, вы можете создать файл pages/users/[id].js следующим образом:

   import { useRouter } from 'next/router';

   const UserPage = () => {
     const router = useRouter();
     const { id } = router.query;

     return (
       <div>
         <h1>User ID: {id}</h1>
       </div>
     );
   };

   export default UserPage;

Когда вы переходите на /users/123, Next.js будет автоматически распознавать динамический путь и передавать параметр id через query объекта router.

2. Использование файловой системы:
Next.js также поддерживает создание динамических роутов, основанных на структуре файловой системы. Для этого создайте папку с желаемым именем в папке pages, и внутри этой папки создайте файл [id].js. Затем вы можете обрабатывать динамический путь внутри этого файла следующим образом:

   import { useRouter } from 'next/router';

   const UserPage = () => {
     const router = useRouter();
     const { id } = router.query;

     return (
       <div>
         <h1>User ID: {id}</h1>
       </div>
     );
   };

   export default UserPage;

В этом случае, если у вас есть файл pages/users/123.js, он будет обрабатывать запросы по адресу /users/123.

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