🧭 들어가며

React 기반의 프레임워크로 시작한 Next.js는 2016년 처음 등장한 이후, 지금까지 프론트엔드 생태계의 핵심 기술 중 하나로 자리잡았습니다.

이번 글에서는 Next.js의 주요 버전별 변화와 함께 최근 App Router 중심 구조의 도입까지 어떻게 진화해왔는지 살펴보겠습니다.

---

⏳ 1. Next.js의 탄생 – 초기의 단순함 (v1~v2)

• 2016년 출시
• 목표: React 기반의 SSR(서버사이드 렌더링)을 쉽게 구현
• 페이지는 pages/ 폴더와 파일 기반 라우팅으로 구성
• 설정 없는 기본 구조, 간단한 getInitialProps 방식

당시 키워드: Zero Config, SSR, 간단한 라우팅

---

🚀 2. 실전 프레임워크로 – v5~v9

• Dynamic Routing ([slug].js) 도입
• API Routes 도입 (pages/api)
• getStaticProps, getServerSideProps, getStaticPaths 추가로 SSG/SSR 선택 가능
• Image Optimization, AMP 지원, Internationalization 도입

주요 트렌드: Jamstack + SEO 최적화 + 성능 향상

---

🛠️ 3. 개발자 친화 강화 – v10~v12

• Next.js 10 (2020): Image, Script, Head 등 핵심 컴포넌트 공식 지원
• Next.js 11 (2021): next/script으로 퍼포먼스 향상, Webpack 5 기본 도입
• Next.js 12 (2021): Middleware, SWC 컴파일러 채택으로 성능 5배 향상

이 시기 특징: 대규모 서비스에서도 충분히 쓸 수 있는 인프라 제공

---

🧬 4. App Router의 등장 – v13~v14

• Next.js 13 (2022):
  • app/ 디렉토리 정식 도입 (기존 pages/ 구조와 병행 가능)
  • Server Component, Streaming, Layout 시스템 추가
• Next.js 14 (2023):
  • app/ 디렉토리 안정화, React Server Component 정식 지원
  • Partial Rendering, Suspense, 로딩 UI 개선

전환기 키워드: App Router, React 18 완전 호환, 서버 컴포넌트, 파일 기반 메타데이터

---

🔮 5. 현재와 미래 – v14 이후

Next.js는 현재도 AI 기반 웹앱, 엣지 컴퓨팅, ISR(Incremental Static Regeneration) 등 새로운 웹 기술을 선도하고 있습니다.

Vercel은 Next.js를 통해 **개발자 경험(DX)**과 배포 퍼포먼스 모두를 혁신하고 있으며, 앞으로도 다양한 실험이 이어질 예정입니다.

---

🎯 Remix와의 비교에서 본 Next.js의 강점

구분	Next.js	Remix
라우팅	파일 기반 (App/Pages)	파일 기반 (Nested Route 강화)
데이터 패칭	다양한 방식 지원 (SSR, SSG, ISR, CSR)	Loader 중심의 데이터 패칭
커뮤니티 & 생태계	매우 넓고 활발	점차 성장 중
배포 최적화	Vercel과의 시너지	다양한 배포 환경 지원

---

💡 마무리

Next.js는 단순한 SSR 프레임워크를 넘어, 현대 웹 개발의 표준이 되어가고 있습니다.

이 변천사를 이해하면, 지금 사용하는 구조가 어디에서 왔고 앞으로 어떤 방향으로 갈지를 예측할 수 있습니다.