error.tsx & not-found.tsx 해부

핵심 개념

error.tsx는 런타임 에러를 잡는 Error Boundary입니다. not-found.tsx는 404 페이지입니다. reset 함수로 에러 복구가 가능합니다.

코드 분석

NEXTJS📋 코드 (17줄)

ERROR HANDLING

// app/error.tsx
'use client'
export default function Error({
&nbsp;&nbsp;error, reset
}: {
&nbsp;&nbsp;error: Error
&nbsp;&nbsp;reset: () => void
}) {
&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>{error.message}</p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onClick={reset}>재시도</button>
&nbsp;&nbsp;&nbsp;&nbsp;</div>
&nbsp;&nbsp;)
}

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Next.js 'error.tsx & not-found.tsx' 코드에서
서버/클라이언트 경계·use client 누락·캐시 무효화 버그를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'error.tsx & not-found.tsx'를 활용한 실전 페이지를
App Router + TypeScript + Server Actions로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Next.js 'error.tsx & not-found.tsx' 사용 패턴이
빌드 크기와 LCP/INP/CLS에 미치는 영향을
분석하고 최적화 방안을 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Next.js 'error.tsx & not-found.tsx' vs Remix/Astro/SvelteKit의
동일 기능 구현을 2026년 기준으로
솔직하게 비교해줘.

⭐ 이것만 기억하세요

error.tsx & not-found.tsx 해부는 이 3가지만 확실히 잡으세요

1.에러 처리 없이 컴포넌트가 throw하면 전체 앱이 흰 화면으로 크래시됩니다

2.error.tsx는 해당 라우트의 에러를 잡아서 복구 UI를 표시하고, not-found.tsx는 404 페이지를 커스터마이징합니다

3.다음 챕터에서 서버에서 데이터를 가져오는 다양한 패칭 전략을 배웁니다

💬 이 챕터 질문 보기

NEXTJS · CH.16 — 질문하거나 답변을 확인하세요

→

진행도 16 / 34

← 커리큘럼으로 ← 목록으로 (Next.js)