notFound

notFound 함수는 특정 라우트 세그먼트 내에서 "찾을 수 없음" 페이지를 렌더링할 수 있게 해주고, 동시에 <meta name="robots" content="noindex" /> 태그를 주입해서 검색엔진이 해당 페이지를 인덱싱하지 않도록 설정해 줍니다.

notFound()

notFound() 함수를 호출하면 NEXT_HTTP_ERROR_FALLBACK;404 에러가 발생하면서 현재 라우트 세그먼트의 렌더링이 종료됩니다. 그런데 이런 에러를 처리하기 위해 "not-found" 파일을 지정해놓으면, 에러 대신 유저에게 보여줄 깔끔한 "페이지를 찾을 수 없습니다" UI를 해당 세그먼트 내에서 렌더링할 수 있어요.

추가로, Next.js 같은 프레임워크에서는 이 notFound 함수를 활용해서 유저가 잘못된 URL에 접근했을 때 단순한 404 페이지 대신, 맞춤형 디자인이나 메시지를 보여줄 수 있기 때문에 사용자 경험(UX)이 훨씬 좋아집니다. 그리고 SEO 측면에서도 noindex 메타 태그를 자동 주입해주니 검색엔진에 불필요한 페이지가 노출되는 것을 방지할 수 있답니다.

마지막으로, notFound를 사용할 때는 다음처럼 작성할 수 있어요:

import { notFound } from 'next/navigation';

export default function Page({ params }) {
  const data = fetchData(params.id);

  if (!data) {
    notFound();
  }

  return <div>{data.title}</div>;
}

데이터가 없을 때 notFound()를 호출해서 404 처리와 함께 적절한 UI가 렌더링되도록 하는 예시입니다.

import { notFound } from 'next/navigation'

async function fetchUser(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({ params }) {
  const { id } = await params
  const user = await fetchUser(id)

  if (!user) {
    notFound()
  }

  // ...
}

참고로 알아두면 좋은 점: notFound() 함수는 return notFound()처럼 반드시 반환문과 함께 사용할 필요가 없어요. TypeScript의 never 타입 덕분에 함수 실행 후 더 이상 코드가 실행되지 않는다는 걸 타입 시스템이 알고 있기 때문이죠.

버전 히스토리

버전	변경 사항
v13.0.0	`notFound` 함수가 도입됨

조금 더 알아볼까요?

notFound() 함수는 Next.js의 새로워진 라우팅 시스템에서 404 페이지를 간편하게 렌더링할 수 있게 해주는데요. 예전에는 직접 return <ErrorPage statusCode={404} /> 같은 식으로 처리하거나 서버 쪽에서 응답 상태를 관리해야 했죠.

하지만 이제는 이렇게 데이터를 비동기로 가져오면서, 만약 데이터가 없으면 notFound()만 호출하면 페이지가 바로 404 페이지로 전환돼서 사용자 경험도 깔끔해졌어요.

또한, notFound()가 never 타입을 반환하는 덕분에 이후 코드는 실행되지 않으니, 따로 return 구문으로 감싸 주지 않아도 된다는 점은 개인적으로 매우 마음에 드는 부분입니다.

이외에도 Next.js 13부터는 이런 여러 편리한 API들이 추가되면서, 개발할 때 코드도 더 간결해지고, 에러 핸들링도 한결 직관적으로 할 수 있게 됐답니다!

Next.js 15에서 404 페이지 만드는 방법(notFound)

notFound

notFound()

버전 히스토리

조금 더 알아볼까요?