개인 프로젝트에 에러 페이지를 추가하고 나서 달라진 것

혼자 만든 프로젝트에 에러 페이지가 없으면 어떻게 되냐면, 없는 경로로 접근했을 때 Next.js 기본 404 화면이 나온다. 하얀 배경에 "404 | This page could not be found." 한 줄. 내 사이트 디자인과는 아무 관계없는 화면이다.

개인 프로젝트라서 사용자가 많지도 않고, 당장 문제가 되진 않는다. 그러다가 어느 날 Google Search Console에서 크롤링 오류 목록을 보다가 직접 그 URL을 눌러봤고, 그 기본 화면이 불편하게 느껴졌다. 그날 에러 페이지를 만들었다.

Next.js App Router에서 에러 페이지 추가하기

App Router에서는 파일 이름 규칙으로 에러 페이지를 지정한다.

app/
  not-found.tsx     # 404
  error.tsx         # 500 및 런타임 에러
  global-error.tsx  # 루트 레이아웃 에러

// app/not-found.tsx
import Link from 'next/link'

export default function NotFound() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center gap-4">
      <h1 className="text-4xl font-bold">404</h1>
      <p className="text-gray-500">찾을 수 없는 페이지입니다.</p>
      <Link href="/" className="underline">
        홈으로 돌아가기
      </Link>
    </main>
  )
}

error.tsx는 클라이언트 컴포넌트여야 한다.

// app/error.tsx
'use client'

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <main className="min-h-screen flex flex-col items-center justify-center gap-4">
      <h1 className="text-4xl font-bold">문제가 발생했습니다</h1>
      <button onClick={reset} className="underline">
        다시 시도하기
      </button>
    </main>
  )
}

에러 페이지 추가 후 달라진 점

기능상으로 달라지는 건 없다. 없는 페이지는 여전히 없다. 그런데 에러 페이지를 추가하고 나면 프로젝트가 좀 더 완성된 느낌이 든다. 외부 링크가 깨져도, 사용자가 URL을 잘못 입력해도 최소한 "여기는 내 사이트야"라고 알려줄 수 있다.

실제로 유용한 건 개발할 때다. error.tsx에서 reset 함수를 제공하면 런타임 에러가 났을 때 페이지를 새로고침하지 않고도 복구를 시도할 수 있어서, 개발 중에 상태를 유지한 채로 에러를 확인하기 편하다.

개인 프로젝트일수록 이런 디테일을 챙기게 되면 코드를 다시 열었을 때 손이 가기 쉬워진다.