Next.js 9 -> 15 버전 사이의 중요한 변화

✅ Next.js 15 (2024) 기준의 주요 특징과 변화

항목예전 버전 (v9~10)최신 버전 (v15.3.1)

라우팅 시스템	pages/ 디렉토리만	✅ app/ 디렉토리 (기본값) + pages/ 병행 가능
데이터 패칭	getServerSideProps, getStaticProps	✅ 서버 컴포넌트 안에서 fetch() / cache, revalidate 등
서버 컴포넌트 (RSC)	❌ 없음	✅ 기본 활성화됨 (app 디렉토리)
서버 액션 (Server Actions)	❌ 없음	✅ 실험적 기능 → v15에선 안정화에 가까움
스타일링 도구	기본 CSS, Sass 등	✅ Tailwind 기본 추천 + CSS Modules, PostCSS 등
이미지 처리	next/image 베타 수준	✅ 성능 최적화된 next/image (responsive, blur 등 내장)
빌드 도구	Webpack 기반	✅ Webpack or Turbopack 선택 가능
경로 라우팅	단순 폴더 라우팅	✅ 중첩 라우팅, route groups ((group)/, @slot)
MDX 통합	수동 설정 필요	✅ app 디렉토리에서 바로 MDX 통합 가능
폼 처리	클라이언트/서버 분리	✅ Server Actions로 폼 → 함수 직접 호출 가능
Partial Prerendering (PPR)	❌ 없음	✅ 부분적 정적 렌더링 → 빠른 LCP

 

---

🆕 Next.js 15에서 주목할 기능 Top 3

1. Server Actions (서버 액션)

tsx

복사편집

// 예: app/page.tsx 'use server'; export async function submitForm(data: FormData) { // DB 저장, 이메일 전송 등 서버 작업 수행 }

• form 태그에서 바로 이 함수 호출 가능
• API Route 따로 만들 필요 없음

---

2. Partial Prerendering (부분 사전 렌더링)

• 일부 컴포넌트만 SSR로 처리하고 나머지는 SSG로 → 퍼포먼스 향상
• 점진적 static + dynamic 렌더링을 동시에 처리 가능 (향후 완전한 안정화 예정)

---

3. Turbopack 실험적 기본 활성화

• 개발 서버 속도 매우 빠름 (Webpack 대비 수배 차이)
• 다만 아직 Webpack보다 완전히 안정적인 건 아님 → 둘 다 선택 가능