[Next JS] notFound, 404 Default page

이번에는 next에서 제공하는 404 페이지로 유도하는 법을 적어보고자 한다.

시나리오

유저는 id 1부터 10까지만 있다.
localhost:3000/user/1 - localhost:3000/user/10
그런데 사용자가 임의로 11이나 다른 것들을 입력했을 때 404 페이지로 유도하고자 한다.

사용자가 잘못된 루트로 이동 localhost:3000/user/11

진행

import { notFound } from 'next/navigation'를 해준다.
그리고 컴포넌트에서 유저가 없으면 notFound함수를 실행시킨다.
if (!user) notFound();

결과

그러면 404페이지가 잘 표시되는걸 볼 수 있다.

Custom 404 page

404 페이지를 직접 꾸미려면 not-found.tsx 라는 파일을 만들고 다음과 같이 마음대로 꾸며주면 된다.

users
 ┣ [userId]
 ┃ ┣ components
 ┃ ┃ ┗ UserPost.tsx
 ┃ ┗ page.tsx
 ┣ not-found.tsx
 ┗ page.tsx

import { Metadata } from 'next';
import React from 'react';

export const metadata: Metadata = {
  title: 'User Not Found',
  description: 'Failed to find the user.',
};

const NotFound = () => {
  return <div>User Not Found!</div>;
};

export default NotFound;