Skip to main content

커스텀 에러 파일(Custom Error)

넥스트에서는 웹 서비스에서 흔하게 볼 수 있는 에러 페이지 유형들을 쉽게 커스텀할 수 있도록 옵션을 제공합니다.

404 파일​

페이지 주소를 잘못 입력했거나 특정 리소스를 찾을 수 없을 때 "페이지를 찾을 수 없습니다"라는 404 에러를 마주칩니다. 이 에러 페이지를 에러가 발생할때마다 서버에서 생성하는 것보다 애플리케이션을 빌드하는 시점에 미리 생성해 두는게 더 서버의 부하를 줄일 수 있습니다.

404 에러 페이지는 다음과 같이 pages/404.js로 생성합니다.

pages/404.js
export default function Custom404Page() {
  return <h1>404 - Page Not Found</h1>
}

이렇게 하면 넥스트의 404 에러 페이지는 모두 위 파일의 내용으로 대체됩니다.

tip

커스텀 에러 파일은 페이지 컴포넌트로 취급되기 때문에 데이터 호출 메서드인 getStaticProps를 지원합니다. getStaticProps는 빌드 시점에 데이터를 호출하는 메서드이기 때문에 빌드 시점에 생성되는 에러 페이지의 성격상 해당 속성을 사용할 수 있습니다.

넥스트 기본 에러 페이지​

만약 별도의 에러 페이지를 만들고 싶지 않다면 넥스트의 기본 에러 페이지를 사용할 수 있습니다.

import Error from 'next/error'

export default function Page({ error }) {
  if (error) {
    return <Error statusCode={error.status} />
  }
  return <div>Hello Next</div>
}

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
  } catch(error) {
    return {
      props: { error }
    }
  }
}