Next.js는 Vercel이 만든 React 기반 풀스택 웹 프레임워크다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트, 이미지 최적화 등을 기본 제공하며 현재 가장 널리 쓰이는 React 프레임워크다.
핵심 기능
| 기능 | 설명 |
|---|
| App Router | React Server Components 기반 라우팅 |
| SSR / SSG / ISR | 다양한 렌더링 전략 지원 |
| API Routes | 백엔드 엔드포인트를 프론트엔드와 통합 |
| Image 최적화 | 자동 WebP 변환, lazy loading |
| Middleware | Edge 런타임에서 요청 인터셉트 |
프로젝트 구조 (App Router)
app/
├── layout.tsx # 공통 레이아웃
├── page.tsx # 루트 페이지
├── (auth)/ # 라우트 그룹 (URL에 영향 없음)
│ ├── login/page.tsx
│ └── register/page.tsx
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
└── api/
└── posts/
└── route.ts # API 엔드포인트
Server Component vs Client Component
tsx
// Server Component (기본) - 서버에서만 실행
// app/posts/page.tsx
async function PostsPage() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
return (
<ul>
{posts.map((p: any) => <li key={p.id}>{p.title}</li>)}
</ul>
);
}
// Client Component - 브라우저에서 실행
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
데이터 페칭 전략
tsx
// SSG: 빌드 시 생성
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map(p => ({ slug: p.slug }));
}
// ISR: 일정 시간마다 재생성
const data = await fetch(url, { next: { revalidate: 60 } });
// 동적 렌더링 강제
export const dynamic = 'force-dynamic';
관련 개념
