Извлечение параметров URL-адреса в Next.js

Чтобы получить параметры из URL-адреса в Next.js, вы можете использовать хук useRouterиз модуля next/router. Вот несколько методов, которые можно использовать для достижения этой цели:

  1. Метод 1: использование перехватчика useRouter:
    import { useRouter } from 'next/router';
    const MyComponent = () => {
    const router = useRouter();
    const { params } = router.query;
    // Access the parameter value
    console.log(params);
    // Rest of your component code
    };
    export default MyComponent;

Этот метод позволяет получить доступ к параметрам непосредственно из объекта router.query.

  1. Метод 2. Доступ к параметрам в рамках динамического маршрута.
    Если вы используете динамическую маршрутизацию в Next.js, вы можете получить доступ к параметрам непосредственно внутри компонента страницы. Например, если у вас есть динамический маршрут, определенный как [slug].js, вы можете получить доступ к параметру slugследующим образом:

    const MyComponent = ({ slug }) => {
    // Access the parameter value
    console.log(slug);
    // Rest of your component code
    };
    export async function getServerSideProps(context) {
    const { slug } = context.params;
    return {
    props: {
      slug,
    },
    };
    }
    export default MyComponent;

    В этом примере доступ к значению параметра осуществляется через объект context.paramsв функции getServerSideProps.

  2. Метод 3. Использование объекта queryиз модуля url:
    Если вы не используете маршрутизацию, специфичную для Next.js, вы можете проанализируйте URL-адрес вручную с помощью модуля urlи извлеките параметры. Вот пример:

    import { parse } from 'url';
    const MyComponent = () => {
    const url = 'https://example.com/path?param1=value1&param2=value2';
    const { query } = parse(url, true);
    // Access the parameter values
    console.log(query.param1);
    console.log(query.param2);
    // Rest of your component code
    };
    export default MyComponent;

Используя эти методы, вы можете легко получить параметры из URL-адреса в Next.js.