Next.js 14 App Router 마이그레이션 가이드

들어가며

Next.js 14의 App Router는 기존 Pages Router와 많은 차이가 있습니다. 이 글에서는 마이그레이션 과정에서 주의해야 할 점들을 정리했습니다.

주요 변경 사항

• 파일 기반 라우팅 구조 변경
• Server Components 기본 적용
• 새로운 데이터 페칭 방식
• Metadata API 변경

마이그레이션 단계

1. app 디렉토리 생성
2. layout.tsx 파일 작성
3. 페이지 컴포넌트 이동
4. 데이터 페칭 로직 수정
5. 클라이언트 컴포넌트 분리

주의 사항

• use client 지시어 사용
• 서버/클라이언트 컴포넌트 경계
• 캐싱 전략 재검토