not-found.js

not-found 파일은 라우트 세그먼트 내에서 notFound 함수가 던져질 때 UI를 렌더링하는 데 사용됩니다. 커스텀 UI를 제공하는 것 외에도, Next.js는 스트리밍된 응답에 대해서는 200 HTTP 상태 코드를, 스트리밍되지 않은 응답에 대해서는 404 상태 코드를 반환합니다.

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>
  );
}

app/blog/not-found.js

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>
  );
}

알아두면 좋은 점: 예상된 notFound() 오류를 잡는 것 외에도, 루트 app/not-found.js 파일은 전체 애플리케이션에서 일치하지 않는 모든 URL을 처리합니다. 이는 앱에서 처리하지 않는 URL을 방문하는 사용자에게 app/not-found.js 파일에서 내보낸 UI가 표시됨을 의미합니다.

Props

not-found.js 컴포넌트는 어떤 prop도 받지 않습니다.

데이터 가져오기

기본적으로 not-found는 서버 컴포넌트입니다. async로 표시하여 데이터를 가져오고 표시할 수 있습니다:

app/not-found.tsx

import Link from "next/link";
import { headers } from "next/headers";
 
export default async function NotFound() {
  const headersList = headers();
  const domain = headersList.get("host");
  const data = await getSiteData(domain);
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  );
}

app/not-found.jsx

import Link from "next/link";
import { headers } from "next/headers";
 
export default async function NotFound() {
  const headersList = headers();
  const domain = headersList.get("host");
  const data = await getSiteData(domain);
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  );
}

경로를 기반으로 콘텐츠를 표시하기 위해 usePathname과 같은 클라이언트 컴포넌트 훅을 사용해야 하는 경우, 대신 클라이언트 측에서 데이터를 가져와야 합니다.

버전 기록

버전	변경 사항
`v13.3.0`	루트 `app/not-found`가 전역 일치하지 않는 URL을 처리함.
`v13.0.0`	`not-found` 도입.

middleware.js page.js