Suspense 사용
안녕 하세요..
src\app\(with-searchbar)\layout.tsx
build 시 해당 파일에서 에러가 발생 했습니다
<Suspense> 를 이용했습니다
Next 버전 때문인가요?
import { ReactNode, Suspense } from "react";
import Searchbar from "../../components/searchbar";
export default function Layout({ children }: { children: ReactNode }) {
return (
<div>
<Suspense>
<Searchbar />
</Suspense>
{children}
</div>
);
}
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)
제목을 구체적으로 작성해 주세요
✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.
⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.
깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요
직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요
답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요
강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요
더 빠른 답변이 가능합니다!
回答 3
1
안녕하세요 반승우님 이정환입니다.
어떤 에러가 발생했는지 알려주셔야 확인이 가능할 것 같습니다.
에러 메세지를 캡쳐해서 답글로 달아주세요
0
안녕하세요, 인프런 AI 인턴입니다. 반승우님.
Next.js를 사용하면서 Suspense 컴포넌트를 활용할 때 발생할 수 있는 에러들에 대해서 궁금해 하시는 것 같습니다. 현재 사용하고 계신 Next.js 버전 15은 Suspense를 본격적으로 활용할 수 있도록 여러 기능들을 제공하고 있지만, 몇 가지 주의할 점들이 있습니다.
Suspense 사용 시 주요 고려사항
Suspense 사용 위치:
Suspense는 데이터 페칭 컴포넌트를 클라이언트 컴포넌트로 사용할 때 유용합니다. 서버 컴포넌트의 경우Suspense가 예상하지 못한 결과를 초래할 수 있습니다.Searchbar컴포넌트가 클라이언트 컴포넌트인지 확인해 보세요.Next.js Version: 현재 사용 중인 Next.js 버전과 관련 라이브러리들의 최신 업데이트 내용을 확인해보시고,
Suspense사용과 관련된 변경사항이 없는지 확인해보세요.에러 메시지 및 Stack Trace 확인: build 시 발생하는 에러 메시지를 자세히 확인해보시면, 문제의 원인을 보다 정확하게 파악할 수 있습니다. 보통,
Suspense와 관련된 문제는 데이터 페칭이나 컴포넌트의 호출 순서에서 발생합니다.대체 Loading UI:
Suspense를 사용할 때는 반드시fallbackprop을 통해 로딩 중에 표시될 컴포넌트를 지정해 주어야 합니다. 이 부분도 빠지지 않았는지 확인해주세요.
관련 질문과 답변을 찾을 수 있을 것 같아서 아래 정보를 참고하시기 바랍니다:
- 4.1) 빌드 시 오류 질문 드립니다. -
Suspense의 활용과 관련된 오류를 어떻게 해결했는지 설명합니다.
- 6.3 ~ 6.4 search 페이지에서 문제가 있습니다. -
Suspense의 fallback UI가 예상대로 동작하지 않을 때의 해결 방법에 대한 논의가 포함되어 있습니다.
위의 답변들을 참고하시고, 혹시 코드나 추가적인 맥락이 필요하다면, 질문에 해당 부분을 링크나 상세 설명으로 제공해 주시면 더욱 명확한 도움을 받을 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
27
2
모달 관련 질문
0
32
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
61
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
92
3
vercel 배포를 실패하였습니다.
0
95
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
54
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
85
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
85
2
백엔드 서버 오류납니다.
0
80
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
75
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
98
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2