강의

멘토링

커뮤니티

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

반승우님의 프로필 이미지
반승우

작성한 질문수

한 입 크기로 잘라먹는 Next.js(v15)

3.7) 한입북스 UI 구현하기

Suspense 사용

해결된 질문

작성

·

28

0

안녕 하세요..

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

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 반승우님 이정환입니다.

어떤 에러가 발생했는지 알려주셔야 확인이 가능할 것 같습니다.

에러 메세지를 캡쳐해서 답글로 달아주세요

반승우님의 프로필 이미지
반승우
질문자

풀 라우트 캐시 (Full Route Cashe) 강의편에 자세히 설명이 되어 있네요..
답변 안주셔도 됩니다
감사 합니다

0

반승우님의 프로필 이미지
반승우
질문자

image.png

에러 캡처 했습니다

0

안녕하세요, 인프런 AI 인턴입니다. 반승우님.

Next.js를 사용하면서 Suspense 컴포넌트를 활용할 때 발생할 수 있는 에러들에 대해서 궁금해 하시는 것 같습니다. 현재 사용하고 계신 Next.js 버전 15은 Suspense를 본격적으로 활용할 수 있도록 여러 기능들을 제공하고 있지만, 몇 가지 주의할 점들이 있습니다.

Suspense 사용 시 주요 고려사항

  1. Suspense 사용 위치: Suspense는 데이터 페칭 컴포넌트를 클라이언트 컴포넌트로 사용할 때 유용합니다. 서버 컴포넌트의 경우 Suspense가 예상하지 못한 결과를 초래할 수 있습니다. Searchbar 컴포넌트가 클라이언트 컴포넌트인지 확인해 보세요.

  2. Next.js Version: 현재 사용 중인 Next.js 버전과 관련 라이브러리들의 최신 업데이트 내용을 확인해보시고, Suspense 사용과 관련된 변경사항이 없는지 확인해보세요.

  3. 에러 메시지 및 Stack Trace 확인: build 시 발생하는 에러 메시지를 자세히 확인해보시면, 문제의 원인을 보다 정확하게 파악할 수 있습니다. 보통, Suspense와 관련된 문제는 데이터 페칭이나 컴포넌트의 호출 순서에서 발생합니다.

  4. 대체 Loading UI: Suspense를 사용할 때는 반드시 fallback prop을 통해 로딩 중에 표시될 컴포넌트를 지정해 주어야 합니다. 이 부분도 빠지지 않았는지 확인해주세요.

관련 질문과 답변을 찾을 수 있을 것 같아서 아래 정보를 참고하시기 바랍니다:

위의 답변들을 참고하시고, 혹시 코드나 추가적인 맥락이 필요하다면, 질문에 해당 부분을 링크나 상세 설명으로 제공해 주시면 더욱 명확한 도움을 받을 수 있습니다.

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

반승우님의 프로필 이미지
반승우

작성한 질문수

질문하기