typescriptintermediate
Static Export Configuration
Configure Next.js for static export with output: 'export' for deployment to static hosts.
typescriptPress ⌘/Ctrl + Shift + C to copy
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
output: 'export',
// Optional: Change the output directory
distDir: 'out',
// Required: Set trailing slashes for static hosting
trailingSlash: true,
// Images must use unoptimized for static export
images: {
unoptimized: true,
},
// Environment variables available at build time
env: {
NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
},
};
export default nextConfig;
// Things that DON'T work with static export:
// - Server Actions (use client-side API calls)
// - Route Handlers with dynamic data
// - Middleware
// - Image Optimization (use unoptimized)
// - ISR / revalidate
// Things that DO work:
// - generateStaticParams
// - Client Components
// - Static Route Handlers (GET only)
// - next/image with unoptimized
// Package.json scripts for static deployment:
// "scripts": {
// "build": "next build",
// "export": "next build" // output: 'export' handles it
// }
// Cloudflare Pages deployment:
// Build command: npx next build
// Output directory: out
// Node.js version: 18Use Cases
- Cloudflare Pages
- GitHub Pages
- S3 static hosting
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
yamlintermediate
GitHub Actions — Deploy to Cloudflare Pages
Automated deployment pipeline to Cloudflare Pages with build preview for PRs and production on main.
Best for: Zero-config deployment for static Next.js exports
#github-actions#cloudflare
typescriptintermediate
Type-Safe API Route Handler
Next.js App Router route handler with input validation, typed responses, and proper error handling.
Best for: CRUD API endpoints
#api#route-handler
typescriptintermediate
Authentication Middleware Guard
Next.js middleware that checks auth tokens on protected routes and redirects unauthenticated users to login.
Best for: Dashboard access control
#middleware#authentication
typescriptintermediate
Server Action with Form Validation
Next.js Server Action handling form submissions with validation, error messages, and redirect on success.
Best for: Blog post creation
#server-actions#forms