next.js란?

next란?

ChatGPT의 말:

Next.js는 React 기반의 프레임워크로, **서버 사이드 렌더링(SSR)**과 정적 사이트 생성(SSG), 파일 기반 라우팅, API 라우트 등을 쉽게 구현할 수 있도록 도와줍니다.
React를 더 강력하게 사용하기 위한 **"실전용 React 개발 도구"**라고 볼 수 있습니다.

---

✅ 한 줄 요약

Next.js = React + Routing + SSR + SSG + API + SEO 최적화

---

🧩 주요 특징

기능	설명
파일 기반 라우팅	pages/ 폴더에 파일만 만들면 자동으로 URL 라우팅 생성
SSR (Server-Side Rendering)	요청 시 HTML을 서버에서 렌더링해 SEO에 유리
SSG (Static Site Generation)	빌드 타임에 HTML을 생성해서 속도 빠름
ISR (Incremental Static Regeneration)	정적 페이지를 일정 주기마다 자동 업데이트
API 라우트	pages/api/ 폴더에 JS 파일로 서버리스 API 구현 가능
이미지 최적화	next/image를 이용한 이미지 자동 리사이즈 및 최적화
SEO 최적화	head 태그 설정 쉬움 + SSR 지원으로 크롤링에 유리
TypeScript, Tailwind CSS, ESLint 등 통합	내장 지원
Vercel과 완벽한 통합	원클릭 배포 가능 (Next.js는 Vercel에서 만듦)

---

📁 기본 폴더 구조

my-app/
├─ pages/
│  ├─ index.js       → / (홈)
│  ├─ about.js       → /about
│  └─ api/hello.js   → /api/hello (API endpoint)
├─ public/           → 정적 파일 (이미지, favicon 등)
├─ styles/           → CSS 파일
├─ next.config.js    → 설정
├─ package.json
└─ ...

---

📦 어떤 프로젝트에 적합할까?

• 블로그, 포트폴리오 사이트 (SSG)
• 마케팅 페이지, 랜딩 페이지 (SSG/ISR)
• SEO가 중요한 콘텐츠 사이트 (SSR/SSG)
• 관리자 대시보드, 커머스 사이트
• 서버리스 API가 필요한 웹앱

---

🚀 시작하기

npx create-next-app my-app
cd my-app
npm run dev

---

🎯 Next.js vs React

항목	React	Next.js
라우팅	수동 (React Router 등 필요)	자동 (파일 기반)
SSR/SSG	직접 설정 필요	내장 지원
SEO	제한적	매우 좋음
API 라우트	별도 서버 필요	내장 (API 폴더)
최적화 기능	직접 구성	자동 최적화 내장
배포	직접 설정 (예: Firebase)	Vercel과 완벽 통합

---

Next.js는 React의 생산성과 확장성을 극대화시켜주는 프레임워크입니다.