SearchResult 인수 타입 적용

한 입 크기로 잘라먹는 Next.js(v15)

해결된 질문

작성

search 페이지에서

아래 처럼 SearchResult 함수로 빼준 경우, searchParams의 타입을 어떻게 해야 하나요?

async function SearchResult({ searchParams }: { searchParams: Promise<T> }) {
  await delay(1500);

  const { q } = await searchParams;

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`,
    { cache: "force-cache" }
  );

  if (!response.ok) {
    return <div>오류가 발생했습니다.</div>;
  }

  const books: BookData[] = await response.json();

  return (
    <div>
      {books.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

SearchResult 컴포넌트는 Page 컴포넌트로부터 q를 그냥 전달받도록 설정하시면 됩니다.

더 구체적으로 설명드리자면, 이미 Page 컴포넌트에서 const {q} = await searchParams로 q를 불러왔으니 그냥 이 q 값을 string으로 전달하시면 됩니다.

// 페이지 컴포넌트에서 ...
return (
 <SearchResult q={q || ""}/>
)

// SearchResult 컴포넌트에서 ...
function SearchResult ({q}:{q:string}) { ... }

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Full Stack 개발자님.

Next.js 15 버전에서는 searchParams와 같은 파라미터를 비동기적으로 처리하기 위해 Promise 타입으로 감싸야 하는 변경 사항이 있습니다. 따라서 SearchResult 함수에서 searchParams의 타입을 올바르게 설정하기 위해 다음과 같이 적용할 수 있습니다.

먼저, searchParams의 타입을 구체적으로 설정해야 합니다. 이는 주로 searchParams가 어떤 데이터를 받을지를 결정하여 해당 타입을 지정해야 합니다. 예를 들어, 파라미터 q가 포함된 객체를 기대한다면, 다음과 같이 타입을 적용할 수 있습니다:

type SearchParams = {
  q?: string; 
};

async function SearchResult({ searchParams }: { searchParams: Promise<SearchParams> }) {
  await delay(1500);

  const { q } = await searchParams;

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`,
    { cache: "force-cache" }
  );

  if (!response.ok) {
    return <div>오류가 발생했습니다.</div>;
  }

  const books: BookData[] = await response.json();

  return (
    <div>
      {books.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

이 방식으로 searchParams의 타입을 정의하면, 해당 함수에서 비동기 처리 후 q 값을 안전하게 추출하여 사용할 수 있습니다. Promise<T>에서 T는 실제로 받을 데이터의 형태로 설정해야 합니다.

더 많은 예제와 설명을 보실 수 있는 유사한 질문을 확인하시려면 아래 링크를 참고해 보세요:

컴포넌트 스트리밍 적용하기에서 searchParams 비동기 변경관련 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

SearchResult 인수 타입 적용