Next.js 13 404 page 만들기

404 page를 만들기 위해서는 notFound 라는 함수와 not-found.tsx 파일이 필요하다.

- not-found.tsx

export default function NotFound() {
  return <div>페이지를 찾을 수 없습니다.</div>;
}

- notFound()

import { notFound } from "next/navigation";

export default function page({params}) {
  const pageId = Number(params.id);
  const data = coffeeStoreData.find((item) => {
    return item.id === pageId;
  });
  if (!data) {
    notFound();
  }

  return (
    <>
      <Link href={"/"}>Back to home</Link>
      <div>coffee-store/{data.id}페이지입니다.</div>
    </>
  );
}

해당 id에 맞는 페이지를 찾을 수 없을시에, 만들어준 not-found.tsx 파일이 띄어진다.