Next.js란? - 빠르고 쉬운 React 기반 서버사이드 프레임워크 (설치)

웹 개발을 하다 보면 “어떻게 하면 더 빠르고 검색에도 잘 노출되는 웹사이트를 만들 수 있을까?”라는 고민을 하게 됩니다. React로 개발하면서도 SEO와 성능, 두 마리 토끼를 모두 잡고 싶다면 Next.js가 정답입니다.

2025년 10월에 Next.js 16이 출시되면서 Turbopack 안정화, Cache Components 등 성능이 대폭 개선되었는데요. 오늘은 Next.js가 무엇인지, 왜 많은 개발자들이 선택하는지, 그리고 어떻게 시작하는지 자세히 알아보겠습니다.

Next.js

목차(Contents)

1. Next.js란 무엇인가요?

Next.js는 Vercel에서 개발한 오픈소스 React 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 강력한 도구입니다.

React만으로도 훌륭한 웹 애플리케이션을 만들 수 있지만, Next.js를 사용하면 별도의 복잡한 설정 없이도 서버 렌더링을 쉽게 구현할 수 있습니다. 예전에는 React에서 SSR을 구현하려면 ReactDOMServer를 직접 설정해야 했는데, 이 과정이 꽤 번거로웠죠.

Next.js는 시맨틱 버저닝을 따르며, 메이저 버전은 평균적으로 1년에 두 번 출시됩니다. 활발하게 업데이트되고 있어 최신 웹 기술을 빠르게 적용할 수 있습니다.

React(리액트)란? – 컴포넌트 기반 JavaScript 라이브러리, 쉽게 이해하기

2. 왜 Next.js를 사용해야 할까요?

뛰어난 검색 엔진 최적화 (SEO)

일반 React 앱(SPA)은 초기에 빈 HTML만 전송되어 검색 엔진 크롤러가 내용을 제대로 파악하기 어렵습니다. 하지만 Next.js는 서버에서 완성된 HTML을 미리 만들어 보내주기 때문에 구글 같은 검색 엔진이 페이지 내용을 정확하게 인덱싱할 수 있습니다.

실제로 제 경험상 블로그나 쇼핑몰처럼 검색 노출이 중요한 사이트라면 Next.js는 필수라고 할 수 있습니다.

빠른 초기 로딩 속도

사용자가 웹사이트에 접속했을 때 하얀 화면만 보이다가 늦게 콘텐츠가 나타나면 답답하죠? Next.js는 서버에서 HTML을 미리 렌더링하여 전달하기 때문에 초기 페이지 로딩 속도가 빠릅니다.

자동 코드 분할 (Code Splitting)

Next.js는 파일 시스템 기반 라우팅을 사용하며, 각 페이지마다 필요한 JavaScript만 로드합니다. 예를 들어 사용자가 홈페이지에 있다면 상품 상세 페이지의 코드는 아직 다운로드하지 않는 것이죠. 이렇게 하면 불필요한 코드를 줄여 성능을 높일 수 있습니다.

3. Next.js의 주요 렌더링 방식 이해하기

Next.js의 가장 큰 장점은 페이지 특성에 맞는 렌더링 방식을 선택할 수 있다는 점입니다. Next.js는 하이브리드 웹 앱이라고도 불리는데, 한 애플리케이션에서 페이지 특성에 따라 적절한 렌더링 방식을 채택해 만들 수 있고, 심지어 하나의 페이지 내에서도 하이브리드가 가능합니다.

SSR (Server-Side Rendering) – 서버사이드 렌더링

SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 새로 생성하여 전달하는 방식입니다. 매 요청마다 HTML을 생성하기 때문에 응답 속도는 상대적으로 느리고 서버에 더 많은 부담이 가지만, 항상 최신 데이터를 보여줄 수 있습니다.

언제 사용하면 좋을까요?

사용자별로 다른 정보를 보여줘야 할 때 (마이페이지, 장바구니 등)
사용자의 인증 정보, 쿠키, 세션 등이 필요한 페이지
데이터가 자주 변경되는 페이지
요청에 따라 콘텐츠가 달라져야 하는 경우

SSG (Static Site Generation) – 정적 사이트 생성

