Next.js 앱 라우터 에러 핸들링: 각 에러 코드에 대한 UI 구현

요약

• 문제:
• 접근:
• 이유:
• 효과:

문제 상황

Next.js 앱 라우터 환경에서 HTTP 에러 코드에 따른 차별화된 사용자 인터페이스를 제공하고 싶었습니다. 404, 500, 403 등 각기 다른 에러 상황에 맞는 적절한 안내 메시지와 디자인을 보여주는 것이 목표였습니다.

탐구

페이지 라우터 vs 앱 라우터

페이지 라우터였다면, 각 에러 코드마다 독립적인 파일을 생성하여 관리할 수 있어 구조가 단순하고 이해하기 쉬웠음(404.tsx, 500.tsx, _error.tsx …)

하지만, 앱 라우터에서는

• error.tsx: 런타임 에러를 처리. 에러 상태 코드에 대한 정보는 받지 못함
• not-found.tsx: 404 에러 처리
• 에러 발생 시 해당 컴포넌트 트리를 비우고 에러 UI로 대체(error.tsx)

이러한 변화로 인해 HTTP 상태 코드별 맞춤 UI를 구현하기 위해서는 새로운 접근법이 필요했습니다.

시도한 해결 방법