웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
React 프레임워크 nextjs에서 커스텀 404(custom 404) 페이지를 만드는 방법을 알아봅니다.
! Custom 404 페이지란?
없는 페이지를 주소창에 입력할 경우 '404 not found page'와 같은 페이지를 찾지 못했다는 메시지가 나타나게 됩니다. 이처럼 찾는 페이지가 없는 경우 404 에러가 발생할 때 서버의 기본 에러 메시지가 아닌 404 에러 페이지를 따로 만들어 보여주는 것이 바로 커스텀 404 웹페이지 입니다.
!! 커스텀 404의 장점은?
404 페이지를 만들면 크게 두 가지 기대 효과가 있습니다. 먼저 좀 더 웹사이트에 맞는 디자인의 웹페이지를 제공할 수 있습니다. 또 하나는 찾지 못했지만 비슷한 링크나 아니면 기타 페이지 링크를 제공하는 것도 가능합니다. 그럼 아래에서 nextjs 404 커스텀 에러 페이지를 만드는 방법을 알아봅니다.
# nextjs 404 커스텀 페이지 만들기
nextjs에서도 커스텀 페이지를 생성할 수 있습니다. 방법은 매우 간단하데 먼저 404.js 파일을 /pages/ 폴더에 합니다.
! 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 />
</>
)
}
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 페이지를 만드는 방법을 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
