Deploy Next.js Static Site on S3 and CloudFront

You can deploy a static Next.js SPA site on AWS with Thunder. The server pre-rendered pages produced by the build step will be stored in an S3 bucket and served using CloudFront CDN.

Configure

In next.config.mjs file, uncomment the line that sets output: "export". Learn more about Next.js static exports.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export", // for SPA mode
  reactStrictMode: true,
  swcMinify: true,

  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  experimental: {
    webpackBuildWorker: true,
    parallelServerBuildTraces: true,
    parallelServerCompiles: true,
  },
}

export default nextConfig

Build Settings

Use the following commands in the build step settings:

npm install --legacy-peer-deps

npm run build

out

npx pnpm install

npx pnpm run build

out

That’s it! Your app will be live on your CloudFront URL as soon as the build finishes.