Next.js 시작하기 — React에 서버가 더해지면

React만으로도 웹앱을 만들 수 있는데, 왜 굳이 Next.js를 쓸까요? 그리고 Create React App(CRA)은 왜 더 이상 권장되지 않는 걸까요?

React는 UI 라이브러리입니다. 라우팅, 서버 렌더링, 코드 분할 같은 것은 React의 관심사가 아닙니다. CRA는 이런 빈틈을 Webpack 설정으로 메워줬지만, 서버 사이드 렌더링(SSR)이나 정적 생성(SSG)은 지원하지 않았습니다. Next.js는 React 위에 서버를 얹어서 이 문제를 근본적으로 해결합니다.

개념 정의

Next.js 는 React 기반의 풀스택 웹 프레임워크입니다. 서버 렌더링, 파일 기반 라우팅, 빌드 최적화를 프레임워크 레벨에서 제공 하여 React만으로는 직접 구성해야 했던 인프라를 대신 처리합니다.

CRA와 뭐가 다른가

기준	CRA	Next.js
렌더링	클라이언트만 (CSR)	SSR + SSG + ISR + CSR
라우팅	react-router 직접 설치	파일 시스템 기반 자동 라우팅
SEO	빈 HTML → JS 로드 후 렌더링	서버에서 완성된 HTML 전달
API 서버	별도 백엔드 필요	Route Handler로 API 내장
코드 분할	수동 설정	라우트별 자동 분할
유지 상태	사실상 deprecated	React 공식 추천 프레임워크

핵심 차이를 한 줄로 요약하면, CRA는 빈 HTML에 JS를 로드하는 SPA 이고, Next.js는 서버에서 HTML을 만들어 보내는 프레임워크 입니다.

App Router — Next.js의 현재

Next.js 13부터 도입된 App Router는 기존 Pages Router를 대체하는 새로운 라우팅 시스템입니다.

app/ 디렉토리 안에 폴더를 만들면 그게 곧 URL 경로가 됩니다.
각 폴더에 page.tsx를 넣으면 해당 경로의 페이지가 됩니다.
모든 컴포넌트가 기본적으로 Server Component 입니다. 클라이언트에서 실행할 필요가 있을 때만 'use client'를 선언합니다.

이전 Pages Router(pages/ 디렉토리)와의 가장 큰 차이는 서버 컴포넌트가 기본값 이라는 점입니다. 이 변화가 왜 중요한지는 다음 글에서 자세히 다룹니다.

프로젝트 구조 살펴보기

npx create-next-app@latest로 생성한 프로젝트의 핵심 구조입니다.

PLAINTEXT

my-app/
├── app/
│   ├── layout.tsx      # 루트 레이아웃 (모든 페이지를 감쌈)
│   ├── page.tsx        # / 경로의 페이지
│   ├── about/
│   │   └── page.tsx    # /about 경로의 페이지
│   └── globals.css
├── public/             # 정적 파일 (이미지, favicon 등)
├── next.config.ts      # Next.js 설정
├── tsconfig.json
└── package.json

layout.tsx 가 핵심입니다. 이 파일은 HTML의 <html>, <body> 태그를 포함하며, 모든 하위 페이지를 {children}으로 감쌉니다. 페이지를 이동해도 레이아웃은 다시 렌더링되지 않습니다.

TSX

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

첫 페이지 만들기

TSX

// app/page.tsx
export default function Home() {
  return <h1>안녕하세요, Next.js입니다</h1>;
}

이 컴포넌트는 서버에서 실행 됩니다. 브라우저에 도달하는 것은 이미 완성된 HTML입니다. useState나 onClick 같은 클라이언트 기능이 필요 없다면, 이대로 충분합니다.

TSX

// app/about/page.tsx
export default function About() {
  return <p>소개 페이지입니다</p>;
}

app/about/ 폴더에 page.tsx를 넣는 것만으로 /about 경로가 자동으로 생성됩니다. 라우터 설정 파일이 따로 필요 없습니다.

개발 서버 실행

BASH

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

http://localhost:3000에서 결과를 확인할 수 있습니다. 파일을 수정하면 Fast Refresh 가 작동하여 브라우저가 자동으로 업데이트됩니다. 상태도 유지됩니다.

주의할 점

Pages Router와 App Router를 섞으면 혼란이 온다

Next.js는 pages/와 app/ 디렉토리를 동시에 지원합니다. 마이그레이션을 위한 것이지, 새 프로젝트에서 둘을 섞어 쓰라는 의미가 아닙니다.

같은 경로가 양쪽에 존재하면 충돌이 발생합니다. 새 프로젝트라면 App Router만 사용 하는 것이 맞습니다.

Server Component에서 useState를 쓰면 에러가 난다

App Router의 컴포넌트는 기본이 Server Component입니다. useState, useEffect, onClick 같은 클라이언트 API를 사용하면 빌드 에러가 발생합니다.

PLAINTEXT

You're importing a component that needs useState. It only works in a Client Component
but none of its parents are marked with "use client"

이런 에러가 보이면 파일 상단에 'use client'를 추가해야 합니다. 하지만 무작정 붙이기 전에, 정말 클라이언트에서 실행해야 하는 컴포넌트인지 먼저 생각해보는 습관이 중요합니다.

정리

핵심 포인트	내용
Next.js란	React 위에 서버 렌더링 + 라우팅 + 빌드 최적화를 얹은 프레임워크
CRA와의 차이	CSR only vs SSR/SSG/ISR 지원, 파일 기반 라우팅
App Router	`app/` 디렉토리, Server Component 기본, `layout.tsx`로 레이아웃 공유
페이지 생성	폴더 만들고 `page.tsx` 넣으면 끝

다음 글에서는 Server Component와 Client Component의 경계 — 언제 'use client'를 선언해야 하는지를 다룹니다.