Next.js의 Not Found Routes

개발자들이 싫어하는 숫자. "404"

Next.js에는 특별한 파일들이 존재한다.

page.tsx 와 layout.tsx가 대표적인 파일이다.

근데, 여기에 추가적으로 특별한 파일이 하나 더 있다. 이 부분을 설명하고자 한다.

404 not found

유저가 잘못된 경로로 이동하면 뜨는 not found를 Next.js에서는 기능으로 넣어두었다.

만드는 법은 쉽다.

일단 폴더명은 다음 폴더 이름으로 "무조건" 설정해야 한다.

app/not-found.tsx

이후 본인이 코드를 작성해 주면 된다.

(예시코드)

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

---

이런식으로 만들어두면, 사용자 경험을 좀 더 좋게 만들어 줄 수 있다.

참고한 문서

https://velog.io/@chhw130/NotFound%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0with-NextJs

NotFound페이지 구성하기(with NextJs)

---

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

File Conventions: not-found.js | Next.js

---

노마드코더 영상

https://nomadcoders.co/nextjs-for-beginners/lectures/4695

All Courses – 노마드 코더 Nomad Coders

(무료임 ㅇㅇ)

---