해결된 질문
작성
·
166
0
안녕하세요. 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"
}
}
답변해주시면 감사하겠습니다!!
그리고 혹시 다른 강의도 찍으실 계획이 있는지 궁금합니다! ㅎㅎ 강의 너무 잘 듣고 있습니다 좋은 강의 감사합니다!!^^
답변 1
0
안녕하세요 지인님 이정환입니다.
앗 예리하시군요 ...😅 이 부분은 향후에 수정합니다. 이때 설명도 함께 드리고 있으니 일단 쭉 수강하셔도 괜찮을것 같아요! 스트리밍을 위해 사용되는 Suspense가 갑자기 강의 중간에 등장하면 강의 흐름이 헷갈리실 것 같아서 일부로 지금은 설명하지 않고 있습니다.
추가 강의도 당연히 계획하고 있습니다!_! 혹시 어떤 주제로 진행하는게 좋을지 추천해주실 수 있을까요?