[Next.js 15] 🚫 404 페이지 처리하기 (not-found.tsx)

Next.js App Router에서는 존재하지 않는 경로로 이동하면 자동으로 404 페이지가 보여진다.

---

기본 동작

경로에 해당하는 폴더나 파일이 없으면, 아래와 같은 기본 404 페이지가 보여진다.

---

🛠️ 직접 404 페이지 만들기

404 페이지를 커스터마이징하려면 해당 폴더에 not-found.tsx 파일을 만들면 된다.

• app/ 폴더에서 만든 경우 : 전역 404 페이지
• 특정 폴더에 만든 경우: 해당 경로 전용 404 페이지

  📌 우선순위는 page.tsx와 같은 위치의 not-found.tsx가 가장 높다!

---

URL 파라미터에 따라 메시지 바꾸기

동적 라우팅(params)를 사용해, URL에 따라 다른 메시지를 표시하고 싶을 수 있다.
이때는 **usePathname()훅** 을 이용해 경로에서 값을 추출해 표시하면 된다.

📌 단, 훅은 클라이언트 컴포넌트에서만 사용 가능하므로 "use client" 선언이 필요하다.

// app/products/[productId]/reviews/[reviewId]/not-found.tsx

"use client";
import { usePathname } from "next/navigation";

export default function NotFound() {
  const pathname = usePathname();
  const productId = pathname.split("/")[2];
  const reviewId = pathname.split("/")[4];
  
  return (
    <div>
      <h1>리뷰 Not Found</h1>
      <h2>제품 {productId}에 대한 리뷰 {reviewId}가 없습니다.</h2>
    </div>
  );
}

---

서버 컴포넌트에서 notFound() 호출하기

특정 조건에 따라 404 페이지로 전환하고 싶다면
next/navigation 에서 제공하는 notFound() 함수를 사용할 수 있다.

import { notFound } from "next/navigation";

export default async function ProductReview({
  params,
}: {
  params: Promise<{ productId: string; reviewId: string }>;
}) {
  const { productId, reviewId } = await params;
  if (parseInt(reviewId) > 1000) {
    notFound(); // → 자동으로 not-found.tsx를 렌더링함
  }

  return (
    <h1>
      ProductDetail {productId} {reviewId}
    </h1>
  );
}

---

결과 화면