Deploy Next.js Static Site on AWS S3 and CloudFront

You can deploy a static Next.js SPA site on your AWS account.

There are two ways to deploy your Next.js static output on AWS:

1. Using the AWS Cloud Development Kit (CDK) with the CDK-SPA package. Note that CDK-SPA does not support SSR.

2. Using the Thunder console to deploy your app with a few clicks.

The build artifacts (HTML, CSS and JavaScript) will be stored in an S3 bucket and served using CloudFront CDN.

Deploy using AWS CDK

CDK-SPA is a package that simplifies the deployment of static sites to AWS using the AWS Cloud Development Kit (CDK). It provides a straightforward way to deploy your Next.js static export app to AWS S3 and CloudFront.

1. Create a project

You can create a new Next.js project using the following commands:

npm create next-app@latest my-nextjs-app
cd my-nextjs-app
npm install

pnpm create next-app my-nextjs-app
cd my-nextjs-app
pnpm install

bun create next-app my-nextjs-app
cd my-nextjs-app
bun pm trust --all

2. Initialize your project

Install the necessary dependencies and initialize your project:

npm i tsx aws-cdk-lib @thunderso/cdk-spa --save-dev

pnpm add -D tsx aws-cdk-lib @thunderso/cdk-spa

bun add -d tsx aws-cdk-lib @thunderso/cdk-spa

Create a stack/index.ts file. Edit it to match your project:

import { App } from "aws-cdk-lib";
import { SPAStack, type SPAProps } from "@thunderso/cdk-spa";

const myApp: SPAProps = {
  env: {
    account: 'your-account-id',
    region: 'us-east-1'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',

  rootDir: '', // e.g. 'frontend/' for monorepos
  outputDir: 'out/',
};

new SPAStack(
  new App(),
  `${myApp.application}-${myApp.service}-${myApp.environment}-stack`,
  myApp
);

3. Configure Next.js

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

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export", // for SPA mode
};

export default nextConfig;

In your tsconfig.json, ensure the stack directory is excluded in the exclude array:

{
  "compilerOptions": {
    // ... other options
  },
  "exclude": ["node_modules", "stack"]
}

4. Deploy

Before you deploy, run your build script to generate artifacts in the out directory.

npm run build

pnpm run build

bun run build

By running the following script, the CDK stack will be deployed to AWS.

npx cdk deploy --all --app="npx tsx stack/index.ts"

pnpm exec cdk deploy --all --app="pnpm exec tsx stack/index.ts"

npx cdk deploy --all --app="bunx tsx stack/index.ts"

When the deployment is complete, you will see the CloudFront URL in the output. You can access your Next.js static site at that URL.

For complete documentation on how to use CDK-SPA, refer to the CDK-SPA documentation.

Deploy using Thunder console

You can also deploy your Next.js static site on AWS using the Thunder console.

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

npx bun install

npx bun run build

out

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

Environment Variables

Environment variables in Next.js static export are available at build time and can be used in your code with the NEXT_PUBLIC_ prefix. For more information, refer to the official Next.js documentation on environment variables.

1. Define your environment variables in the Thunder console under the Environment Variables section of your project settings.

2. In your code, you can define them in an .env file at the root of your project:

NEXT_PUBLIC_API_URL=https://api.example.com

Use it in your application:

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

export default function Home() {
  return (
    <div>
      <p>API URL: {apiUrl}</p>
    </div>
  );
}