SSG는 빌드 시점에 HTML을 미리 생성해두고, 모든 사용자에게 동일한 HTML을 재사용하는 방식입니다. 빌드 시에 HTML이 생성되고 매 요청마다 HTML을 재사용하며, CDN에 캐시되어 가장 빠른 성능을 제공하기 때문에 Next.js에서도 SSG 사용을 권장합니다.

SSG에서 HTML은 next build 명령어를 사용할 때 생성되며, 개발 환경(npm run dev)에서는 제대로 동작하지 않으니 프로덕션 빌드로 테스트해야 합니다.

언제 사용하면 좋을까요?

블로그 글이나 상품 소개 페이지처럼 내용이 자주 바뀌지 않는 경우
회사 소개, 서비스 안내 같은 정적 페이지
마케팅 랜딩 페이지
페이지 내용이 요청과 무관하게 동일하게 유지되는 경우

ISR (Incremental Static Regeneration) – 증분 정적 재생성

ISR은 SSG에 포함되는 개념이며 SSG와의 차이는 설정한 시간마다 페이지를 새로 렌더링 한다는 점입니다. 빌드를 다시 하지 않는 한 페이지를 업데이트할 수 없는 SSG의 문제를 해결합니다. 페이지에 요청이 들어오면 빌드 완료된 정적 페이지를 표시하면서, 백그라운드에서 재렌더링을 수행하고, 완료되면 새 페이지를 표시합니다.

언제 사용하면 좋을까요?

뉴스 사이트처럼 주기적으로 콘텐츠가 업데이트되는 경우
블로그처럼 콘텐츠가 동적이지만 자주 변경되지 않는 사이트
제품 리뷰나 평점이 가끔 바뀌는 경우

렌더링 방식 비교표

렌더링 방식	HTML 생성 시점	캐싱 가능	속도	서버 부담	적합한 용도
SSR	요청마다 매번	제한적	보통	높음	동적 콘텐츠, 개인화 페이지
SSG	빌드 시 한 번	O	매우 빠름	없음	정적 콘텐츠, 블로그
ISR	빌드 + 주기적	O	빠름	낮음	주기적 업데이트 필요한 페이지

4. Pages Router vs App Router – 중요한 차이점

Next.js에는 두 가지 라우팅 방식이 있는데, 이 차이를 이해하는 것이 매우 중요합니다.

Pages Router (기존 방식)

Next.js 12 이하 버전에서 사용하던 전통적인 방식입니다. pages 폴더에 파일을 만들면 자동으로 라우팅되며, 데이터 페칭을 위해 특별한 함수들을 사용합니다:

getServerSideProps – SSR 구현
getStaticProps – SSG 구현
getStaticPaths – 동적 경로의 SSG 구현

이 방식은 페이지 단위로만 렌더링 방식을 제어할 수 있습니다.

App Router (최신 방식, 권장)

Next.js 13부터 도입된 새로운 방식으로, React 19의 서버 컴포넌트를 지원합니다. app 폴더를 사용하며 가장 큰 차이점은:

1. 서버 컴포넌트 (Server Components)

컴포넌트 단위로 렌더링을 제어할 수 있습니다. 더 이상 페이지 단위로 렌더링을 분리하지 않아도 됩니다.

2. 데이터 페칭 방식의 변화

서버 컴포넌트를 비동기 함수로 전환하여 컴포넌트 내부에서 직접 데이터를 불러올 수 있습니다. 필요한 컴포넌트에서 알아서 데이터 페칭 작업을 수행할 수 있게 되었습니다.

3. Request Memoization (자동 중복 제거)

동일한 URL과 옵션을 사용하는 fetch 요청은 React 렌더링 중에 자동으로 메모이제이션됩니다. 여러 컴포넌트에서 같은 데이터를 요청해도 실제로는 한 번만 서버에 요청이 가게 됩니다. 이는 성능 최적화에 큰 도움이 됩니다.

어떤 것을 선택해야 할까요?

신규 프로젝트라면 App Router를 강력히 추천합니다. 더 강력한 기능과 나은 성능을 제공하며, Next.js 공식 문서도 App Router 중심으로 작성되고 있습니다. 다만 기존 프로젝트라면 Pages Router를 계속 사용해도 무방합니다.

5. App Router에서 데이터 페칭하는 방법

App Router의 가장 혁신적인 변화는 데이터 페칭 방식입니다.

fetch API와 캐싱 옵션

