Deploy Next.js to AWS Amplify
LaunchFast LogoLaunchFast
Blog
ENDEES
1,009 words6 min read

Deploy Next.js to AWS Amplify

How to deploy your Next.js Server-Side Rendered (SSR) websites to AWS Amplify.

Rishi Raj Jain
Rishi Raj JainAuthor

In this guide, you will learn how to deploy a Next.js SSR project to AWS Amplify. You will go through the process of setting up a new Next.js project, enabling server-side rendering using the AWS Amplify adapter, and finally deploying it to AWS Amplify.

Sponsored

High Quality Starter Kits with built-in authentication flow (Auth.js), object uploads (AWS, Clouflare R2, Firebase Storage, Supabase Storage), integrated payments (Stripe, LemonSqueezy), email verification flow (Resend, Postmark, Sendgrid), and much more. Compatible with any database (Redis, Postgres, MongoDB, SQLite, Firestore).

Get all 3 kits$147$99

One-time license · Lifetime updates

Prerequisites

You’ll need the following:

Create a new Next.js application

Let’s get started by creating a new Next.js project. Open your terminal and run the following command:

Terminal window
npx create-next-app@latest my-app

When prompted, choose:

Once that is done, move into the project directory and start the app in development mode by executing the following command:

Terminal window
cd my-app
npm run dev

The app should be running on localhost:3000.

Then, you’ll need to make the following change to your next.config.js file. Open the file and add the following code:

next.config.js
module.exports = {
    output: 'standalone',
}

Then, create an amplify.mjs file at the root of the repository with the following code:

amplify.mjs
import { join } from 'node:path';
import { writeFileSync, mkdirSync, existsSync, cpSync, rmSync } from 'node:fs';


// Define all the Amplify related directories
const amplifyDirectories = [
    join(process.cwd(), '.amplify-hosting'),
    join(process.cwd(), '.amplify-hosting', 'static'),
    join(process.cwd(), '.amplify-hosting', 'static', '_next'),
    join(process.cwd(), '.amplify-hosting', 'compute'),
    join(process.cwd(), '.amplify-hosting', 'compute', 'default'),
    join(process.cwd(), '.amplify-hosting', 'compute', 'default', 'node_modules'),
]


// Create directories if they do no exist already
if (existsSync(amplifyDirectories[0])) rmSync(amplifyDirectories[0], { force: true, recursive: true })


// Create directories if they do no exist already
amplifyDirectories.forEach((i => mkdirSync(i)))


// A general default configuration to fallback to compute if no matching static assets found
const deployManifestConfig = {
    version: 1,
    routes: [
        {
            path: `/assets/*`,
            target: {
                kind: "Static",
            },
        },
        {
            path: `/*.*`,
            target: {
                kind: "Static",
            },
            fallback: {
                kind: "Compute",
                src: "default",
            },
        },
        {
            path: "/*",
            target: {
                kind: "Compute",
                src: "default",
            },
        },
    ],
    computeResources: [
        {
            name: "default",
            entrypoint: "server.js",
            runtime: "nodejs18.x",
        },
    ],
    framework: {
        name: "next",
        version: "13.5.6",
    },
};


// Write the config to .amplify-hosting/deploy-manifest.json
writeFileSync(
    join(process.cwd(), ".amplify-hosting", "deploy-manifest.json"),
    JSON.stringify(deployManifestConfig),
);


// Copy the static assets generated in .next/static and public to .amplify-hosting/static directory
cpSync(join(process.cwd(), 'public'), amplifyDirectories[1], { recursive: true })
cpSync(join(process.cwd(), '.next', 'static'), amplifyDirectories[2], { recursive: true })


// Copy the static assets generated in .next/standalone to .amplify-hosting/compute directory
cpSync(join(process.cwd(), '.next', 'standalone'), amplifyDirectories[4], { recursive: true })


// Remove .next/static and public from .amplify-hosting/compute/default
rmSync(join(amplifyDirectories[4], '.next', 'static'), { force: true, recursive: true })
rmSync(join(amplifyDirectories[4], 'public'), { force: true, recursive: true })

Then, create an amplify.yml file at the root of the repository with the following code:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env >> .env
        - npm run build
        - node amplify.mjs
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

The code above does the following:

Deploy to AWS Amplify

The code is now ready to deploy to AWS Amplify. Use the following steps to deploy:

Host your web app in AWS Amplify GitHub as code source in AWS Amplify Link Repo in AWS Amplify Name the project in AWS Amplify Add Environment Variables in AWS Amplify Deploy to AWS Amplify Grab Deployment URL in AWS Amplify

Conclusion

Yay! You now have a Next.js project that automatically deploys to AWS Amplify upon Git push.

If you have any questions or comments, feel free to reach out to me on Twitter.

Continue reading