NextJS: Custom Error Page

404 페이지

404 페이지는 매우 자주 액세스될 수 있습니다. 모든 방문에 대해 에러 페이지를 서버 렌더링하면 Next.js 서버의 부하가 증가하게 됩니다. 이로 인해 비용이 증가하고 느린 사용자 경험이 발생할 수 있습니다.

위와 같은 문제를 피하려면 Next.js는 추가 파일을 추가하지 않아도 기본적으로 정적 404 페이지를 제공합니다.

404 페이지 커스터마이징

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

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

참고: 빌드 시 데이터를 가져와야하는 경우 이 페이지 내에서 getStaticProps를 사용할 수 있습니다.

500 페이지

매번 방문할 때마다 에러 페이지를 서버 렌더링하면 에러 응답에 대한 복잡성이 증가됩니다. 사용자가 가능한 빠르게 에러 응답을 받을 수 있도록 Next.js는 추가 파일을 추가하지 않아도 기본적으로 정적 500 페이지를 제공합니다.

500 페이지 커스터마이징

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

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

참고: 빌드 시 데이터를 가져와야하는 경우 이 페이지 내에서 getStaticProps를 사용할 수 있습니다.

고급 에러 페이지 커스터마이징

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는 프로덕션에서만 사용됩니다. 개발 중에는 에러가 발생하여 오류가 발생한 위치를 파악할 수 있습니다.

내장된 에러 페이지 재사용하기

내장된 에러 페이지를 렌더링하려면 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에서 사용하는 기본 컴포넌트를 내보내는데 이는 내장된 에러 페이지에서 사용됩니다.

주의 사항

• Error는 현재 getStaticProps나 getServerSideProps와 같은 Next.js 데이터 패칭 메서드를 지원하지 않습니다.
• _error와 _app과 마찬가지로 예약된 경로입니다. _error는 에러 페이지의 커스텀 레이아웃과 동작을 정의하는 데 사용됩니다. 직접 라우팅하거나 사용자 정의 서버에서 렌더링할 때 /_error는 404를 렌더링합니다.