Next.js 15 App router 404 커스텀

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

목차

1. 에러 페이지 위치 및 소스 코드 작성

2. 확인

 

---

 

404 에러 페이지는 사용자가 요청한 웹 페이지나 리소스를 서버가 찾을 수 없을 때 표시 되는 오류입니다.

상태코드는 404 이며, 사용자가 잘못된 URL로 접근을 하였거나, 리소스가 삭제 되었을 경우 발생합니다.

 

기본적으로 Next.js에서는 자체적으로 404 페이지를 보여줍니다.

 

위와 같이 기본 페이지이만으로 충분히 의미가 전달이 되지만, 프로젝트 진행시 커스텀이 필요한 경우도 있으므로, Next.js 15에서 404 페이지 커스텀 하는 방법을 알아보도록 하겠습니다.

 

---

Next.js 15

App router 방식

 

1. 에러 페이지 위치 및 소스 코드 작성

- app router 방식이므로 /src/app/ 폴더에 not-found.js 파일을 만듭니다.

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

 

2. 확인

- 프로젝트를 열어서 없는 페이지 url 을 입력합니다.

 

 

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.