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

Pure HTML/CSS/JS

Set output: 'export' and next build generates an out/ directory of static files. Drop them on any static host (S3, GitHub Pages, Cloudflare Pages, plain nginx).

What you give up

Works	Doesn't work
Server Components (build-time)	Server Actions
Static Route Handlers (GET)	Proxy / dynamic Route Handlers
Client Components + SWR	ISR / on-demand revalidation
`generateStaticParams`	`cookies()`, `headers()`
`next/image` with custom loader	Default image optimizer

When to use it

Marketing sites, docs, portfolios — anything that's pure content. The cheapest deploy possible: any CDN with no compute.

Code

Configure and build·ts

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  output: 'export',
  trailingSlash: true,    // optional: /about/ instead of /about
  images: { unoptimized: true }, // or supply a 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

Convert a content-only project to output: 'export'. Deploy the out/ directory to any static host and confirm every route renders.

Progress

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

← PreviousDocker Next →Environment Variables in Production

Spotted a bug or have feedback on this page?Report an Issue

Comments 0

🔔 Reply notifications (sign in)

No comments yet — be the first.