Deploy Next.js on AWS

Deploy your Next.js applications to AWS using Thunder patterns. This guide covers both static export deployment and full-stack server-side rendering options.

There are two deployment patterns available for Next.js on AWS:

  1. Static Export (SPA) — Deploy static Next.js sites using S3 and CloudFront with the Single Page Application pattern
  2. Full Stack — Deploy SSR Next.js applications using ECS Fargate with the Web Service pattern

Static Export (SPA) Deployment

Deploy Next.js static export applications to S3 and CloudFront using the CDK-SPA library. This pattern is ideal for static sites, blogs, and client-side applications.

Create Project

Terminal window
npm create next-app@latest my-nextjs-app
cd my-nextjs-app

Configure Next.js for Static Export

next.config.mjs
import type { NextConfig } from "next";


const nextConfig: NextConfig = {
  output: "export", // Enable static export
};


export default nextConfig;

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

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

Install Dependencies and Setup Stack

Terminal window
npm i tsx @thunderso/cdk-spa --save-dev
stack/index.ts
import { Cdk, 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 Cdk.App(),
  `${myApp.application}-${myApp.service}-${myApp.environment}-stack`,
  myApp
);

Environment Variables and Secrets for Build

Configure build-time environment variables using the buildProps configuration:

stack/index.ts
const myApp: SPAProps = {
  // ... other props


  buildProps: {
    environment: [
      { NEXT_PUBLIC_API_URL: 'https://api.example.com' },
      { NEXT_PUBLIC_ANALYTICS_ID: 'UA-XXXXXX' }
    ],
    secrets: [
      { key: 'API_KEY', resource: '/my-app/API_KEY' },
    ],
  },
};

Deploy

Build and deploy your static site:

Terminal window
npm run build
npx cdk deploy --all --app="npx tsx stack/index.ts"

After deployment, you’ll receive a CloudFront URL to access your static site.

For complete documentation, see the CDK-SPA README.

Full Stack Deployment

Deploy server-side rendered Next.js applications using ECS Fargate and Application Load Balancer with the CDK-WebService library.

Configure Next.js for SSR

next.config.mjs
import type { NextConfig } from "next";


const nextConfig: NextConfig = {
  // Next.js defaults to SSR, no configuration needed
};


export default nextConfig;

Install Dependencies and Setup Stack

Terminal window
npm i tsx @thunderso/cdk-webservice --save-dev
stack/index.ts
import { Cdk, WebServiceStack, type WebServiceProps } from "@thunderso/cdk-webservice";


const svcProps: WebServiceProps = {
  env: {
    account: 'your-account-id',
    region: 'us-west-2'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',


  rootDir: '', // e.g. 'app/' for monorepos
};


new WebServiceStack(
  new Cdk.App(),
  `${svcProps.application}-${svcProps.service}-${svcProps.environment}-stack`,
  svcProps
);

Build Settings Using Nixpacks

Configure automatic containerization with Nixpacks:

stack/index.ts
const svcProps: WebServiceProps = {
  // ... other props


  buildProps: {
    buildSystem: 'Nixpacks',
    installcmd: 'npm install',
    buildcmd: 'npm run build',
    startcmd: 'npm start',
  },
};

Build Settings Using Docker Container

Alternatively, use a custom Dockerfile:

Dockerfile
FROM public.ecr.aws/docker/library/alpine


# Install Bun
RUN curl -fsSL https://bun.sh/install | bash


# Update PATH for bun
ENV PATH="/root/.bun/bin:$PATH"


# Copy code, install and build
WORKDIR /app
COPY . .
RUN bun install
RUN bun run build


EXPOSE 3000
CMD ["bun", "start"]
stack/index.ts
const svcProps: WebServiceProps = {
  // ... other props


  serviceProps: {
    dockerFile: 'Dockerfile',
    port: 3000,
  },
};

Environment Variables and Secrets for SSR

Configure runtime environment variables and secrets:

stack/index.ts
const svcProps: WebServiceProps = {
  // ... other props


  serviceProps: {
    variables: [
      { NODE_ENV: 'production' },
      { NEXT_PUBLIC_API_URL: 'https://api.example.com' }
    ],
    secrets: [
      {
        key: 'DATABASE_URL',
        resource: 'arn:aws:secretsmanager:us-west-2:123456789012:secret:/my-app/DATABASE_URL-abc123'
      },
    ],
  },
};

Deploy

Build and deploy your containerized application:

Terminal window
npm run build
npx cdk deploy --all --app="npx tsx stack/index.ts"

After deployment, you’ll receive an Application Load Balancer URL to access your SSR application.

For complete documentation, see the CDK-WebService README.