Next.js 개념 및 12 & 13 버전

• React 기반 Full-Stack 웹 애플리케이션 프레임워크
• 서버사이드 렌더링(SSR)을 쉽게 구현
• SPA + MPA 지원

---

Pre-Rendering

No Pre-Rendering

Pre-Rendering

• 정적 페이지 생성 (SSG, Static Site Generation)

  • 빌드 시 HTML 생성 → 저장 → 재사용
  • 빠른 응답 속도, 좋은 성능

• 서버 사이드 렌더링 (SSR, Server Side Rendering)

  • 요청 시 HTML 생성 → 매번 새로 만듦
  • 매번 최신 데이터 제공

---

Full Stack 지원

• Next.js 하나로 클라이언트 + 서버 개발 가능
  • 개발 환경 통합 → 속도 향상
  • 따로 배포할 필요 없음

---

웹 애플리케이션 프레임워크

• 필요한 기능이 대부분 포함
• 따로 라이브러리를 추가로 설치할 필요 없음
• 공식 문서대로만 사용해도 성능 좋은 앱 개발 가능

---

Next.js 사용법

12 Version		13 Version
페이지 라우팅	라우팅 방식	앱 라우팅
getStaticProps, getStaticPaths, getServerSideProps	데이터 패칭	Server Component, Client Component
index.js	서버 작성	route.js
_app.js	레이아웃 작성	layout.js

---

라우팅 방식

• 12버전: /pages 폴더
• 13버전: /app 폴더

---

Data Fetching

• 12버전
  • getStaticProps: 자주 안 바뀌는 데이터
  • getStaticPaths: 자주 안 바뀌는 동적 라우트 데이터
  • getServerSideProps: 자주 바뀌는 데이터
• 13버전
  • Server Component: fetch 사용
  • Client Component: React Hooks 사용

---

서버 작성 방법

• 12버전: index.js
• 13버전: route.js

---

레이아웃 작성 방법

• 12버전: _app.js
• 13버전: layout.js

---

Next.js 설치 방법

Next.js 12 설치

npm create-next-app@12

Next.js 13 설치

npm create-next-app@13

---