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

안녕하세요!
build할 때 계속해서 type 오류가 발생하여 질문 드립니다.

현재 page.tsx에는 아래와 같이 작성되어 있습니다.

import BookItem from "@/components/book-item";
import { BookData } from "@/types";

export default async function Page({
  searchParams,
}: {
  searchParams: {
    q?: string;
  };
}) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${searchParams.q}`
  );
  if (!response.ok) {
    return <div>오류가 발생했습니다...</div>;
  }

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

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

근데 여기서 build를 하면 아래와 같은 에러가 발생합니다.

.next/types/app/(with-searchbar)/search/page.ts:34:29

Type error: Type 'Props' does not satisfy the constraint 'PageProps'.

Types of property 'searchParams' are incompatible.

Type 'Record<string, string | string[]> | undefined' is not assignable to type 'Promise<any> | undefined'.

Type 'Record<string, string | string[]>' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

32 |

33 | // Check the prop type of the entry function

> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()

| ^

35 |

36 | // Check the arguments and return type of the generateMetadata function

37 | if ('generateMetadata' in entry) {

Next.js build worker exited with code: 1 and signal: null

사실 gpt를 이용하여 받은 코드로 작성해보면 에러를 해결할 수는 있는데 이게 근본적인 해결 방법인지 잘 모르겠고, gpt가 작성한 코드가 잘 이해가 되지 않습니다.

우선 gpt에서 받은 답변은 아래와 같습니다.

import BookItem from "@/components/book-item";
import { BookData } from "@/types";

export default async function Page({ searchParams }: any) {
  const qRaw = searchParams?.q;
  const q = Array.isArray(qRaw) ? qRaw[0] : qRaw ?? "";

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${encodeURIComponent(q)}`
  );

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

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

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

이렇게 하면 해결은 되긴합니다.

다만 왜 해결이 되는 건지 이해가 잘 되지 않아서 그런데 왜 자꾸 build할 때 type 오류가 발생하는지 알려주시면 감사드리겠습니다!