[Next] Custom Error Page

Next.js

Chunho 2022. 9. 6. 17:53

NextJS에서 커스텀 된 에러 페이지를 띄워주고 싶으면, NextJS에서 자체적으로 제공하는 기능을 사용하면 편리하다.

Advanced Features: Custom Error Page | Next.js

Override and extend the built-in Error page to handle custom errors.

nextjs.org

만약 404Error가 발생했을 때 띄워줄 커스텀 페이지를 만들고 싶으면 pages 폴더에 404.tsx 파일을 생성해주면 된다.

같은 방식으로 500Error가 발생했을 때 띄워줄 커스텀 페이지는 pages 폴더에 500.tsx 이름의 파일을 생성해준다.

전체적인 에러를 핸들링해주는 커스텀 페이지일 경우 같은 폴더에 _error.tsx 파일을 생성해준다.