기본적으로 fetch 요청은 새로운 데이터를 검색합니다. 이를 사용하면 전체 경로가 동적으로 렌더링되며 데이터는 캐시되지 않습니다.

캐싱 제어 방법:

cache: 'no-store' – 캐시하지 않음 (SSR, 항상 최신 데이터)
cache: 'force-cache' – 캐시함 (SSG, 빌드 시 데이터 고정)
next: { revalidate: 60 } – 60초마다 재검증 (ISR)

간단한 예시:

// SSR 방식 - 캐시 안 함
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store'
  })
  return res.json()
}

// SSG 방식 - 캐시함
async function getStaticData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache'
  })
  return res.json()
}

// ISR 방식 - 60초마다 재검증
async function getRevalidatedData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 }
  })
  return res.json()
}

데이터를 필요로 하는 레이아웃에서 직접 데이터를 fetch하는 것이 권장됩니다. 동일한 데이터를 여러번 요청하더라도 React와 Next.js가 요청을 캐싱하고 중복 정리를 하여 한번을 초과하여 데이터가 fetch되는 것을 막아주기 때문입니다.

서버 컴포넌트의 장점

서버 컴포넌트를 사용하면 클라이언트에 전달되는 JS번들 사이즈를 줄여주고, 토큰이나 API 키와 같은 민감한 정보를 보호할 수 있으며, 데이터베이스에 직접 접근할 수도 있습니다.

6. Next.js 시작하기 – 설치부터 실행까지

시작 전 준비사항

Node.js 20.9 이상 버전이 필요합니다. Node.js 공식 홈페이지에서 최신 LTS 버전을 다운로드하세요.

터미널에서 아래 명령어로 설치 확인:

node -v
npm -v

자동 설치 방법 (권장)

create-next-app을 사용하면 모든 설정이 자동으로 완료됩니다. 터미널을 열고 다음 명령어를 입력하세요:

npx create-next-app@latest my-nextjs-app

설치 과정에서 몇 가지 질문이 나타납니다:

What is your project named? my-nextjs-app
Would you like to use the recommended Next.js defaults? Yes

기본 설정을 선택하면 TypeScript, ESLint, Tailwind CSS, App Router, Turbopack이 자동으로 설정됩니다. 초보자라면 “Yes”를 선택하는 걸 추천드립니다.

커스터마이징을 원한다면 “No, customize settings”를 선택하면 TypeScript 사용 여부, 린터 선택, Tailwind CSS 사용 여부, src 디렉토리 사용 여부, App Router 사용 여부 등을 개별적으로 선택할 수 있습니다.

프로젝트 실행하기

프로젝트 폴더로 이동한 후 개발 서버를 실행합니다:

cd my-nextjs-app
npm run dev

브라우저에서 http://localhost:3000으로 접속하면 Next.js 시작 페이지를 볼 수 있습니다!

주요 npm 스크립트 이해하기

npm run dev      # 개발 서버 실행 (Turbopack 사용)
npm run build    # 프로덕션 빌드
npm run start    # 프로덕션 서버 실행
npm run lint     # ESLint 실행

Turbopack이 이제 기본 번들러입니다. Webpack을 사용하려면 next dev –webpack 또는 next build –webpack을 실행하면 됩니다.

7. Next.js 프로젝트 구조 완벽 이해하기

Next.js 프로젝트를 생성하면 다음과 같은 폴더 구조가 만들어집니다:

my-nextjs-app/
├── app/                    # App Router (라우팅 파일)
│   ├── layout.tsx         # 전체 레이아웃 설정
│   ├── page.tsx           # 홈페이지 (/)
│   └── about/             
│       └── page.tsx       # About 페이지 (/about)
├── public/                # 정적 파일 (이미지, 폰트 등)
├── node_modules/          # 설치된 패키지
├── package.json           # 프로젝트 정보 및 의존성
├── next.config.js         # Next.js 설정 파일
└── tsconfig.json          # TypeScript 설정

app 폴더 (App Router) – 핵심!

Next.js는 파일 시스템 기반 라우팅을 사용하므로, app 폴더 안의 파일 구조가 URL 경로를 결정합니다.

기본 라우팅 규칙:

