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

안녕하세요 이정환입니다.

오류메세지를 자세히 읽어보시면 해당 오류는 app 폴더 바로 아래의 layout.tsx에서 발생했습니다. layout.tsx 파일을 열어보시면 Footer 컴포넌트에서 백엔드 서버로부터 데이터를 불러오고 있기 때문에 오류가 발생하는걸 확인하실 수 있는데요

async function Footer() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`,
    { cache: "force-cache" }
  );
  if (!response.ok) {
    return <footer>제작 @winterlood</footer>;
  }
  // ...중략
}

이때 error.tsx는 자신과 같은 위치에서부터 발생한 오류만 핸들링 할 수 있기 때문에 이 오류를 핸들링 하시려면 해당 layout.tsx 파일과 같은 위치에 발생한 error.tsx가 필요합니다.

그러나 강의에서 error.tsx를 (with-searchbar) 폴더 아래에 만들었음에도 에러 핸들링이 동작하는 이유는 강의에서는 위 코드처럼 Footer 컴포넌트의 fetch 메서드의 캐시 옵션으로 "force-cache"를 적용해, 캐싱을 통해 에러가 발생하지 않도록 설정해두었기 때문입니다.

따라서 실습 흐름상 layout.tsx에서 오류가 발생하지 않고 대신에 (with-searchbar)/page.tsx 에서만 오류가 발생하고 있어 에러 핸들링이 작동하고 있는 것 입니다.

그러나 이런 방식은 중간에 캐시가 무효화 되거나, 프로젝트를 처음부터 다시 진행하실 경우 layout.tsx에서 언제든 오류가 발생할 수 있기 때문에 충분히 수강하시는 입장에서 혼란을 느끼실 수 있는 방식이었던 것 같습니다. 이 점 사과 드립니다.

이에 시간을 내어 해당 부분의 보강을 진행하도록 하겠습니다.

안녕하세요, 인프런 AI 인턴입니다. 김동환님.

error.tsx 파일이 정상적으로 작동하지 않는 문제와 관련하여 몇 가지 확인 사항과 해결 방법을 제시해드리겠습니다.

먼저, error.tsx가 기대한 대로 작동하지 않고 Next.js에서 Uncaught Runtime Error가 발생하는 경우, 다음과 같은 이유가 있을 수 있습니다.

1. 에러 경로 설정 확인

Next.js에서는 특정 경로에 에러 처리를 설정할 수 있습니다. src/app 내에서 에러 경로가 올바르게 설정되었는지 확인해 보세요. 예를 들어, src/app/(경로)/error.tsx 형식으로 파일이 위치해야 해당 경로에서 오류 발생 시 이 컴포넌트가 사용됩니다.

2. 서버 컴포넌트와 클라이언트 컴포넌트 구분

Next.js에서는 특정 컴포넌트가 서버에서만 렌더링되며 오류를 처리하지 못할 수 있습니다. 이 경우엔 error.tsx가 클라이언트에서 작동해야 하므로 서버 컴포넌트로 처리되어 있을 수 있습니다. useEffect와 같은 클라이언트 전용 훅을 사용하려면 error.tsx 내에서 "use client" 지시어를 추가해 클라이언트 컴포넌트로 선언해 보세요.

3. Next.js 버전과 설정 확인

Next.js의 버전에 따라 에러 처리 방식이 달라질 수 있습니다. 프로젝트의 package.json 또는 사용설명서에서 사용하는 버전과 해당 버전의 공식 문서를 확인해 보세요.

4. next.config.js 설정 확인

렌더링이나 에러 처리를 막는 설정이 없는지 확인합니다. next.config.js 파일 내 설정을 검토하고, reactStrictMode가 켜져 있는 경우 발생할 수 있는 이슈를 미리 대비합니다.

이 외에도 관련 사례를 참고할 수 있는 유사한 질문이 있습니다:
- “Next.js에서 오류 핸들러 설정 방법”: 에러 페이지 설정과 관련한 경험을 들어볼 수 있는 좋은 예제입니다.

위의 확인 및 조정 사항을 반영한 후에도 문제가 계속되면 추가적인 정보를 공유해 주시면 확인해 보도록 하겠습니다.

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