next.js 15 기준으로 searchParams 값이 불러와지는 동안, 로딩 전까지 빈 페이지가 로딩되는 현상을 방지하기 위해서, Suspense의 사용을 강제한다.

해결

useSearchParams를 사용할 컴포넌트를 분리해서, Suspense로 감싸주면 해결할 수 있다.

이 블로그에서는 아래와 같은 방식으로 카테고리를 불러오는데, 정석적인 방법인지는 모르겠지만, 더 좋은 방법이 있다면 댓글로 남겨주시면 좋겠습니다.

// http://localhost:3000?name=test

"use client";

import { useSearchParams } from "next/navigation";
import { Dispatch, SetStateAction, Suspense, useEffect, useState } from "react";

function SearchParams({
  setName,
}: {
  setName: Dispatch<SetStateAction<string | null>>;
}) {
  const searchParams = useSearchParams();

  useEffect(() => {
    setName(searchParams.get("name"));
  }, [searchParams, setName]);

  return <></>;
}

export default function Home() {
  const [name, setName] = useState<string | null>(null);

  return (
    <div>
      <Suspense>
        <SearchParams setName={setName} />
      </Suspense>
      <p>{name}</p>
    </div>
  );
}

next.js 클라이언트 컴포넌트에서 useSearchParams 사용하는 법

해결