Static Export

~18 min · static export, out, no SSR

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

순수 HTML/CSS/JS

output: 'export' 설정하고 next build 가 static file 의 out/ directory 생성. Static host (S3, GitHub Pages, Cloudflare Pages, plain nginx) 어디든 drop.

포기하는 것

작동	안 작동
Server Component (build-time)	Server Action
Static Route Handler (GET)	Proxy / dynamic Route Handler
Client Component + SWR	ISR / on-demand revalidation
`generateStaticParams`	`cookies()`, `headers()`
Custom loader 의 `next/image`	Default image optimizer

언제 사용

Marketing site, docs, portfolio — 순수 content. 가능한 가장 싼 deploy: compute 없는 어떤 CDN 이든.

Code

Configure 와 build·ts

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  output: 'export',
  trailingSlash: true,    // optional: /about/ 대신 /about
  images: { unoptimized: true }, // 또는 custom loader
};
export default config;

Build·bash

npm run build

# Output:
# out/
# ├── index.html
# ├── about/index.html
# ├── blog/post-1/index.html
# └── _next/...

# Deploy:
npx serve out                # local test
aws s3 sync out s3://bucket   # production

External links

Static export

Exercise

Content-only project 를 output: 'export' 로 변환. out/ directory 를 어떤 static host 든 deploy 하고 모든 route render 하는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousDocker Next →Production 의 Environment Variable

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.