[Next.js] Next.js에서 여러개의 쿼리 파라미터를 전달하는 방법 (url로 파라미터 전달)

Next.js를 사용하여 웹사이트를 구축하고 있는데, 페이지 URL에서 여러 개의 쿼리 파라미터를 전달하고 싶을 수 있습니다. 이번 포스트에서는 Next.js에서 여러 개의 쿼리 파라미터를 URL에 추가하고 이를 읽는 방법을 알아봅니다.

1. 1.먼저, 원하는 페이지 파일을 만듭니다. 이 예에서는 `pageName.tsx` 파일로 하겠습니다. 파일경로: `pages/pageName.tsx`
2. 2.페이지에서는 Next.js의 `useRouter` 훅을 사용하여 쿼리 파라미터 값을 받아올 수 있습니다.

import { useRouter } from 'next/router';

const PageName = () => {
  const router = useRouter();
  const { id1, id2 } = router.query;

  return (
    <div>
      <p>ID1: {id1}</p>
      <p>ID2: {id2}</p>
    </div>
  );
};

export default PageName;

1. 1.이제 해당 페이지의 URL에서 다음과 같이 두 개의 다른 쿼리 파라미터를 추가합니다: `http://localhost:3000/pageName?id1=value1&id2=value2\`
2. 2.페이지를 로드하면, `id1`은 "value1"으로, `id2`는 "value2"로 출력됩니다.

이 방법을 사용하면 Next.js의 URL에서 여러 개의 쿼리 파라미터를 쉽게 전달하고 받아올 수 있습니다. 다양한 데이터를 페이지에 전달하고, 원하는 로직을 수행하는 데 도움이 될 것입니다.