React 프레임워크 nextjs에서 커스텀 404(custom 404) 페이지를 만드는 방법을 알아봅니다.


! Custom 404 페이지란?
없는 페이지를 주소창에 입력할 경우 '404 not found page'와 같은 페이지를 찾지 못했다는 메시지가 나타나게 됩니다. 이처럼 찾는 페이지가 없는 경우 404 에러가 발생할 때 서버의 기본 에러 메시지가 아닌 404 에러 페이지를 따로 만들어 보여주는 것이 바로 커스텀 404 웹페이지 입니다.


!! 커스텀 404의 장점은?
404 페이지를 만들면 크게 두 가지 기대 효과가 있습니다. 먼저 좀 더 웹사이트에 맞는 디자인의 웹페이지를 제공할 수 있습니다. 또 하나는 찾지 못했지만 비슷한 링크나 아니면 기타 페이지 링크를 제공하는 것도 가능합니다. 그럼 아래에서 nextjs 404 커스텀 에러 페이지를 만드는 방법을 알아봅니다.



# nextjs 404 커스텀 페이지 만들기
nextjs에서도 커스텀 페이지를 생성할 수 있습니다. 방법은 매우 간단하데 먼저 404.js 파일을 /pages/ 폴더에 합니다.
404.js 또는 jsx, ts, tsx의 static 파일을 /pages/에 추가하기
이제 없는 페이지로 접근하여 404 에러가 발생하면 자동으로 /pages/에 있는 404.js 파일을 불러오게 됩니다. js 템플릿 파일만 만들고 생성하면 커스텀 404 에러 페이지는 완료하게 됩니다.


! nextjs 404.js 파일 만들기, 커스텀 404
그럼 간단하게 404 페이지를 작성해보도록 하겠습니다. 아래 404 페이지는 간단하게 현재 404 임을 출력하고 Header, Footer 컴포넌트만 추가하였습니다.

@ /pages/404.js
import Header from 'header.js';
import Footer from 'footer.js';

export default function Custom404() {
  return (
    <>
      <Header />
      <h1>404 Error - Page Not Found</h1>
      <Footer />
    </>
  )
}

이제 4040 페이지가 완성되었습니다. 없는 주소로 방문자가 접근할 경우 Header, Footer 컴포넌트와 함께 '404 Error - Page Not Found'라는 메시지를 출력하게 될 것입니다.

여기까지 nextjs에서 404 페이지를 만드는 방법을 알아봤습니다.