next.js에서 404 페이지를 쉽게 만들 수 있다.

방법은 바로 'not-found'라는 이름의 파일을 만들어 주면 된다.

가장 최상위 경로에 생성하면 된다.

not-found.tsx

const NotFound = () => {
  return (
    <>
      <h1>NotFound Component</h1>
    </>
  );
};
export default NotFound;

이런 식으로 페이지를 만들어주면 이상 경로로 접속했을 때 내가 만든 404페이지가 보여진다!

응용

"use client";

import { useRouter } from "next/navigation";
import { MdError } from "react-icons/md";

export default function NotFound() {
  const router = useRouter();
  return (
    <>
      <div className="flex flex-col items-center justify-center text-center min-h-screen">
        <MdError className="text-[100px] text-rose-500" />
        <h1 className="text-[50px] font-bold">...앗...</h1>
        <p className="max-w-[300px] text-lg">
          이 페이지는 사라졌거나 다른 페이지로 변경되었어요. 주소를 다시 확인해
          주세요.
        </p>
        <div className="flex gap-4 mt-4">
          <button
            className="w-[95px] bg-blue-500 rounded-md text-lg p-4 text-white"
            onClick={() => router.back()}
          >
            이전으로
          </button>
          <button
            className="w-[95px]  bg-rose-500 rounded-md text-lg p-4 text-white"
            onClick={() => router.push("/")}
          >
            홈으로
          </button>
        </div>
      </div>
    </>
  );
}

이렇게 useRouter를 사용해서 홈페이지나 로그인 페이지로 이동하게끔 만들 수도 있다!