Тип объекта paramsв Next.js зависит от контекста, в котором он используется. Next.js предоставляет гибкую систему маршрутизации, которая позволяет определять динамические маршруты с параметрами. При совпадении динамического маршрута Next.js передаст параметры как объект компоненту страницы.

В случае рендеринга на стороне сервера (SSR) или создания статического сайта (SSG) объект paramsимеет определенный тип в зависимости от определения маршрута. Давайте рассмотрим некоторые распространенные сценарии:

1. Динамический маршрут с одним параметром.
   Если у вас есть динамический маршрут с одним параметром, например /users/[id], объект paramsбудет иметь тип { id: string }. Вот пример:

// pages/users/[id].tsx
import { useRouter } from 'next/router';
const UserPage = () => {
  const router = useRouter();
  const { id } = router.query;
  return <div>User ID: {id}</div>;
};
export default UserPage;

2. Динамический маршрут с несколькими параметрами.
   Если ваш динамический маршрут имеет несколько параметров, например /products/[category]/[slug], объект paramsбудет иметь соответствующий тип. Например, если category— строка, а slug— число, объект paramsбудет иметь тип { category: string, slug: string }. Вот пример:

// pages/products/[category]/[slug].tsx
import { useRouter } from 'next/router';
const ProductPage = () => {
  const router = useRouter();
  const { category, slug } = router.query;
  return (
    <div>
      Category: {category}, Slug: {slug}
    </div>
  );
};
export default ProductPage;

3. Параметры пользовательского маршрута.
   Вы также можете определить типы пользовательских параметров, создав псевдоним типа TypeScript или интерфейс. Это полезно, если у вас есть сложные структуры параметров. Вот пример:

// pages/blog/[...slug].tsx
import { useRouter } from 'next/router';
type BlogParams = {
  slug: string[];
};
const BlogPage = () => {
  const router = useRouter();
  const { slug } = router.query as BlogParams;
  return <div>Blog Slug: {slug.join('/')}</div>;
};
export default BlogPage;

В этом примере параметр slugпредставляет собой массив строк, поэтому мы определяем специальный тип BlogParams, чтобы отразить структуру.

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

Объект в Next.js: подробное руководство с примерами кода