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

오늘은 NEXT JS에서 커스텀 404 에러 페이지를 만드는 방법에 대해 알아보도록 하겠습니다.

 

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

 

Next의 기본 에러 페이지

 

기본 에러 페이지 자체로도 의미 전달은 충분하지만 현재 진행하고 있는 프로젝트에 따라 언어나 스타일링을 커스터마이징 해줘야 할 필요가 생기기 마련입니다. 

 

---

404 페이지 커스터마이징하기

 

기존 에러 페이지를 사용하지 않고 커스터마이징 하기 위해선 pages 폴더에 404.js (또는 ts 파일)을 만들어주시기만 하면 됩니다. (페이지 컴포넌트 이름은 상관없지만 반드시 파일 이름은 404.js로 지정해주셔야 합니다).

 

해당 404.js 파일은 기본적으로 빌드 타임에 정적으로 만들어지기 때문에 빌듯이 데이터를 불러와야 하는 작업이 있다면 getStaticProps를 통해 가져오도록 권장하고 있습니다. 아직 getStaticsProps에 대해 잘 모르신다면 전에 필자가 올린 Pre Rendering에 관한 글을 읽어보시기를 추천드립니다.

 

pages/404.js

import HeadMeta from "components/HeadMeta";
import Icon from "components/Icon";
import InlineMessage from "components/InlineMessage";
import Title from "components/Title";
import styles from "styles/pages/CustomError.module.scss";

const Custom404 = () => {
  return (
    <div className={styles.error}>
      <HeadMeta title="404 에러 | 정리습관" />
      <Title level={2} color="#fff" className={styles.status}>
        404 에러
      </Title>
      <Icon type="box_empty" width={50} height={50} />{" "}
      <InlineMessage className={styles.message}>
        페이지를 찾을수 없어요
      </InlineMessage>
    </div>
  );
};

export default Custom404;

 

필자는 위와 같이 웹앱에 테마에 맞게 아이콘과 폰트 스타일이 추가된 컴포넌트를 사용해서 에러 페이지를 커스터마이징 했습니다. 이런 식으로 404.js라는 파일만 정의를 해주면 별도의 설정 없이 Next JS가 알아서 기존의 에러 페이지 대신 커스터마이징 된 에러 페이지를 보여주게 됩니다.

 

커스터마이징된 404 에러페이지

---

다른 HTTP 오류코드는?

 

물론 404 에러가 가장 빈번하게 일어나는 HTTP 오류이긴 하지만 당연히 다른 상태의 오류도 존재하기 때문에 이를 완전히 무시할 수는 없습니다.

 

What is an HTTP Error (출처: https://serverguy.com/security/what-is-an-http-error-common-http-errors/)

 

이러한 오류코드를 사용자들에게 좀 더 구체적으로 보여주고 싶다면 공식문서에서 안내하듯이 Next의 Error 컴포넌트를 커스터마이징 해서 사용해주시면 됩니다. Next의 Error 컴포넌트를 커스터마이징 하기 위해 pages에서 _errors.js (또는 ts)를 만들어줍시다.

 

pages/_error.js 

// https://nextjs.org/docs/advanced-features/custom-error-page

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `${statusCode} 서버 오류`
        : "클라이언트 오류"}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

 

pages/home

// https://nextjs.org/docs/advanced-features/custom-error-page

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.statusCode
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

export default function Home({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  } // 데이터 불러오는 작업중 http 에러시 위에 설정해둔 에러컴포넌트에 해당 에러코드 전달

  return <div>Next stars: {stars}</div>
}

 

한 가지 주의하셔야 할 점은 pages/_error.js는 개발환경에서는 작동하지 않고 production 환경에서만 작동합니다. 개발환경에서는 오류의 위치를 쉽게 파악할 수 있도록 콜 스택과 함께 에러만 발생합니다

 

보시다시피 Next에서 에러 처리를 하는 방법은 크게 어렵지 않습니다. 딱히 커스터마이징 해야 할 필요가 없다면 처리를 해주지 않아도 되지만 현재 진행하고 있는 프로젝트 레이아웃 또는 스타일링에 맞춰 바꿔줘야 할 경우 위에서 안내한 방법으로 설정해주시면 됩니다.

 

좀 더 구체적인 에러 처리 방법에 대해 궁금하시다면 Next의 공식문서 custom-error-page를 확인해주시길 바랍니다.

 

 

출처: https://nextjs.org/docs/advanced-features/custom-error-page