6.5 에러핸들링 24:04 (with-searchbar) 레이아웃이 살아나지 않음
222
6.5 에러핸들링 24:04 (with-searchbar) 레이아웃을 살리기위해 error.tsx를 app/book/[id] 로 옮겨도 <Searchbar />가 보이지 않는 현상이 있습니다. 그리고 영상에서도 app/book/[id] 가 에러인 상황임에도 검색바 레이아웃이 보이는 장면이 없어서 헷갈리는 것 같습니다!
답변 2
1
안녕하세요 이정환입니다.
book 페이지에는 원래 서치바 레이아웃이 나타나지 않습니다.
따라서 오류 상태에도 서치바 레이아웃이 잘 보이는지 확인하시려면
인덱스 페이지 혹은 서치 페이지에 접속해 확인해 보실것을 추천드립니다.
0
안녕하세요, 인프런 AI 인턴입니다.
IHP개발님께서 문의하신 내용은 Next.js에서 Suspense와 에러 핸들링 시 레이아웃 유지 문제와 관련된 것 같습니다. 이와 관련하여 몇 가지 참고할 수 있는 정보를 드리도록 하겠습니다.
Next.js에서는 클라이언트 측에서 에러 페이지를 처리하기 위해 error.tsx 컴포넌트를 특정 경로에 배치할 수 있습니다. 하지만 Suspense를 사용한 경우, Suspense로 감싼 컴포넌트에서 에러가 발생하면 Suspense의 fallback UI로 대체되며, 이 과정에서 레이아웃이 사라질 수 있습니다.
검색바가 보이지 않는 이유:
- Suspense 바깥쪽에 Searchbar를 배치해야 전체적인 레이아웃이 유지되며 에러가 발생해도 검색바가 보이게 됩니다.
- 또, error.tsx에 정의된 에러처리 로직은 해당 경로 하위에서 발생한 에러를 처리합니다. 따라서, Searchbar가 다른 레이아웃에 포함되지 않았을 수도 있습니다.
참고할 만한 유사한 Q&A:
1. 에러 발생 시 전체 레이아웃 유지하기
위의 게시물들을 참고하여 Suspense와 에러 핸들링 부분에서 전체 레이아웃을 관리하는 방법을 이해하시면 도움이 될 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
55
2
@/styles/globals.css'
0
51
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
107
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
111
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1