Next.js 최종 수정일 2026-06-19 00:48 조회수 5
홈 대시보드

Next.js

#it#next.js#react#프론트엔드#풀스택#nextjs#ssr#ssg#frontend

기본 정보

  • 이름: Next.js
  • 분류: React 기반 풀스택 프레임워크
  • 개발사: Vercel
  • 최초 공개: 2016년
  • 개발 언어: JavaScript, TypeScript
  • 주요 용도: SSR, SSG, SPA, 풀스택 웹 애플리케이션 개발
  • 관련 주제: #Nextjs #React #SSR #SSG #Frontend

개요

Next.js는 React를 기반으로 개발된 풀스택 웹 프레임워크이다.

기존 React가 클라이언트 중심(CSR)으로 동작하는 것과 달리, Next.js는 SSR(Server Side Rendering), SSG(Static Site Generation), CSR(Client Side Rendering) 을 모두 지원하여 SEO와 성능을 크게 향상시킬 수 있다.

또한 API 서버 기능과 파일 기반 라우팅(File-based Routing)을 제공하여 프론트엔드와 백엔드를 하나의 프로젝트에서 개발할 수 있다.

현재 React 생태계에서 가장 널리 사용되는 프레임워크 중 하나이다.

Next.js 구조

Browser

↓

Next.js

├── React

├── App Router

├── API Routes

├── Server Components

└── Client Components

↓

Database

↓

Response

주요 특징

  • React 기반
  • SSR 지원
  • SSG 지원
  • CSR 지원
  • 파일 기반 라우팅
  • API Route 제공
  • SEO 최적화
  • TypeScript 지원
  • 이미지 최적화
  • 코드 분할(Code Splitting)

프로젝트 생성

npx create-next-app@latest

TypeScript 프로젝트

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

프로젝트 구조

app/

components/

public/

styles/

lib/

hooks/

middleware.ts

next.config.js

package.json

Next.js 13 이상에서는 app 디렉터리(App Router)가 기본이다.

파일 기반 라우팅

app/

├── page.tsx

├── about/

│   └── page.tsx

└── user/

    └── page.tsx

자동으로 다음 URL이 생성된다.

/

/about

/user

기본 페이지

export default function Home() {

  return (

    <h1>

      Hello Next.js

    </h1>

  );

}

Layout

공통 레이아웃을 정의한다.

export default function RootLayout({

children

}) {

return (

<html>

<body>

{children}

</body>

</html>

);

}

Server Component

기본적으로 Next.js App Router는 Server Component를 사용한다.

장점

  • SEO 우수
  • 초기 로딩 빠름
  • 서버에서 데이터 조회 가능

Client Component

"use client";

export default function Counter(){

}

useState, useEffect 등을 사용할 경우 "use client" 선언이 필요하다.

데이터 가져오기

async function getUsers(){

const res =

await fetch(

"https://api.test.com"

);

return res.json();

}

Server Component에서 직접 사용할 수 있다.

API Route

app/

api/

user/

route.ts

API 엔드포인트

/api/user

API 예제

export async function GET(){

return Response.json({

name:"구름"

});

}

SSR(Server Side Rendering)

요청

↓

Server

↓

HTML 생성

↓

Browser

매 요청마다 서버에서 HTML을 생성한다.

SSG(Static Site Generation)

Build

↓

HTML 생성

↓

CDN 저장

↓

Browser

빌드 시 정적 페이지를 생성한다.

CSR(Client Side Rendering)

Browser

↓

JavaScript 실행

↓

API 호출

↓

화면 출력

React와 동일한 방식으로 동작한다.

Image 컴포넌트

import Image

from "next/image";

<Image

src="/logo.png"

width={200}

height={100}

alt="Logo"

/>

자동 최적화를 지원한다.

Link 컴포넌트

import Link

from "next/link";

<Link

href="/about"

>

About

</Link>

페이지 이동 시 성능을 최적화한다.

Middleware

export function middleware(

request

){

}

로그인 검사, 권한 체크 등에 사용된다.

장점

  • SEO 최적화
  • 빠른 초기 로딩
  • React 기반
  • API 서버 제공
  • 파일 기반 라우팅
  • 이미지 자동 최적화
  • TypeScript 지원
  • Vercel 배포 최적화

단점

  • React보다 학습 범위가 넓음
  • SSR 개념 이해 필요
  • Server/Client Component 구분 필요
  • 프로젝트 구조가 복잡해질 수 있음

React와 비교

ReactNext.js
UI 라이브러리풀스택 프레임워크
CSR 중심SSR·SSG·CSR 지원
Router 별도 설치기본 제공
SEO 대응 추가 작업SEO 친화적
API 서버 별도 구성API Route 제공

Next.js와 Nuxt 비교

Next.jsNuxt
React 기반Vue 기반
Vercel 개발Nuxt Labs 개발
App RouterPages 구조
React 생태계Vue 생태계

대표 활용 분야

  • 기업 홈페이지
  • SaaS
  • 쇼핑몰
  • 블로그
  • ERP
  • 관리자 페이지
  • 커뮤니티
  • AI 서비스

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • App Router 사용
  • TypeScript 적용
  • Server Component 우선 활용
  • 필요한 경우만 Client Component 사용
  • API Route와 Server Action 적극 활용
  • next/image 사용
  • next/link 사용
  • 환경 변수(.env.local) 분리
  • ESLint 및 Prettier 적용
  • Vercel 배포 환경 최적화

Next.js와 함께 사용하는 기술

대표 개발 도구

  • Visual Studio Code
  • Vercel
  • npm
  • pnpm
  • Turbopack
  • Chrome DevTools

관련 문서

출처

  • Next.js 공식 홈페이지
  • Next.js 공식 문서
  • Vercel 기술 문서

백링크

JSXVercelGithubReactJavaScript프론트엔드TypeScriptSPANode.js