문제 상황

Next.js 앱 라우터 환경에서 HTTP 에러 코드에 따른 차별화된 사용자 인터페이스를 제공하고 싶었습니다.

404, 500, 403 등 각기 다른 에러 상황에 맞는 적절한 안내 메시지와 디자인을 보여주는 것이 목표였습니다.

페이지 라우터 vs 앱 라우터

페이지 라우터는

• 각 에러 코드마다 독립적인 파일을 생성하여 관리할 수 있어서 구조가 단순하고 이해하기 쉬웠습니다.
• 404.tsx, 500.tsx, _error.tsx …

하지만, 앱 라우터는

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

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

시도한 해결 방법들

방법 1: 커스텀 에러 페이지로 리다이렉트

• app/error/[code]/page.tsx 구조로 에러 페이지 생성