✏️ Next.js
[app] 13버전에서 404페이지 커스텀하기
category
✏️ Next.js
date
thumbnail
slug
next-js-13버전에서-404페이지-커스텀하기
author
status
Public
tags
app router
summary
type
Post
유튜브 강의를 보며 Next.js 에 대해 공부하고 있었는데,
예전 버전을 이용한 강의였어서 강의에서처럼 404 페이지를 커스텀하기 위해 pages/404.js 를 만들었는데 커스텀한 대로 보이지 않았다. 이를 해결하기 위해 구글링을 해, 공식문서를 찾았지만… 이전 버전 문서였기에 여전히 작동하지 않았다.
다행히 스택오버플로우를 통해 13버전에서 404페이지를 커스텀하는 방법을 찾았고, 나처럼 헤매는 사람들이 있을 것 같아 블로그를 작성하게 되었다.
이전 공식 문서에는 아래처럼 Routing 이라는 메뉴 안에서 Custom Errors 라는 포스팅에 나와있으며 내용은 아래 사진과 같다. pages 폴더 안에 404.js 라는 이름으로 파일을 만들면 된다고 하지만 13버전에서는 작동하지 않는다.
13버전에서는 다음과 같이 찾을 수 있다.
File Conventions 라는 메뉴 안에서 not-found.js 라는 이름으로 되어있다.
pages 폴더가 아니라 app 폴더 안에서 not-found.js 라는 이름으로 파일을 만들면 된다.
결과