app/page.tsx → 홈페이지 (/)
app/about/page.tsx → About 페이지 (/about)
app/blog/page.tsx → 블로그 목록 (/blog)
app/blog/[id]/page.tsx → 동적 블로그 상세 (/blog/1, /blog/2 등)

이렇게 폴더를 만들기만 하면 자동으로 라우팅이 설정되니까 React Router 같은 라이브러리가 필요 없습니다!

동적 라우팅 (Dynamic Routes)

대괄호 []를 사용하면 동적 경로를 만들 수 있습니다:

파일 구조:

app/
└── products/
    └── [id]/
        └── page.tsx

이렇게 하면 /products/1, /products/2, /products/abc 모두 같은 컴포넌트로 연결되며, URL의 값을 받아서 사용할 수 있습니다.

여러 세그먼트 캡처:

[...slug] – 나머지 모든 경로 캡처
[[...slug]] – 선택적으로 나머지 경로 캡처

layout.tsx 파일

루트 레이아웃은 필수 파일이며, HTML과 body 태그를 포함해야 합니다. 여기에 헤더, 푸터, 네비게이션처럼 모든 페이지에 공통으로 들어갈 요소를 넣으면 됩니다.

레이아웃은 중첩될 수 있습니다. 예를 들어:

app/layout.tsx – 전체 앱 레이아웃
app/dashboard/layout.tsx – 대시보드 섹션만의 레이아웃

public 폴더

이미지, 폰트 등 정적 파일을 저장하는 곳으로, 루트 경로(/)에서 직접 참조할 수 있습니다. public/logo.png는 /logo.png로 접근 가능합니다.

src 디렉토리 (선택사항)

프로젝트 루트의 설정 파일과 애플리케이션 코드를 분리하기 위해 src 폴더를 선택적으로 사용할 수 있습니다. create-next-app 설치 시 선택할 수 있습니다.

8. Next.js 실전 활용 팁

개발 모드 vs 프로덕션 모드

# 개발 모드 - 코드 수정 시 자동 새로고침
npm run dev

# 프로덕션 빌드 - 최적화된 버전 생성
npm run build

# 프로덕션 서버 실행
npm run start

개발 환경(npm run dev)에서는 SSG가 제대로 동작하지 않으니, 빌드 후 프로덕션 모드(npm run start)에서 테스트해보세요.

이미지 최적화

Next.js는 자동 이미지 최적화 기능을 제공합니다. 일반 <img> 태그 대신 next/image의 Image 컴포넌트를 사용하면 자동으로 크기를 조정하고 최적화된 형식(WebP 등)으로 변환해줍니다.

import Image from 'next/image'

export default function Profile() {
  return (
    <Image
      src="/profile.png"
      alt="프로필 사진"
      width={200}
      height={200}
    />
  )
}

메타데이터 설정 (SEO)

App Router에서는 layout.tsx나 page.tsx에서 메타데이터를 쉽게 설정할 수 있습니다:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '내 블로그',
  description: 'Next.js로 만든 블로그입니다',
}

TypeScript 사용

TypeScript를 사용하려면 파일 확장자를 .ts나 .tsx로 변경하고 npm run dev를 실행하면 자동으로 필요한 설정이 완료됩니다. Next.js가 tsconfig.json 파일을 자동으로 생성해줍니다.

환경 변수 관리

.env.local 파일을 만들어 환경 변수를 관리할 수 있습니다:

# .env.local
DATABASE_URL=your_database_url
NEXT_PUBLIC_API_URL=https://api.example.com

NEXT_PUBLIC_ 접두사가 붙은 변수는 브라우저에서도 접근 가능하고, 그렇지 않은 변수는 서버에서만 사용 가능합니다.

9. 배포하기

Vercel 배포 (가장 쉬운 방법)

Vercel에 GitHub 계정으로 로그인
프로젝트를 GitHub에 푸시
Vercel에서 “Import Project” 클릭
자동으로 빌드 및 배포 완료!

Vercel은 Next.js를 만든 회사라서 최적화가 가장 잘 되어 있고, 무료 플랜도 제공합니다.

기타 호스팅 서비스

Next.js는 다양한 플랫폼에 배포할 수 있습니다:

AWS (Amplify, EC2)
Google Cloud
Azure
Netlify
Cloudflare Pages

10. 자주 묻는 질문 (FAQ)

Q. Next.js는 무조건 서버가 필요한가요?

