Custom Errors

404 Page

404 페이지는 자주 접근될 수 있습니다. 방문할 때마다 서버에서 에러 페이지를 렌더링하면 Next.js 서버의 부하가 증가합니다. 이는 비용 증가와 느린 사용자 경험으로 이어질 수 있습니다.

이러한 문제를 피하기 위해, Next.js는 추가 파일 없이 기본적으로 정적 404 페이지를 제공합니다.

Customizing The 404 Page

커스텀 404 페이지를 만들려면 pages/404.js 파일을 만들면 됩니다. 이 파일은 빌드 시 정적으로 생성됩니다.

pages/404.js

export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

알아두면 좋은 점: 빌드 시 데이터를 가져와야 하는 경우 이 페이지 내에서 getStaticProps를 사용할 수 있습니다.

500 Page

방문할 때마다 오류 페이지를 서버에서 렌더링하면 오류에 대한 응답이 복잡해집니다. 사용자가 최대한 빠르게 오류에 대한 응답을 받을 수 있도록 Next.js는 추가 파일 없이 기본적으로 정적 500 페이지를 제공합니다.

Customizing The 500 Page

500 페이지를 사용자 정의하려면 pages/500.js 파일을 만들면 됩니다. 이 파일은 빌드 시 정적으로 생성됩니다.

pages/500.js

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

알아두면 좋은 점: 빌드 시 데이터를 가져와야 하는 경우 이 페이지 내에서 getStaticProps를 사용할 수 있습니다.

More Advanced Error Page Customizing

500 오류는 클라이언트 측과 서버 측에서 모두 Error 컴포넌트에 의해 처리됩니다. 이를 재정의하려면 pages/_error.js 파일을 정의하고 다음 코드를 추가하세요:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}
 
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}
 
export default Error

pages/_error.js는 프로덕션에서만 사용됩니다. 개발 환경에서는 오류가 발생한 위치를 알 수 있도록 콜 스택과 함께 오류가 표시됩니다.

Reusing the built-in error page

기본 내장된 오류 페이지를 렌더링하려면 Error 컴포넌트를 가져와 사용할 수 있습니다:

import Error from 'next/error'
 
export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()
 
  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}
 
export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }
 
  return <div>Next stars: {stars}</div>
}

Error 컴포넌트는 statusCode와 함께 텍스트 메시지를 전달하려는 경우 title을 프로퍼티로 받을 수 있습니다.

커스텀 Error 컴포넌트가 있는 경우 해당 컴포넌트를 가져와 사용해야 합니다. next/error는 Next.js에서 사용하는 기본 컴포넌트를 내보냅니다.

Caveats

Error는 현재 getStaticProps나 getServerSideProps와 같은 Next.js Data Fetching methods를 지원하지 않습니다.
_error는 _app과 마찬가지로 예약된 경로명입니다. _error는 오류 페이지의 사용자 정의된 레이아웃과 동작을 정의하는 데 사용됩니다. /_error는 routing을 통해 직접 접근하거나 custom server에서 렌더링할 경우 404를 렌더링합니다.

API Routes Internationalization