Next.js 란?

 

1. Next.js란?

Next.js는 React 기반의 웹 프레임워크입니다.
React를 좀 더 실용적으로, 실무에 맞게 웹 앱을 쉽게 만들 수 있도록 도와주는 도구입니다.

---

2. 핵심 개념 5가지

(1) 파일 기반 라우팅

• pages/index.tsx → /
• pages/about.tsx → /about
• 따로 react-router 설정 필요 없습니다.

---

(2) 서버 사이드 렌더링 (SSR) 지원

• React는 클라이언트에서만 렌더링 → SEO 약함
• Next는 서버에서 HTML 미리 만들어서 보냄 → 검색엔진 최적화(SEO)에 강함

---

(3) 정적 사이트 생성 (SSG)

• 빌드 시 HTML 미리 만들어서 빠르게 제공

 

---

(4) API 라우트 내장

• pages/api/hello.ts → /api/hello로 API 서버 자동 생성됩니다.

---

(5) 이미지 최적화, CSS 모듈, Head 설정 등 다양한 기능 내장

• next/image, next/head, next/link 등 편리한 컴포넌트 제공

---

3. Next.js vs Express.js

	Next.js	Express.js
목적	프론트엔드 프레임워크	백엔드 서버 프레임워크
기반 기술	React	Node.js
라우팅 방식	파일 기반 자동 라우팅	코드 기반 수동 라우팅
서버 사이드 렌더링	O (기본 지원)	X (직접 구현해야 함)
API 제공	O (내장)	O (자유롭게 구성 가능)
정적 파일 지원	O (public 폴더 활용)	O (express.static 사용)
사용 용도	프론트 중심 웹 앱	백엔드 API 서버

• Next.js = React + 서버 렌더링 + API + 정적 페이지 자동화까지 다 해주는 풀스택 도구
• Express.js = 서버만 다루는 백엔드 프레임워크

---

4. 모듈 기반 구조 특징

(1) pages/ 폴더 = 라우트 정의

(2) components/ 폴더 = 공통 UI 컴포넌트

EX) components -> Header.tsx Footer.tsx Button.tsx

 

 

(3) modules 또는 features 폴더 (선택)

기능 단위(user, post 등)로 나눠서 코드를 관리하는 게 일반적입니다.

 

(4) utils, hooks, styles 등도 모듈화

 

5. 사용 예시 순서 정리 

 

1	프론트	POST /auth/login 요청 (userId, password)
2	AuthController	login() 실행
3	AuthService	validateUser()로 유저 검증
4	AuthService	login()에서 JWT 발급
5	클라이언트	응답 받은 JWT 저장
6	프론트	GET /auth/me 요청 (헤더에 토큰 포함)
7	JwtAuthGuard	JWT 토큰 추출 및 검증 시작
8	JwtStrategy	validate() 실행 → req.user에 저장
9	AuthController	getProfile() 실행 → 사용자 정보 반환

 

6. 현업에서의 사용 사례

(1) 대기업

• Netflix, Twitch, TikTok 일부 웹은 Next.js 기반
• 구글, 마이크로소프트도 일부 페이지는 Next.js

(2) 스타트업/외주

• 빠른 MVP 개발과 배포를 위해 자주 선택됨
• Vercel(Next.js 만든 회사)에서 배포도 쉬움

(3) 포트폴리오/블로그

• 개인 개발자들이 포트폴리오, 블로그, Devlog 만들 때 최애