Чтобы получить параметры из URL-адреса в Next.js, вы можете использовать хук useRouter
из модуля next/router
. Вот несколько методов, которые можно использовать для достижения этой цели:
- Метод 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
.
-
Метод 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
. -
Метод 3. Использование объекта
query
из модуляurl
:
Если вы не используете маршрутизацию, специфичную для Next.js, вы можете проанализируйте URL-адрес вручную с помощью модуляurl
и извлеките параметры. Вот пример:import { parse } from 'url'; const MyComponent = () => { const url = 'https://example.com/path?param1=value1¶m2=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.