1. Next.js 에러의 두 가지 큰 분류

Next.js의 에러는 크게 두 가지로 나눌 수 있습니다. 마치 감기와 교통사고의 차이처럼, 예상할 수 있는 에러와 예상치 못한 에러가 있습니다.

  1. 예상된 에러 (Expected Errors)
  2. 예상치 못한 에러 (Uncaught Exceptions)

2. 예상된 에러 처리하기: 우아하게 실패하는 방법

예상된 에러는 앱이 정상적으로 작동하는 중에도 충분히 일어날 수 있는 일들입니다. 이런 에러들은 사용자에게 친절하게 안내해주는 것이 중요합니다.

서버 액션에서의 에러 처리

  1. 잘못된 방법 (try-catch 사용)
  2. 올바른 방법 (에러를 반환값으로 처리)
  3. 클라이언트에서 에러 표시하기

3. 404 에러 처리: 페이지를 찾을 수 없을 때

웹사이트에서 가장 흔한 에러 중 하나가 바로 404 에러입니다. Next.js에서는 이를 아주 우아하게 처리할 수 있습니다.

  1. notFound 함수 사용하기
  2. 커스텀 404 페이지 만들기

4. 예상치 못한 에러 처리: Error Boundary 활용하기

예상치 못한 에러는 앱을 완전히 멈추게 할 수 있습니다. 이때 Error Boundary를 사용하면 에러가 발생해도 전체 앱이 죽지 않고 특정 부분만 에러 화면을 보여줄 수 있습니다.

  1. 기본 Error Boundary 만들기
  2. 전역 에러 처리하기

5. 자주 발생하는 Next.js 에러와 해결법

5-1. Module not found 에러

  1. 증상
  2. 원인
  3. 해결법

5-2. Hydration 에러

  1. 증상
  2. 원인
  3. 해결법

5-3. Invalid Hook Call 에러

  1. 증상
  2. 원인
  3. 해결법

6. API 라우트 에러 처리

API 라우트에서도 에러 처리는 매우 중요합니다.

  1. 기본적인 에러 처리
  2. 상세한 에러 응답

7. 이벤트 핸들러에서의 에러 처리

Error Boundary는 이벤트 핸들러의 에러를 잡지 못합니다. 따라서 별도로 처리해야 합니다.

  1. 수동 에러 처리

8. 에러 모니터링과 로깅

프로덕션 환경에서는 에러를 추적하고 모니터링하는 것이 중요합니다.

  1. 에러 로깅 서비스 연동
  2. 커스텀 에러 로깅

9. 에러 예방을 위한 베스트 프랙티스

에러를 처리하는 것도 중요하지만, 애초에 에러가 발생하지 않도록 예방하는 것이 더 중요합니다.

  1. TypeScript 사용하기
  2. 입력값 검증하기
  3. 로딩 상태 관리