Error Fix

Next.js 오류 원인 분해

오류 메시지를 한 덩어리로 보지 말고 컴파일 단계, 런타임 단계, 브라우저 렌더링 단계로 나눠 읽으면 빠릅니다.

타입 검사

TypeScript 오류 위치 추적

strict 설정, 타입 추론, lib 옵션을 오류 메시지의 파일 위치와 함께 확인합니다.

의존성 해석

모듈 import 실패 분류

경로 별칭, default export, 서버 전용 모듈, 패키지 설치 여부를 나눠 원인을 좁힙니다.

렌더 규칙

Hooks 호출 조건 점검

조건문 안 호출, 반복문 안 호출, 서버 컴포넌트 사용 여부를 구분해 런타임 오류를 막습니다.

초기 불일치

Hydration 차이 비교

서버 HTML과 클라이언트 첫 렌더가 달라지는 날짜, 랜덤값, 브라우저 전용 상태를 찾습니다.

원인 분리

Hydration 오류 진단 기준

날짜, 랜덤 값, 브라우저 전용 API처럼 서버 렌더링과 클라이언트 렌더링이 달라지는 지점을 찾습니다.

오류 범주

모듈 import경로 별칭, default export, 패키지 설치 여부를 살핍니다.
Hooks 규칙조건문 안 호출과 서버 컴포넌트 사용 여부를 구분합니다.
Hydration서버 HTML과 클라이언트 초기 렌더링의 차이를 찾습니다.