---
title: 'Deploy Next.js Static Site on AWS S3 and CloudFront'
description: 'Learn how to deploy a Next.js static site (output export) on AWS quickly and securely using Thunder.'
---
import { Tabs, TabItem, LinkButton, Aside } from '@astrojs/starlight/components';
You can deploy a static [Next.js SPA](https://nextjs.org/) 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)](https://aws.amazon.com/cdk/) with the [CDK-SPA](https://github.com/thunder-so/cdk-spa) package. Note that CDK-SPA does not support SSR.
2. Using the [Thunder console](https://console.thunder.so) 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.
View code in StackBlitz
## Deploy using AWS CDK
---
[CDK-SPA](https://www.npmjs.com/package/@thunderso/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:
```sh
npm create next-app@latest my-nextjs-app
cd my-nextjs-app
npm install
```
```sh
pnpm create next-app my-nextjs-app
cd my-nextjs-app
pnpm install
```
```sh
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:
```sh
npm i tsx aws-cdk-lib @thunderso/cdk-spa --save-dev
```
```sh
pnpm add -D tsx aws-cdk-lib @thunderso/cdk-spa
```
```sh
bun add -d tsx aws-cdk-lib @thunderso/cdk-spa
```
Create a `stack/index.ts` file. Edit it to match your project:
```ts title="stack/index.ts"
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](https://nextjs.org/docs/advanced-features/static-html-export).
```ts title="next.config.mjs"
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:
```json title="tsconfig.json"
{
"compilerOptions": {
// ... other options
},
"exclude": ["node_modules", "stack"]
}
```
### 4. Deploy
Before you deploy, run your build script to generate artifacts in the `out` directory.
```sh
npm run build
```
```sh
pnpm run build
```
```sh
bun run build
```
By running the following script, the CDK stack will be deployed to AWS.
```sh
npx cdk deploy --all --app="npx tsx stack/index.ts"
```
```sh
pnpm exec cdk deploy --all --app="pnpm exec tsx stack/index.ts"
```
```sh
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](https://github.com/thunderso/cdk-spa).
## Deploy using Thunder console
---
You can also deploy your Next.js static site on AWS using the [Thunder console](https://console.thunder.so).
### Build Settings
Use the following commands in the build step settings:
```sh title="Install command"
npm install --legacy-peer-deps
```
```sh title="Build command"
npm run build
```
```sh title="Output directory"
out
```
```sh title="Install command"
npx pnpm install
```
```sh title="Build command"
npx pnpm run build
```
```sh title="Output directory"
out
```
```sh title="Install command"
npx bun install
```
```sh title="Build command"
npx bun run build
```
```sh title="Output directory"
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](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables).
1. Define your environment variables in the Thunder console under the [Environment Variables](/docs/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:
```sh title=".env"
NEXT_PUBLIC_API_URL=https://api.example.com
```
Use it in your application:
```ts title="pages/index.tsx"
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
export default function Home() {
return (