[Next.js] 커스텀 에러 페이지 만들기 (feat. 404 에러 페이지)

SEO(검색엔진) 최적화에 있어서도 404에러 페이지를 커스텀 하는 것이 좋다고 한다.

그래서 Next.js 에서 404에러 페이지를 커스텀 할 수 있는 방법을 찾아보았다.

 

pages 폴더 하위에 404.js(or 404.ts) 파일을 만들어 해당 파일에 404 에러 페이지 커스텀을 해주면 된다.

(404 페이지에서 데이터를 사용해야한다면 getStaticProps를 사용할 것을 권장한다.)

 

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

 

404 외에도 401, 402, 500, 503 등 다양한 HTTP 에러가 존재하는데

500.js(or 500.ts)로 각각의 에러 페이지를 커스텀할 수 있지만,

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

모든 에러를 다루고 싶다면 pages 하위에 _error.js(or _error.ts) 파일에서 작업하면 된다.

// 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.js는 개발환경에서는 작동하지 않고 production 환경에서만 작동한다는 것이다.

개발환경에서는 오류의 위치를 쉽게 파악할 수 있도록 콜 스택과 함께 에러만 발생한다고 한다.

 

 

참고: https://nextjs.org/docs/advanced-features/custom-error-page#404-page