아닙니다. SSG 방식으로 빌드하면 완전한 정적 사이트가 되어 GitHub Pages나 Netlify 같은 정적 호스팅 서비스에도 배포 가능합니다.

Q. Vercel에 배포해야만 하나요?

아닙니다. Vercel은 Next.js를 만든 회사라 최적화가 잘 되어 있지만, AWS, Azure, Google Cloud 등 어디든 배포 가능합니다.

Q. 기존 React 프로젝트를 Next.js로 이전할 수 있나요?

가능합니다. 점진적으로 페이지를 하나씩 Next.js로 옮길 수 있어 부담이 적습니다.

Q. Pages Router 프로젝트를 App Router로 마이그레이션 해야 하나요?

당장 필수는 아닙니다. Pages Router는 계속 지원됩니다. 하지만 장기적으로는 App Router로 이전하는 것이 좋습니다.

Q. 서버 컴포넌트와 클라이언트 컴포넌트의 차이는?

서버 컴포넌트는 서버에서 렌더링되어 HTML로 전달되고, 클라이언트 컴포넌트는 브라우저에서 JS를 다운로드받아 렌더링됩니다. 상태 관리(useState, useEffect)가 필요하면 클라이언트 컴포넌트를 사용하고, 그렇지 않으면 서버 컴포넌트를 사용하는 것이 좋습니다.

Q. 처음 배우는데 어떤 자료를 봐야 하나요?

Next.js 공식 문서가 가장 좋습니다. 한글 번역본도 nextjs-ko.org에서 볼 수 있습니다.

11. 마치며

Next.js는 React 개발을 한 단계 업그레이드시켜주는 훌륭한 프레임워크입니다. 처음엔 개념이 조금 낯설 수 있지만, 한 번 익숙해지면 일반 React로 돌아가기 어려울 정도로 편리합니다.

특히 2025년 10월에 출시된 Next.js 16에서는 Turbopack 안정화로 개발 경험이 훨씬 좋아졌고, Cache Components 같은 새로운 기능도 추가되어 더욱 강력해졌습니다.

SEO가 중요한 블로그, 쇼핑몰, 회사 홈페이지를 만든다면 Next.js를 선택하세요. 빠른 성능과 검색 노출, 두 마리 토끼를 한 번에 잡을 수 있습니다!

입문시 추천 순서

공식 문서의 Getting Started 따라하기
간단한 블로그나 포트폴리오 사이트 만들어보기
App Router와 서버 컴포넌트 개념 익히기
실제 프로젝트에 적용해보기

참고 자료

Post Views: 22

1. Next.js란 무엇인가요?

2. 왜 Next.js를 사용해야 할까요?

뛰어난 검색 엔진 최적화 (SEO)

빠른 초기 로딩 속도

자동 코드 분할 (Code Splitting)

최신 버전의 강력한 성능

3. Next.js의 주요 렌더링 방식 이해하기

SSR (Server-Side Rendering) – 서버사이드 렌더링

SSG (Static Site Generation) – 정적 사이트 생성

ISR (Incremental Static Regeneration) – 증분 정적 재생성

렌더링 방식 비교표

4. Pages Router vs App Router – 중요한 차이점

Pages Router (기존 방식)

App Router (최신 방식, 권장)

5. App Router에서 데이터 페칭하는 방법

fetch API와 캐싱 옵션

서버 컴포넌트의 장점

6. Next.js 시작하기 – 설치부터 실행까지

시작 전 준비사항

자동 설치 방법 (권장)

프로젝트 실행하기

주요 npm 스크립트 이해하기

7. Next.js 프로젝트 구조 완벽 이해하기

app 폴더 (App Router) – 핵심!

동적 라우팅 (Dynamic Routes)

layout.tsx 파일

public 폴더

src 디렉토리 (선택사항)

8. Next.js 실전 활용 팁

개발 모드 vs 프로덕션 모드

이미지 최적화

메타데이터 설정 (SEO)

TypeScript 사용

환경 변수 관리

9. 배포하기

Vercel 배포 (가장 쉬운 방법)

기타 호스팅 서비스

10. 자주 묻는 질문 (FAQ)

11. 마치며

입문시 추천 순서

참고 자료

이 글 공유하기:

관련

댓글 남기기응답 취소