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

안녕하세요. 4.1) 앱 라우터의 데이터 페칭 강의를 수강하고 build를 진행했는데

Generating static pages (0/6) [ ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

이런식으로 오류메시지가 출력돼서 메시지에 있는 공식문서를 참고하여 아래와 같이 searchbar.tsx를 수정하였는데요.

// searchbar.tsx
"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import style from "./serachbar.module.css";

function Search() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [search, setSearch] = useState("");

  const q = searchParams.get("q");

  useEffect(() => {
    setSearch(q || "");
  }, [q]);

  const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
  };

  const onSubmit = () => {
    if (!search || q === search) return;
    router.push(`/search?q=${search}`);
  };

  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      onSubmit();
    }
  };

  return (
    <div className={style.container}>
      <input value={search} onChange={onChangeSearch} onKeyDown={onKeyDown} />
      <button onClick={onSubmit}>검색</button>
    </div>
  );
}

export default function Searchbar() {
  return (
    <Suspense>
      <Search />
    </Suspense>
  );
}

이런식으로 Suspense로 감싸줬는데도 동일한 오류메시지가 출력돼서 해결방법을 검색해보다가

// loading.tsx
import React from "react";

export default function Loading() {
  return <div>Loading...</div>;
}

app 폴더 아래에 loading.tsx 파일을 생성하니 정상적으로 build가 되었습니다.

공식문서를 참고하여 Suspense를 감싸줬는데도 해결이 되지 않은 이유가 궁금합니다!

강사님께서 따로 Suspense 관련 언급을 안하신 건 next버젼과 관련이 있을까도 싶어 package.json 파일도 함께 첨부합니다.

// package.json

{
  "name": "section04",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "19.0.0-rc-f994737d14-20240522",
    "react-dom": "19.0.0-rc-f994737d14-20240522",
    "next": "15.0.0-rc.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.0-rc.0"
  }
}

답변해주시면 감사하겠습니다!!

그리고 혹시 다른 강의도 찍으실 계획이 있는지 궁금합니다! ㅎㅎ 강의 너무 잘 듣고 있습니다 좋은 강의 감사합니다!!^^