Next에서 조건부 렌더링 없이 404 페이지 만들기(컴포넌트 x)

그동안 404인 경우에는 직접 만든 에러 컴포넌트를 렌더링 하는 방식을 사용했다.
Next에서는 not-found.tsx를 사용해서 페이지로 좀 더 간편하게 처리 가능하대서 이번에 적용했다.
 

* not-found.tsx 페이지와 일반 NotFound 컴포넌트 차이

1. not-found.tsx 파일 
Next.js에서 자동으로 404 페이지 처리(자동 렌더링)
Next.js는 SSG와 SSR에서 데이터가 없을 때 not-found.tsx를 자동으로 사용
위치 : app 폴더 내부

2. 일반 NotFound 컴포넌트 
일반적으로 조건부 렌더링(수동 렌더링)
위치 : 정해진 것은 아니나, 보통 component 폴더 내부에 생성
 
 

* 사용법

1.

export default function NotFound() {

  return <p>No users found😭</p>;

}

// not-found.tsx

 
page랑 같은 위치에 not-found.tsx 파일을 만들어준다.
 
 
2.

import { notFound } from "next/navigation";

export default async function page({ params: { username } }: Props) {

  const user = await getUserProfile(username);

 

  if (!user) {

    notFound();

  }

 
 
3. 

기본으로 넥스트에서 제공되는 404 탈출~!

사실 크게 차이가 있을까 했는데
data가 없거나 error인 상태를 따로 처리해 줄 필요가 없어 편하다.

 

페이지마다 에러를 다르게 뜨게 하고 싶으면 이렇게 폴더별로 생성해도 편할 거 같다! 

공통으로 쓰고 싶으면 app 디렉토리 상단에 생성하면 된다고 한다~