NextJS 블로그 만들기 - NotFound

웹페이지에는 일부 소스가 없거나 존재하지 않는 페이지, 내용이 없는 부분을 사용자 입장에서 화면 처리해주는 기능이 필요하다.

기본적인 화면 처리만 보여주게 되면 사용자 경험적인 측면을 고려하지 않고 웹에 대해 미숙한 사용자가 보게 되면 웹 페이지에 대한 신뢰도가 떨어지는 결과를 가져오기에 경험적인 측면을 고려해주는 것이 좋다.
이에 올바른 경로로 유도하여 웹 페이지 이탈률을 감소 시켜주는것이 좋다.

블로그 작업을 하면서, Not Found 기능을 구현하려 했는데,
NextJS에 자체적인 Not Found 페이지를 만들 수 있는 기능이 있었다.

app 폴더에 not-found.tsx 파일명으로 만들어주면 간단하게 구현이 된다.

"use client";

import Container from "@/components/Container";
import { Button } from "@headlessui/react";
import { useRouter } from "next/navigation";
import React from "react";

const NotFound = () => {
  const router = useRouter();

  return (
    <Container className="flex items-center justify-center py-32 sm:pt-32">
      <div className="flex flex-col items-center gap-5">
        <h2 className="mt-4 text-xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100 ">
          404 Page Not Found
        </h2>
        <p className="mt-4 text-base text-zinc-600 dark:text-zinc-400">
          해당 페이지를 찾을 수 없습니다.
        </p>
        <Button
          className="hidden md:inline-flex text-teal-500 px-8 py-2 rounded-full dark:bg-black text-sm uppercase border border-teal-800 hover:text-teal-800 dark:hover:text-teal-200 hover:border-teal-700 duration-300"
          onClick={() => router.back()}
        >
          돌아가기
        </Button>
      </div>
    </Container>
  );
};

export default NotFound;

이외 useRouter 기능을 사용해서 이전 페이지로 돌아가게 유도하는 버튼을 구성해주었다.

useRouter를 사용할 때는 위에 use client를 명시해줘야 한다.
use client는 컴포넌트를 클라이언트 사이드로 만들어주는데,
클라이언트 사이드는 브라우저내에 관련 API나 동적인 동작을 처리하는데 유효하는 기능으로, useRouter가 브라우저 내에 history 객체에 접근해서 작동하는 원리다.

결과물

about 페이지를 아직 작성하지 않은 상태로 접근했을때,
내용이 없는 경우 잘 나타났다.