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 ⬇️
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!
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-1region, 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!
Top comments (17)
IT'S FREE NEXT JS!
hahahaha
Great tutorial on deploying Next.js apps with SST on AWS! SST makes it free and easy to deploy serverless applications, giving you control over your infrastructure. Plus, deploying on your own domain name with Route 53 adds that professional touch. Keep building and enjoy the journey! 🚀🌐
P-Chol 🙌 🙌 🙌
HI, getting this error Could not load credentials from any providers
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.
Thanks mate. there were 2 issue one was this AWS, but second was .open-next/assets. now all good
Never heard of SST before. It looks similar to the Serverless Framework. Are the two comparable?
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!
Good one.
Learnt something new,
One question, I thought cert manager from AWS is not free.
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 😅
You don't even need SST, you can just deploy directly to Lambda
@pchol22 Quick question, I have a domain on godaddy, can I link that domain name to this sst server ?
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)
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
Hello, how would I pass the sst to generate the url= domain/mysite.
ex: mydomain/mysite