Next.js에 대해 알아보자.
Next.js
Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다.
UI는 React Components로 구성하며, Next.js를 사용해 추가 기능과 최적화를 제공합니다.
내부적으로 Next.js는 번들링, 컴파일링 등 React에 필요한 도구를 추상화하고 자동으로 구성합니다.
이를 통해 개발자는 설정에 시간을 들이지 않고 애플리케이션 구축에 집중할 수 있습니다.
랜더링 방식 (Rendering)
서버 사이드 렌더링 (SSR, Server Side Rendering)
- 페이지 요청 시마다 서버에서 HTML을 생성해 전달
- 동적인 데이터가 자주 변경되는 페이지에 유리
- Pages router :
getServerSideProps() - App router :
fetch
SSG (Static Site Generation)
- 빌드 시 HTML 파일을 생성하여 정적으로 서빙
- 빠른 로딩과 CDN 캐싱에 유리
getStaticProps()+getStaticPaths()조합
ISR (Incremental Static Regeneration)
- 정적 페이지를 일정 시간 간격으로 재생성
revalidate옵션을 통해 실시간성과 성능 모두 확보
CSR (Client Side Rendering)
- 브라우저에서 JavaScript로 렌더링
- 기본 React 방식과 동일하게
useEffect,fetch()등 사용
라우팅 (Routing)
Page Router
- 기존 라우팅 방식, Next.js 12 이하 & 13에서 계속 사용 가능
pages/디렉토리를 기반으로 구성되는 파일 기반 라우팅- 동적 라우팅은
[param].tsx로 구현 getStaticProps,getServerSideProps,getInitialProps를 사용하여 데이터 패칭 수행
1
2
3
4
5
pages/
├── index.tsx # /
├── about.tsx # /about
└── blog/
└── [slug].tsx # /blog/:slug
App Router
- Next.js 13에서 도입된 새로운 라우팅 시스템
app/디렉토리를 기반으로 구성되는 최신 라우팅- React Server Components 기반.
- 중첩된 레이아웃, 로딩 상태, 에러 처리 등을 구조적으로 지원
- 디렉토리 이름에 따라 특수 파일명을 통해 라우팅을 제어
1
2
3
4
5
6
7
8
9
10
app/
├── layout.tsx # 모든 페이지에 공통 적용되는 레이아웃
├── page.tsx # /
├── about/
│ ├── page.tsx # /about
│ └── loading.tsx # /about 로딩 중 보여질 UI
├── blog/
│ └── [slug]/
│ ├── page.tsx # /blog/:slug
│ └── error.tsx # 에러 처리 UI
API Routes
Next.js 내에서 백엔드 API 서버를 구현할 수 있는 라우팅
pages/api/또는app/api/내부에 파일을 만들어 HTTP 엔드포인트를 정의POST, GET 등 메서드 분기도 가능
1
2
3
4
5
// pages/api/hello.ts
// 클라이언트에서 /api/hello로 요청하면 백엔드처럼 동작
export default function handler(req, res) {
res.status(200).json({ message: "Hello API" });
}
Intercepting Routes
- App Router에서만 사용 가능
- 특정 경로를 가로채서 다른 UI를 보여줄 수 있는 기능
- 주로 Modal이나 임시 UI에 사용
- (…)나 (.group) 등의 디렉토리 이름으로 라우트 그룹 설정
Parallel Routes
App Router에서만 사용 가능
한 페이지에서 여러 다른 경로를 동시에 렌더링할 수 있게 해줌
@ 키워드 사용
1
2
3
4
app/
├── layout.tsx
├── @main/page.tsx
└── @sidebar/page.tsx
최적화 (Optimization)
SEO 최적화
페이지별 메타 정보 설정 가능
서버 렌더링(SSR), 정적 생성(SSG) 지원
Next.js 자동
<head>관리
1
2
3
4
export const metadata = {
title: "홈 | MySite",
description: "설명",
};
이미지 최적화
next/image 컴포넌트 사용
지연 로딩(Lazy Loading)
크기 자동 조절 및 반응형 처리
WebP 등으로 포맷 변환
CDN 지원 (Vercel에서 기본 제공)
1
2
3
import Image from "next/image";
<Image src="/profile.png" alt="프로필" width={300} height={300} />;
폰트 최적화
next/font 모듈로 폰트 로딩
Google Fonts 직접 로딩
자동 최적화 및 font-display: swap 적용
서브셋(subsets) 설정 가능
1
2
3
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });
Prefetch
next/link 사용 시 Link 컴포넌트의 자동 prefetch
- Viewport에 보이는 링크는 자동으로 백그라운드에서 페이지 로딩
1
2
3
import Link from "next/link";
<Link href="/about">About</Link>;
이미지 priority 속성으로 preload
- fold 위 콘텐츠에 사용
1
<Image src="/banner.png" alt="배너" width={600} height={400} priority />
번들러 & 개발 도구
Turbopack
- Rust로 작성된 고성능 번들러 (Webpack의 대체)
- 기존 Webpack보다 최대 700배 빠른 HMR(핫 리로드), 최대 10배 빠른 빌드 속도
- Next.js 13 이상에서 베타로 도입 중
- 점진적 빌드와 모듈 캐시 기능으로 대형 프로젝트에 강함
SWC (기본 내장)
- Rust로 작성된 초고속 컴파일러 (Babel 대체)
- JSX/TSX 트랜스파일링, 코드 압축, 데드 코드 제거 등 수행
- 성능은 Babel보다 10~20배 빠름
Code Splitting
페이지 단위로 JS 번들 분리 → 초기 로딩 속도 향상 및 불필요한 코드 전송 방지
Fast Refresh (기본 내장)
- 상태 유지를 기반으로 빠르게 코드 반영하는 핫 리로드 방식
- 컴포넌트 수정 시 전체 페이지 리렌더 없이 해당 부분만 빠르게 갱신
- 기존 HMR(Hot Module Replacement)의 개선 버전