https://nextjs.org/docs/advanced-features/custom-error-page

에러 페이지를 서버에서 매번 렌더링 하는 것은 Next.js 서버에 과부화를 줄 수 있다. 이를 방지하기 위해 별도의 파일을 생성하지 않아도 되도록, 넥스트 Js에서는 커스텀 에러페이지를 만들 수 있는 기본 프레임을 제공한다.
크게는 404에러(not found)와 500에러(서버 에러)를 가지고 있으며, 이외의 에러들은 _error.js 라는 파일명으로 커스텀 할 수 있다.

특정 에러 페이지

404 error page

pages/404.js 파일을 만들어 커스텀 할 수 있다. 이 파일은 빌드 타임에 정적으로 생성된다.

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

500 error page

pages/500.js 파일을 만들어 커스텀 할 수 있다. 이 파일은 빌드 타임에 정적으로 생성된다.

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

사실 둘이 파일 명의 숫자만 다르게 해주면 된다^^..

📌 만약 빌드 타임에 데이터를 fetch 하고 싶다면 페이지 내에서 getStaticProps 사용이 가능하다.

Next/Error 커스텀

pages/_error.js

넥스트에서 자체적으로 제공해주는 에러태그는 서버와 클라이언트 모두에서 동작한다. 이 에러태그를 커스텀하고 싶다면 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

최근 Error가 Next.js의 데이터 패치 함수 (getStaticProps, getServerSideProps 등) 사용을 지원하지 않는다고 한다. 참고해서 사용하기