[Next.Js] 404 페이지 / Not-Found Errors 처리

Not-Found

<요청한 페이지가 존재하지 않을 때, 오류를 처리하는 방법>

 

Next.js는 기본적으로 페이지가 존재하지 않을 경우, 404 페이지가 출력된다.

 

하지만 에러페이지를 custom할 수 있다.

Next.js에서 명시한 규칙의 파일명 not-found.tsx 파일을 만들어 사용하면 된다.

 

아무 주소를 입력했을 때 내가 설정한 문구가 뜬다.

 

 

 

Global not-found와 Local not-found

 

Global not-found : 말그대로 전체적인 범위에 대해 적용되는 404페이지이다.

'app/not-found.tsx'로 위에서 만든 것이 Global not-found이다.

 

Local not-found : 특정 라우트 내에서만 적용되는 404페이지이다

앱 전체 범위 뿐만 아니라 '/pages/posts/[id].tsx'와 같은 동적 라우트에서 해당 id가 존재하지 않는 경우에 대해 별도의 404페이지를 정의할 수 있다. 사용자에게 더 자세하고 구체적인 에러메세지를 제공하는 경우에 사용하는 것이 좋다.

 

app/users/[id]/not-found.tsx

import React from "react";

const UserNotFound = () => {
  return <div>사용자가 존재하지 않습니다.</div>;
};

export default UserNotFound;

 

 

app/users/[id]/page.tsx

import React from "react";
import { notFound } from "next/navigation";

interface Props {
  params: { id: number };
}
const UserDetailPage = ({ params: { id } }: Props) => {
  if (id > 10) notFound();

  return <div>UserDetailPage {id}</div>;
};

export default UserDetailPage;

 

 

id가 10을 넘어가면 설정해놓은 오류 메세지가 뜬다.

 

 

 

 

 

 

---