npm run build 시 search 쪽에서 에러로 인해 bu... - 인프런

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.15) Edit 페이지 구현하기

npm run build 시 search 쪽에서 에러로 인해 build가 안됩니다.

작성

수정됨

git : https://github.com/ture403/next_appRoute 입니다.
현재버전 :

에러:

이건 search/page.tsx 입니다.

import BookItem from "@/components/book-item";
import BookListSeletion from "@/components/skeleton/book-list-seletion";
import { BookData } from "@/types";
import { delay } from "@/util/delay";
import { Suspense } from "react";

async function SearchResult({ q }: { q: string }) {
    await delay(1500);

    const res = await fetch(`${process.env.NEXT_PUBLIC_API_SEVER_URL}/book/search?q=${q}`);

    if (!res.ok) {
        return <div>오류가 발생했습니다.</div>;
    }
    const searchDatas: BookData[] = await res.json();
    console.log(searchDatas);
    return (
        <div>
            {searchDatas.map((book) => (
                <BookItem key={book.id} {...book} />
            ))}
        </div>
    );
}

export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
    const params = await searchParams; // searchParams Promise를 await 합니다.
    const query = params.q || ""; // q 값을 추출하고, 없으면 빈 문자열을 사용합니다.
    return (
        <Suspense key={query} fallback={<BookListSeletion count={3} />}>
            <SearchResult q={query} />
        </Suspense>
    );
}

봐주시면 감사겠습니다.

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다

오류 메세지를 읽어보시면 searchParams 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.

이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)

이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 레디온님, Next.js 프로젝트에서 useSearchParams() 관련 문제를 겪고 계시는 것 같아서 도와드리겠습니다.

문제의 핵심은 useSearchParams() 사용 시 적절한 Suspense 경계를 적용하지 않았기 때문에 발생하는 것으로 보입니다. 이는 Next.js의 특정 버전 이상에서 비동기 데이터 페칭을 지원하면서 생긴 일반적인 문제입니다.

해당 문제를 해결하기 위해 참고할 수 있는 게시물이 있습니다:

추가적으로 알아보실 수 있는 방법:

dynamic 옵션 설정: Next.js의 dynamic 라우팅 옵션을 설정하는 것도 해결책이 될 수 있습니다. 예를 들어, 컴포넌트를 클라이언트 컴포넌트로 바꾸고 하위 컴포넌트에 dynamic 옵션을 적용하는 방법도 고려해 볼 수 있습니다.

개선된 에러 처리:

에러 발생 시 사용자에게 좀 더 유의미한 메세지를 제공하도록 로직을 강화하면 좋습니다.

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

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

npm run build 시 search 쪽에서 에러로 인해 build가 안됩니다.

관련 질문 및 해결책:

추가적으로 알아보실 수 있는 방법:

개선된 에러 처리: