에러 핸들링과 페이지 트랜지션

Nuxt 4에서는 존재하지 않는 페이지를 방문(404)하거나 서버에서 오류(500)가 났을 때 보여줄 전역 에러 화면을 app/error.vue 파일 하나로 완벽하게 통제할 수 있습니다.

또한 페이지 간 부드러운 애니메이션을 적용하고 싶다면 app.vue의 <NuxtPage>에 트랜지션 속성을 부여하기만 하면 됩니다.

<!-- ==========================================
// 📂 app/error.vue (전역 에러 처리 컴포넌트)
// ========================================== -->
<template>
  <div class="h-screen flex flex-col items-center justify-center bg-gray-50 text-center">
    <!-- 에러 정보 객체(error)를 자동으로 전달받습니다. -->
    <h1 class="text-9xl font-bold text-red-500">{{ error.statusCode }}</h1>
    
    <p class="text-2xl mt-4 font-semibold text-gray-800">
      {{ error.statusCode === 404 ? '페이지를 찾을 수 없습니다.' : '서버에 문제가 발생했습니다.' }}
    </p>

    <p class="text-gray-500 mt-2">{{ error.message }}</p>

    <!-- 에러 상태를 초기화하고 홈으로 돌아가는 버튼 -->
    <button @click="handleError" class="mt-8 bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700">
      홈으로 돌아가기
    </button>
  </div>
</template>

<script setup>
// 이 페이지는 Nuxt가 에러 발생 시 자동으로 렌더링하며 error props를 내려줍니다.
const props = defineProps({
  error: Object
})

const handleError = () => {
  // clearError 훅을 실행하면 현재 에러 상태를 지우고, 지정된 경로로 리다이렉트합니다.
  clearError({ redirect: '/' })
}
</script>

<!-- ==========================================
// 📂 app/app.vue (페이지 전환 애니메이션 적용)
// ========================================== -->
<template>
  <NuxtLayout>
    <!-- transition 속성을 켜주면, 라우팅 시 자동으로 애니메이션 클래스가 붙습니다! -->
    <NuxtPage :transition="{
      name: 'page', // .page-enter-active 같은 CSS 클래스가 사용됨
      mode: 'out-in' // 이전 화면이 완전히 사라진 후 새 화면이 나타남
    }" />
  </NuxtLayout>
</template>