Next.JS - 에러페이지 커스텀

Next.js 는 404에러 및 500에러를 담당하는 페이지를 커스텀 가능하다

1. 404 Page

구현되지 않는 페이지로 접속 시 보여주는 페이지이다.
파일명은 404.tsx로하여 원하는 형식으로 에러 페이지를 구성해준다

export default function ErrorPage404() {
  return (
    <>
      <NoneData text="해당 페이지는 존재하지 않습니다." />
    </>
  );
}

2. 500 Page

빌드환경에서 에러가 발생할 시 이동하는 페이지이다.
파일명은 _document.tsx로 구성해준다.

import NoneData from "@/components/NoneData";

export default function ErrorPage500() {
  return (
    <>
      <NoneData text="현재 서비스가 원활하지 않습니다." />
    </>
  );
}