DEV Community

Cover image for Deploy a NEXT.js app for FREE on AWS with SST
Pierre Chollet for Serverless By Theodo

Posted on • Updated on

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

SST deployment end

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 🚀

Cloudfront deployed site

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

⚠️ 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 NS records

Copied into the domain name servers Name servers

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

Route 53 deployed site

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 🚀

Latest comments (19)

Collapse
 
sh20raj profile image
Sh Raj

Deploy Full Stack NextJS app on Cloudflare Pages 📑

Collapse
 
sh20raj profile image
Sh Raj

Collapse
 
shivgonarkar profile image
shivgonarkar

I have created certificates in "us-east-1" region using Bamboo , since I need to get those certificate from vault.
I want to deploy my NextJS application in region "eu-west-1" , Just wanted to know how this can be written. How can I refer and certificate arn of us-east-1 region ? Where should I create HostedZones and how all of them can be fit in this stack. Your help will be really helpful

Collapse
 
tilo1306 profile image
Douglas dos Santos Oliveira • Edited

Hello, how would I pass the sst to generate the url= domain/mysite.
ex: mydomain/mysite

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

You don't even need SST, you can just deploy directly to Lambda

Collapse
 
zainbinfurqan profile image
Zain Ahmed

@pchol22 Quick question, I have a domain on godaddy, can I link that domain name to this sst server ?

Collapse
 
pchol22 profile image
Pierre Chollet

Yes ! On GoDaddy, there should be an option to specify custom name servers for your domain name. Copy the 4 NS values from AWS Route 53 into GoDaddy and it should link them. (It’s not immediate)

Collapse
 
zainbinfurqan profile image
Zain Ahmed

HI, getting this error Could not load credentials from any providers

Collapse
 
pchol22 profile image
Pierre Chollet

Seems like your AWS profile is not correctly set-up.

If you need help, read an old article I wrote (dev.to/kumo/dont-miss-on-the-cloud...)
where I setup AWS from the start on the CLI.

Collapse
 
zainbinfurqan profile image
Zain Ahmed

Thanks mate. there were 2 issue one was this AWS, but second was .open-next/assets. now all good

Collapse
 
timhub profile image
Tech Tim (@TechTim42) • Edited

Good one.

Learnt something new,

One question, I thought cert manager from AWS is not free.

Collapse
 
pchol22 profile image
Pierre Chollet

Thanks!

About pricing, Part 1 of the article is contained in the free tier for an app with limited users.

In part 2, the certificate is free, Hosted zones are not (50cts/zone/month), neither is the domain name (~15$ per year).

I wrote a disclaimer at the start of part 2, saying it's not "free tier" anymore, maybe it's not visible enough 😅

Collapse
 
zirkelc profile image
Chris Cook

Never heard of SST before. It looks similar to the Serverless Framework. Are the two comparable?

Collapse
 
pchol22 profile image
Pierre Chollet • Edited

Hey!

Basically SST is an extension of the AWS CDK, which leverages Cloudformation to deploy apps.

The Serverless Framework also leverages Cloudformation, but in an other way.

In the end both are JS/TS IaC frameworks built on Cloudformation, and learning one is not so hard if you already used the other one!

Collapse
 
astuyve profile image
AJ Stuyvenberg

IT'S FREE NEXT JS!

Collapse
 
pchol22 profile image
Pierre Chollet

hahahaha

Collapse
 
jayair profile image
Jay V • Edited

Image description