Объясни, как можно запросить query параметр в Next.js?

Поиск

В Next.js вы можете запросить параметры запроса (query parameters) из URL, используя несколько различных подходов в зависимости от того, где и как вы хотите их получить. Вот несколько методов:

Использование useRouter в функциональных компонентах

Если вы работаете в функциональном компоненте, вы можете использовать хук useRouter из next/router для доступа к параметрам запроса.

import { useRouter } from 'next/router';
 
const MyComponent = () => {
  const router = useRouter();
  const { param1, param2 } = router.query;
 
  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
};
 
export default MyComponent;

Использование getServerSideProps для серверного рендеринга

Если вам нужно получить параметры запроса на стороне сервера при использовании getServerSideProps, вы можете получить их через аргумент context.

export async function getServerSideProps(context) {
  const { param1, param2 } = context.query;
 
  return {
    props: {
      param1,
      param2,
    },
  };
}
 
const MyComponent = ({ param1, param2 }) => {
  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
};
 
export default MyComponent;

Использование getStaticProps с getStaticPaths для статической генерации

Если вы используете getStaticProps в сочетании с getStaticPaths для статической генерации страниц, вы можете получить параметры запроса через аргумент context.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { param1: 'value1', param2: 'value2' } },
    ],
    fallback: false,
  };
}
 
export async function getStaticProps(context) {
  const { param1, param2 } = context.params;
 
  return {
    props: {
      param1,
      param2,
    },
  };
}
 
const MyComponent = ({ param1, param2 }) => {
  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
};
 
export default MyComponent;

Использование router.push для навигации с параметрами запроса

Вы также можете программно перемещаться по вашему приложению, используя router.push с параметрами запроса.

import { useRouter } from 'next/router';
 
const MyComponent = () => {
  const router = useRouter();
 
  const navigateWithQuery = () => {
    router.push({
      pathname: '/another-page',
      query: { param1: 'value1', param2: 'value2' },
    });
  };
 
  return (
    <div>
      <button onClick={navigateWithQuery}>Go to Another Page</button>
    </div>
  );
};
 
export default MyComponent;

Эти методы позволяют вам гибко работать с параметрами запроса в различных сценариях использования Next.js.