Deploy a NEXT.js app for FREE on AWS with SST

TL;DR

What is SST ?

• SST is an IaC framework built on the AWS CDK, it allows you to deploy applications on AWS using TypeScript.
• SST integrates with OpenNext, an open-source implementation of Vercel's deployment system.
• This allows SST to deploy Next.js applications on your own AWS account, and to be in control of your infra!

What will you learn in this article ?

• In this article, learn in a few steps how to deploy a Next.js application on AWS with SST.
• Bonus: I will also show you how to deploy your website on your own domain name, using SST!

⬇️ I post serverless content very regularly, if you want more ⬇️

Follow me on twitter 🚀

Quick announcement: I also work on a library called 🛡 sls-mentor 🛡. It is a compilation of 30 serverless best-practices, that are automatically checked on your AWS serverless projects (no matter the framework). It is free and open source, feel free to check it out!

Find sls-mentor on Github ⭐️

Why Next.js and SST?

Next.js is in fashion these days, many consider this framework to be the future of React. Next.js allows you to built static and server-side rendered applications with React, that load way quicker than usual SPAs, and guarantee a better SEO and user experience.

Traditionally, there were two main ways to deploy a Next.js application:

• On your own server, with a Node.js process running the application -> high entry cost ❌, tough to manage ❌, but you "own" your infrastructure ✅
• On Vercel, in a serverless way -> easy to use ✅, but zero control over the infrastructure ❌, and expensive for large applications ❌

Meet SST, a recent IaC framework built on top of the AWS CDK. SST allows you to deploy applications on AWS using TypeScript. SST is a great alternative to the older Serverless Framework, and it is much more powerful than the CDK alone.

One of SST's best features is its ability to integrate with OpenNext, an open-source implementation of Vercel's serverless deployment system. This allows SST to deploy Next.js applications on your own AWS account.

SST deploys Next.js apps in a serverless way on your AWS account which means that it's free for small applications ✅ and pay-per-use ✅. Icing on the cake: you are in control of your infrastructure ✅!

Deploy a Next.js app on AWS in 2 simple steps

Make sure you have Node 16+ installed on your machine, Node 18 is recommended!

First, let's create a new Next.js app:

npx create-next-app@latest my-app

Follow the installation steps, and make sure you chose to use TypeScript (SST is built for TypeScript).

Then, head to the newly created folder and install SST.

cd my-app
npx create-sst@latest
npm install

When SST prompts you to setup in "Drop-in mode", answer yes: SST will automatically detect that you are using Next.js and will setup the project accordingly.

You are basically done! You can now deploy your Next.js app on AWS:

npx sst deploy

At the end of the deployment, SST prompts you with the public URL of your application:

Simply enter the link in your browser, and see that your website is on the world wide web! Now it's your turn to built the next killer app 🚀

What if you want your website to be deployed on your own domain name? Keep reading!

Deploy your website on your own domain name

⚠️ This part is optional and isn't free anymore, as you need to buy a domain name!

To buy your own domain name, you can use AWS Route 53 or any other domain name provider. See my other article if you need help.

As I said, SST is built on the AWS CDK, which means that you can integrate any resource from AWS (serverless or not) in your Next.js project. In this part, you will use AWS Route 53 and Amazon Certificate Manager to deploy your website on your own domain name.

First, let's see the file SST added to your project:

// File: sst.config.ts

import { SSTConfig } from "sst";
import { NextjsSite } from "sst/constructs";

export default {
  config(_input) {
    return {
      name: "my-app",
      region: "us-east-1",
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      const site = new NextjsSite(stack, "site");

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;

This file instantiates a Site stack, composed of a NextjsSite construct. This construct is the one that deploys your Next.js application on AWS.

You can add any other AWS resource to your stack. In this case, you will create a hosted zone and a SSL certificate.

• A hosted zone is basically a DNS that will route from your domain name to the "real" URL of your website.
• A SSL certificate is required to deploy your website on a HTTPS endpoint.
• Deploy everything in the us-east-1 region, as it is required for the SSL certificate to work.

The sst.config.ts file should look like this at the end:

// File: sst.config.ts

import { SSTConfig } from "sst";
import { NextjsSite } from "sst/constructs";

import * as cdk from "aws-cdk-lib";

const ROOT_DOMAIN_NAME = "pchol.fr"; // Your domain name here
const DOMAIN_NAME = `sst.${ROOT_DOMAIN_NAME}`; // Any prefix you want, or just the root domain

export default {
  config(_input) {
    return {
      name: "my-app",
      region: "us-east-1", // Keep it that way
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      // Create a hosted zone on your domain name
      const hostedZone = new cdk.aws_route53.HostedZone(stack, "HostedZone", {
        zoneName: ROOT_DOMAIN_NAME,
      });

      // Create a SSL certificate linked to the hosted zone
      const certificate = new cdk.aws_certificatemanager.Certificate(stack, "Certificate", {
        domainName: DOMAIN_NAME,
        validation: cdk.aws_certificatemanager.CertificateValidation.fromDns(hostedZone),
      });

      // Add the hosted zone and the certificate to the Next.js site
      const site = new NextjsSite(stack, "site", {
        customDomain: {
          domainName: DOMAIN_NAME,
          cdk: {
            hostedZone,
            certificate,
          }
        }
      });

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;

You are done! Re-deploy your app and that's all! You can find the full code here on github if you need it.

npx sst deploy

⚠️ Only one small manual step: during the deployment, copy the 4 values in the NS record from your new hosted zone to your domain name provider. You can find them in the AWS console, in the Route 53 service, in the hosted zone you created. More details here!

NS records in the new hosted zone

Copied into the domain name servers

Head to your domain name (here sst.pchol.fr) and see that your website is now deployed on your own domain name!

Conclusion

This is only the beginning of your journey with SST and AWS! You can now integrate any resource, like S3 Buckets, DynamoDB tables or Lambda functions, in your Next.js app. This will allow you to develop advanced backend features!

Follow this tutorial from the SST team if you want to learn more, in general, their documentation is great to get started!

If you want to go further, I wrote a 8 articles series on how to learn AWS, using the AWS CDK. Everything I covered can be integrated into your SST app, so feel free to check it out!

Finally, I would greatly appreciate if you follow me on Twitter and share this article if you liked it! I am open to all your questions and feedbacks if you need help!

Follow me on twitter 🚀