nextjs set query param on click

nextjs에서 query param을 설정하고 자식 컴포넌트에서 쿼리파람을 이용해서 다르게 렌더링이 되어야 하는 경우

window.history.pushState({}, "", ?category=${category});
와 같이 쿼리파라미터를 설정할 수 있지만 이 경우 자식 컴포넌트에서 쿼리파람이 바뀌었는지 감지하지 못한다

아래 링크에 있는 방법으로 해결하면 된다

• https://github.com/vercel/next.js/discussions/47583

방법1

// useQueryParam.ts 커스텀 훅 생성
"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function useQueryParams<T = {}>() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const queryParams = searchParams as unknown as Partial<T>;
  const urlSearchParams = new URLSearchParams(searchParams.toString());

  function setQueryParams(params: Partial<T>) {
    Object.entries(params).forEach(([key, value]) => {
      urlSearchParams.set(key, String(value));
    });

    const search = urlSearchParams.toString();
    const query = search ? `?${search}` : "";

    router.push(`${pathname}${query}`);
  }

  return { queryParams, setQueryParams };
}

// 쿼리 파라미터 설정
setQueryParams({ category });

// 쿼리 파라미터 확인
// 컴포넌트
const searchParams = useSearchParams();
const param = searchParams.get("쿼리_파라미터_이름");

방법2

• 사실 더 쉬운 방법은 next에서 제공하는 Link를 이용하는 것이다

export default function Button() {
  return (
    <Link href={`${url}?${query}=${param}`}>버튼</Link>
  )
}

관련 코드

• https://github.com/TaehwanGo/dream-nextjs/commit/aa42b9f3f2a8e9112b7cb8c2fde77ffb9c1231bc