Next.js란? — React 위에 올린 풀스택 웹 프레임워크

React만으로 웹 앱을 만들면 라우팅, 서버 사이드 렌더링, API 연결을 모두 직접 구성해야 한다. Next.js는 이 반복 작업을 프레임워크 수준에서 해결하면서, React 위에 풀스택 개발 환경을 얹어준다. Vercel이 개발하고 관리하며, 현재 가장 널리 쓰이는 React 메타 프레임워크다.

React와 Next.js의 관계

React는 UI를 선언적으로 구성하는 라이브러리다. 라우팅, 데이터 패칭, 서버 통신은 React의 관심 밖이다. Next.js는 이 빈 자리를 채운다.

React (UI 렌더링)
        │
        ▼
┌───────────────────────────────┐
│           Next.js             │
│  ┌─────────┐  ┌────────────┐  │
│  │ Router  │  │ API Routes │  │
│  └─────────┘  └────────────┘  │
│  ┌─────────┐  ┌────────────┐  │
│  │   SSR   │  │   SSG/ISR  │  │
│  └─────────┘  └────────────┘  │
└───────────────────────────────┘
        │
        ▼
   브라우저 / 서버

SSR(Server-Side Rendering): 요청마다 서버에서 HTML을 생성. SSG(Static Site Generation): 빌드 시 HTML을 미리 생성. ISR(Incremental Static Regeneration): 정적 페이지를 주기적으로 재생성.

왜 Next.js를 사용하는가

순수 React SPA는 초기 HTML이 비어 있어 SEO에 불리하고, 첫 화면이 느리다. Next.js는 서버에서 HTML을 완성한 뒤 내려보내기 때문에 크롤러가 콘텐츠를 즉시 읽을 수 있다. 또한 파일 기반 라우팅, 이미지 최적화, 폰트 최적화, Middleware 지원이 기본 내장된다.

App Router vs Page Router

Next.js 13부터 App Router가 도입되면서 두 방식이 공존한다.

App Router는 React Server Components를 기본으로 사용한다. 서버에서만 실행되는 컴포넌트는 번들 크기에 포함되지 않고, 데이터베이스를 직접 조회할 수 있다.

// app/posts/page.tsx — Server Component (기본값)
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());

  return (
    <ul>
      {posts.map((p: { id: number; title: string }) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

설치 방법

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm run dev

--app 플래그를 주면 App Router 구조로 초기화된다. src/ 디렉토리 여부는 선택이며, 대부분의 프로젝트에서 src/app/을 사용한다.

장단점

장점

• 파일 하나로 라우팅과 API를 동시에 처리
• SSR/SSG/ISR을 페이지마다 혼용 가능
• Vercel 배포 시 Edge Function, 이미지 CDN 자동 연동

단점

• App Router의 Server/Client Component 경계가 초기 학습 비용을 높인다
• 빌드 캐시 전략이 복잡해질 수 있다
• Vercel 외 셀프호스팅은 설정이 추가로 필요하다

Next.js는 React 생태계 안에서 가장 완성도 높은 풀스택 선택지다. 새 프로젝트라면 App Router를 기본으로 시작하고, 기존 pages/ 기반 프로젝트는 점진적으로 마이그레이션할 수 있다.