Next.js - 에러 페이지 만들기

carrot·2021년 10월 22일
1

Nextjs

목록 보기
10/15
post-thumbnail

_error

넥스트에서 빌드된 프로덕션 환경에서 에러가 발생한다면 에러 페이지로 넘어가게 됩니다. 넥스트의 커스텀 에러 페이지를 만들 수 있는 기능을 이용하여 에러 페이지를 만들어 보도록 하겠습니다.

1. custom 500 page

pages 폴더에 _error.jsx 파일을 만들게 된다면 에러가 발생하였을 때 이 페이지를 보여주게 됩니다.

> pages/_error.jsx

const Error = () => {
  return <p>에러가 발생했습니다.</p>
};

export default Error;

해당 파일을 생성 후 프로젝트를 빌드 한 뒤, 프로덕션 환경으로 실행하면 에러 페이지가 적용됩니다.

2. custom 404 page

이번에는 커스텀 404 페이지를 만들어 보도록 하겠습니다.
pages 폴더에서 404.jsx파일을 만들어주게 되면 페이지를 찾을 수 없을 때 이 페이지로 오게 됩니다.

> pages/404.jsx

const NotFound = () => {
  return <p>404 페이지 입니다.</p>;
}

exort default NotFound;
profile
당근같은사람

0개의 댓글