[NextJS] 404, 500 오류 페이지 커스텀 방법

NextJS에서는 기본적으로 라우트 설정이 되어있지 않는 페이지에 대해 서버사이드 랜더링을 하지 않게 아래와 같은 404 오류 페이지를 보여주도록 되어있다.

 

* 공식 문서 *
https://nextjs.org/docs/advanced-features/custom-error-page

404 오류 페지이

 

 

---

1. 404 페이지 커스텀 방법

기존 오류 페이지를 사용하지 않기 위해서는 pages폴더에 404 파일을 생성한다.

404 파일

( 404.tsx )

export default function NotFound(){
    return "What are u doing here"
}

• 원하는 화면으로 커스텀
•  404 파일은 기본적으로 빌드 타임에 만들어 지기 때문에 데이터를 불러오는 작업이 있다면 getStaticProps를 통해 가져와야한다.

 

---

2. 500 페이지 커스텀 방법

NextJS의 Error 컴포넌트를 커스터마이징 해준다. pages폴더에 _error 파일 생성

 

( _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

• 원하는 화면으로 커스텀
• 개발환경에서는 작동하지 않고 production 환경에서만 작동한다.
• 개발환경에서는 오류의 위치를 쉽게 파악할 수 있도록 콜 스택과 함께 에러만 발생