Since a year ago
• 5 minutes to read

How to deploy Next.js 13 with SST

You will never go back to the old way of deploying Next.js app

Author
Thyatdora Ny
Creative Fullstack Developer

Sambo elephant was 63 years old this year. She died from sickness recently. When I was a kid, I used to see her around Wat Phnom Pagoda, the Royal Palace, and Riverside, where she worked. I was always so excited each time I saw her, but never got close due to my mother's concerns. Lastly, I want to dedicate this article to her.

May your soul rest in peace, Sambo.

1. Prerequisites

This article is solely using AWS services.

You should have some basic knowledge:

1.1. Optional

It would be great if you have your own domain name. I will use example name yourdomain.com as my domain name.

The domain provider that I will show is Route 53 from AWS. Learn more about Route 53.

2. Introduction

A few years back, if you want to deploy a Next.js app, you would need to use a server to host your app. You would need to set up a server, install Node.js, and install Nginx to serve your app. It was a lot of work.

When it comes to managing and maintaining, it is where the real pain begins. Services like Vercel, Netlify and AWS Amplify are created to solve this problem. They provide a serverless service to host your app so you can deploy your app without worrying about the server, and let the serverless service handle the rest from scaling, to prevision at edge locations.

2.1. What is SST?

SST is a framework that makes it easier for you to build modern full-stack applications on AWS. That's what the offical website says.

2.2. Why SST?

The main selling point of SST is that you write the infrastucture in typescript, and it will generate the CloudFormation template for you. You can also use the CDK to do the same thing. However, SST is more opinionated and easier to use. It is very scalable and flexible than other framework like serverless framework.

Not only that the fast growing community is also a plus. You can find a lot of examples and tutorials on the internet, which can help you in the long run.

3. Getting Started

3.1. Create Next SST Application

Let's get started by creating a new Next.js app.

1# Create a new Next.js app
2npx create-next-app sst-next-app
3
4# Go to the sst-next-app directory
5cd sst-next-app
6
7# Initialize a new SST project
8npx create-sst@latest
1# Create a new Next.js app
2npx create-next-app sst-next-app
3
4# Go to the sst-next-app directory
5cd sst-next-app
6
7# Initialize a new SST project
8npx create-sst@latest

Within the sst-next-app directory, you'll find the sst.config.ts file. It contains the default boilerplate after running npx create-sst@latest.

sst.config.ts
1import { SSTConfig } from "sst";
2import { NextjsSite } from "sst/constructs";
3
4export default {
5  config(_input) {
6    return {
7      name: "sst-next-app",
8      region: "us-east-1",
9    };
10  },
11  stacks(app) {
12    app.stack(function Site({ stack }) {
13      const site = new NextjsSite(stack, "site");
14
15      stack.addOutputs({
16        SiteUrl: site.url,
17      });
18    });
19  },
20} satisfies SSTConfig;
sst.config.ts
1import { SSTConfig } from "sst";
2import { NextjsSite } from "sst/constructs";
3
4export default {
5  config(_input) {
6    return {
7      name: "sst-next-app",
8      region: "us-east-1",
9    };
10  },
11  stacks(app) {
12    app.stack(function Site({ stack }) {
13      const site = new NextjsSite(stack, "site");
14
15      stack.addOutputs({
16        SiteUrl: site.url,
17      });
18    });
19  },
20} satisfies SSTConfig;

To deploy the Next application, run this command:

1npx sst deploy
1npx sst deploy

Once the deployment completes, you'll receive the CloudFront domain name, which you can use to access your deployed application.

3.2. Custom Domain with Route53

To use a custom domain name for your Next application, you'll need a domain name. You can obtain one from any domain registration service, but I recommend Route 53. What you need now is a hosted zone.

If you've already registered a domain name using Route 53, it will automatically generate a hosted zone with that domain name for you. If not, you can create one by following these instructions.

If you are using a different domain registration service, make sure you update this value.

In sst.config.ts, update the code as follow:

sst.config.ts
1import { SSTConfig } from "sst";
2import { NextjsSite } from "sst/constructs";
3
4// change this value to domain name you have created on Route53
5const domainName = 'yourdomain.com' 
6const getAlternativeNames = () => [`*.${domainName}`]
7
8export default {
9  config(_input) {
10    return {
11      name: "sst-next-app",
12      region: "us-east-1",
13    };
14  },
15  stacks(app) {
16      // create hosted zone to generate certificate for the domain name
17      const hostedZone = HostedZone.fromLookup(stack, "hosted-zone", {
18        domainName,
19      });
20
21      // create certificate for the domain name
22      const certificate = new Certificate(stack, "certificate", {
23        domainName,
24        subjectAlternativeNames: getAlternativeNames(),
25        validation: CertificateValidation.fromDns(hostedZone),
26      });
27
28      // create a next application with the certificate and a custom domain name
29      const site = new NextjsSite(stack, "site", {
30        customDomain: {
31          domainName,
32          cdk: {
33            hostedZone,
34            certificate,
35          },
36        },
37        cdk: {},
38        environment: {},
39      });
40
41      stack.addOutputs({
42        SiteUrl: site.url,
43      });
44    });
45  },
46} satisfies SSTConfig;
sst.config.ts
1import { SSTConfig } from "sst";
2import { NextjsSite } from "sst/constructs";
3
4// change this value to domain name you have created on Route53
5const domainName = 'yourdomain.com' 
6const getAlternativeNames = () => [`*.${domainName}`]
7
8export default {
9  config(_input) {
10    return {
11      name: "sst-next-app",
12      region: "us-east-1",
13    };
14  },
15  stacks(app) {
16      // create hosted zone to generate certificate for the domain name
17      const hostedZone = HostedZone.fromLookup(stack, "hosted-zone", {
18        domainName,
19      });
20
21      // create certificate for the domain name
22      const certificate = new Certificate(stack, "certificate", {
23        domainName,
24        subjectAlternativeNames: getAlternativeNames(),
25        validation: CertificateValidation.fromDns(hostedZone),
26      });
27
28      // create a next application with the certificate and a custom domain name
29      const site = new NextjsSite(stack, "site", {
30        customDomain: {
31          domainName,
32          cdk: {
33            hostedZone,
34            certificate,
35          },
36        },
37        cdk: {},
38        environment: {},
39      });
40
41      stack.addOutputs({
42        SiteUrl: site.url,
43      });
44    });
45  },
46} satisfies SSTConfig;

To deploy your application, you can run this command in your terminal.

1npx sst deploy
1npx sst deploy

Once the deployment is finished, you'll receive a CloudFront domain name. This is the URL you can use to visit your deployed application.

4. Conclusion

In this article, you have learned how to deploy a Next.js application with SST. You also learned how to use Route53 to manage your domain name.

5. Reference