Next.js 에러 페이지 Custom 404 page

게시글 작성 전에 오류 페이지를 FrontEnd 섹션에 작성할지, BackEnd 섹션에 작성할지 고민했습니다. 사용자에게 보여지는 오류 페이지 측면에서 접근했기 때문에, 이 내용을 FrontEnd 섹션에 다루기로 결정했습니다.

 

기본 에러 페이지 관리

Next.js에서는 기본적으로 두 종류의 에러 페이지를 자동으로 처리합니다: 404 페이지와 500 페이지입니다. 사용자 정의 에러 페이지를 만들기 위해서는 pages 디렉토리(또는 Next.js 14부터 도입된 app 디렉토리) 내에 해당 에러 코드 이름을 가진 React 컴포넌트를 생성합니다.

• 404 에러 페이지: pages/404.js 또는 app/page/404.page.js에 사용자 정의 404 페이지를 구현할 수 있습니다.

• 500 에러 페이지: pages/500.js 또는 app/page/500.page.js에 사용자 정의 500 에러 페이지를 구현할 수 있습니다.

 

app 디렉토리를 사용한 에러 페이지 관리

Next.js 14의 새로운 app 디렉토리 구조를 활용하여 에러 페이지를 관리하는 방법은 다음과 같습니다:

1. app 디렉토리 생성: 프로젝트 루트에 app 디렉토리를 생성합니다.

2. 에러 페이지 파일 생성: 에러 페이지에 해당하는 React 컴포넌트를 app/page 디렉토리 내에 생성합니다. 예를 들어, 404 에러 페이지는 app/page/404.page.js, 500 에러 페이지는 app/page/500.page.js에 해당합니다.

 

// app/page/404.page.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

// app/page/500.page.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

 

1. 커스텀 에러 처리 로직 추가 (옵션): 필요에 따라 _error.page.js 파일을 app/page 디렉토리 내에 추가하여 다양한 HTTP 상태 코드를 처리하는 커스텀 로직을 구현할 수 있습니다.

이 방법을 통해, Next.js 애플리케이션에서 발생할 수 있는 다양한 에러 상황에 대응하는 사용자 정의 에러 페이지를 제공할 수 있습니다. Next.js 14의 app 디렉토리 구조는 프로젝트의 확장성과 유지 보수성을 향상시키는 데 기여할 수 있습니다.

 

전역 에러 페이지

• app 디렉토리 루트에 error.page.js를 배치하면, 이는 전역 에러 페이지로 작동하여 애플리케이션 전체에서 발생하는 모든 에러에 대해 공통의 에러 처리를 제공합니다.

• 즉, app/error.page.js는 애플리케이션의 모든 부분에서 발생하는 에러를 잡아내어 동일한 에러 페이지를 보여주게 됩니다.

 

서브 디렉토리 별 에러 페이지

• app/loa 또는 app/lol와 같은 서브 디렉토리에 대해 별도의 에러 페이지를 정의하고자 할 때는 Next.js 현재 버전에서 직접적으로 지원되지 않는 기능입니다.

• 서브 디렉토리 별로 별도의 에러 처리 로직을 구현하고자 한다면, 이는 에러 상황을 감지하고 해당 서브 디렉토리에 맞는 에러 페이지를 동적으로 렌더링하는 사용자 정의 로직을 구현함으로써 해결할 수 있습니다. 이 경우, 페이지 또는 컴포넌트 내에서 에러를 catch하고, 조건에 따라 다른 에러 페이지 컴포넌트로 라우팅하는 방식을 사용할 수 있습니다.

결론

• app/error.page.js는 전역적인 에러 페이지로 작동하여 애플리케이션 전체에 대한 기본 에러 핸들링을 제공합니다.

• Next.js의 현재 버전에서는 서브 디렉토리 별로 별도의 에러 페이지를 자동으로 처리하는 기능을 직접적으로 제공하지 않습니다. 이러한 기능이 필요한 경우, 사용자 정의 로직을 통해 구현해야 합니다.

Next.js 프로젝트를 구성하면서 이와 같은 세부적인 동작 방식이나 요구 사항에 대한 최신 정보를 얻고자 한다면, Next.js의 공식 문서를 참조하거나 커뮤니티 포럼 및 GitHub 이슈를 통해 추가적인 가이드라인을 찾는 것이 좋습니다.