next에서 404 페이지 처리하기

404 처리하기 위해서 notFound 컴포넌트를 활용하기!

 기본적으로 next.js에서는 경로가 잘못되면 404페이지를 제공한다. next 13.3버전 이후에는 app 경로에 있는 not-found.tsx 파일로 404페이지를 커스텀 할 수 있도록 바뀌었다.

 404를 제외하고도 개발자가 처리할 수 있는데 next/navigation에 notFound함수를 import 해서 활용할 수 있다.

import { notFound } from "next/navigation";

export default function Home() {
  notFound();
  return <div></div>;
}

 notFound() 함수를 호출하면 아래와 같이 네트워크 창에서 404에러를 발생시키는 것을 알 수 있다.



 notFound() 함수는 자신의 상위 디렉토리에 대하여 체이닝을 통해 가까운 not-found 컴포넌트를 찾아 해당 컴포넌트를 호출하도록 하는데, 열심히 여기저기에 not-found를 각각 만들어 주다가 보니 신기한 에러 이슈를 만났다.

(vscode 이슈인지 next이슈인지는 모르겠으나..)

 위의 디렉토리 사진에서 볼 수 있듯이 not-found 컴포넌트는 page 컴포넌트보다 위쪽에 위치하게 되는 것이 일반적인데 이 위치가 반대로 되게 되면 해당 not-found 컴포넌트를 호출하지 않고 그것을 제외한 상위에 있는 not-found 컴포넌트를 찾아간다.