typescriptintermediate

Static Export Configuration

Configure Next.js for static export with output: 'export' for deployment to static hosts.

typescript
// 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: 18

Use Cases

  • Cloudflare Pages
  • GitHub Pages
  • S3 static hosting

Tags

Related Snippets

Similar patterns you can reuse in the same workflow.