How To Deploy a Next.js App With SST

Tired of wrestling with AWS just to get your Next.js app online? What if deploying your Next.js app to production only took a few lines of code? In this post, I’ll show you how to use SST to seamlessly deploy your Next.js app to AWS. Whether you're launching a side project or building a production-ready app, SST makes it easy to set up your cloud infrastructure without the headache.

Jordan Wu profile picture

Jordan Wu

8 min read·Posted 

Silhouette Of Trees During Sunset Image.
Silhouette Of Trees During Sunset Image.
Table of Contents

What is SST?

SST (Serverless Stack) is a modern framework for building full-stack applications on AWS, offering a powerful abstraction over the AWS CDK to streamline infrastructure management and deployment. It’s built for developers who want the flexibility and control of native cloud infrastructure with a first-class local development experience. SST supports features like live Lambda debugging, hot-reloading, and TypeScript-native infrastructure definitions, making it easier to develop, test, and deploy serverless apps efficiently. It also provides higher-level constructs for deploying frameworks like Next.js, managing custom domains, and integrating with AWS services like API Gateway, DynamoDB, S3, and Cognito. By combining infrastructure-as-code with a developer-friendly workflow, SST bridges the gap between ease of use and production-readiness for serious cloud applications.

sst.config.ts file

The sst.config.ts file is the main entry point for configuring an SST application. It defines key settings such as the app name, AWS region, and deployment environment, and it specifies which parts of your infrastructure should be deployed. Written in TypeScript, the file allows for dynamic logic. So you can adjust configurations based on environment variables, deployment stage, or other conditions. This flexibility makes it easy to manage different environments like development and production within a single centralized configuration.

It plays a crucial role in managing your application’s infrastructure as code (IaC) by allowing you to define and organize your cloud resources. It serves as the central place to control what gets deployed and it provides the flexibility to dynamically manage settings and behavior across stages like development, staging, and production. This approach ensures that your infrastructure is version-controlled, reproducible, and easy to maintain as your application scales.

Workflow

SST Workflow is a feature that simplifies and streamlines the deployment and management of serverless applications. It provides a set of tools for automating common tasks, such as deploying infrastructure, testing, and managing environments, with minimal configuration. SST Workflow integrates with version control systems like GitHub and GitLab to automate the CI/CD pipeline. Enabling developers to deploy their application seamlessly across different stages like development, staging, and production. By defining IaC and leveraging tools like SST Live and live debugging. Workflow ensures smooth collaboration among teams while maintaining a fast and efficient development process. It empowers developers to focus on building features rather than managing deployment processes, improving productivity and reducing friction in the deployment pipeline.

Live

SST Live is a powerful feature in the SST (Serverless Stack) framework that enhances the local development experience by enabling real-time, live debugging of AWS Lambda functions. It allows developers to quickly iterate and test their serverless applications without needing to deploy changes to the cloud each time. With SST Live, changes to code are reflected instantly, providing a faster feedback loop, especially for serverless applications. This feature supports functions like live reloading and debugging, allowing developers to troubleshoot and refine their code locally before deploying it to AWS, making the development process more efficient and streamlined.

State

SST State simplifies managing and persisting application state across different environments. It allows developers to store and retrieve state data, such as configuration values or application metadata in a secure and scalable way using AWS services like DynamoDB or S3. It ensures that your application's state remains consistent and easily accessible throughout the development, staging, and production stages. Even as changes are made to the infrastructure. By abstracting away the complexities of managing state, developers focus on building application logic.

Linking

SST Linking allows you to access your infrastructure within your runtime code in a typesafe and secure manner. It enables seamless integration between AWS resources like APIs, databases, and storage, ensuring that dependencies are automatically managed with proper permissions. With SST Linking, developers can directly reference and interact with resources. All while maintaining strong type safety. This will reduce the risk of runtime errors. This feature simplifies the process of connecting different components of your application. Making it easier to build and maintain a secure and modular serverless architecture.

Providers

SST Providers allow developers to extend the functionality of their serverless applications by integrating third-party services and resources seamlessly. Providers act as wrappers around external resources, such as databases, APIs, or other cloud services. Making it easier to manage and interact with these resources within your application. This enables the creation of highly extensible and modular serverless applications that can easily integrate with a wide range of services while maintaining a consistent and manageable infrastructure. Check out the directory of for the full list of providers that SST supports.

Components

SST Components simplify the creation and management of serverless infrastructure. These components encapsulate common patterns and best practices for deploying AWS resources, such as APIs, databases, or file storage, allowing developers to focus on the application logic rather than the underlying infrastructure. By using components, developers can easily define complex cloud resources with minimal configuration. This will improve development speed and consistency. Components can be shared across different projects, making it simple to scale applications and maintain infrastructure while ensuring best practices are followed. This modular approach enables a more efficient and organized way to build, deploy, and manage serverless applications.

Console

SST Console is a web-based interface that allows developers to monitor and manage their serverless applications built with SST. It provides real-time insights into your app’s performance, including logs, metrics, and other key data from AWS resources like Lambda functions, APIs, and databases. The console simplifies debugging by making it easier to track function invocations, error messages, and resource usage. This helps developers quickly identify issues and optimize their applications. With this tool, you can manage your serverless stack more effectively without needing to rely on the AWS Management Console.

Secrets

SST Secrets is a feature that helps you manage sensitive information securely in your serverless applications. It allows you to store and access secrets, such as API keys, database credentials, and other sensitive data, directly in AWS Secrets Manager. With SST Secrets, you can easily integrate these secrets into your application while keeping them safe and encrypted. It supports seamless retrieval of secrets during both local development and production deployments. Ensuring that your sensitive information is never hard-coded or exposed. This makes it easier to manage your app's configuration securely without compromising on convenience or security, all while maintaining a smooth developer experience.

Deploying Your Next.js App with SST

SST simplifies the deployment of Next.js apps by utilizing OpenNext.js, an open-source project that SST uses under the hood. OpenNext.js is a specialized framework built to optimize the deployment of Next.js apps in serverless environments, particularly AWS. It helps handle server-side rendering (SSR), static site generation (SSG), and API routes in a way that is optimized for serverless architectures. By using OpenNext.js, SST abstracts much of the complexity around configuring serverless deployments for Next.js. Ensuring high performance and scalability. This integration allows developers to easily deploy their Next.js apps on AWS with minimal configuration, without needing to manually handle the intricacies of serverless deployment.

First install sst.

pnpmyarnnpm
pnpm add sst

Now let’s initialize SST in your Next.js app.

npx sst@latest init

Select the defaults and pick AWS. This will create a sst.config.ts file in your project root.

File Imagesst.config.ts
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: "aws-nextjs",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    new sst.aws.Nextjs("MyWeb");
  },
});

That's all you need to deploy your Next.js app to AWS! Once you are ready to go to production you can run.

sst deploy --stage production

If you want to remove your app and all the resources in it, you can run.

sst remove --stage <name>

This will permanently deletes all the infrastructure and resources associated with the specified deployment stage from your cloud provider account.

Summary

In this post, we went over how to use SST to deploy a Next.js application to AWS. SST has made it incredibly easy to manage and deploy infrastructure across both AWS and Cloudflare without needing to wrestle with a bunch of config files or custom scripts. Whether you're building a full-stack app or just want a smoother way to get your Next.js project running in the cloud. SST makes the whole process feel effortless. Be sure to check out their examples learn more about how to use SST.

Here’s how I use SST to deploy my Next.js app to AWS, with Cloudflare handling the DNS.

File Imagesst.config.ts
/// <reference path="./.sst/platform/config.d.ts" />
export default $config({
  app(input) {
    return {
      name: 'my-repo-name',
      removal: input?.stage === 'production' ? 'retain' : 'remove',
      protect: ['production'].includes(input?.stage),
      home: 'aws',
      providers: { cloudflare: '5.49.1' },
    }
  },
  async run() {
    const bucket = new sst.aws.Bucket('MyBucket', {
      access: 'public',
    })

    new sst.aws.Nextjs('WebClient', {
      path: '../apps/web',
      domain: {
        name: 'my-domain-name',
        dns: sst.cloudflare.dns({
          zone: process.env.CLOUDFLARE_ZONE_ID,
        }),
      },
      link: [bucket],
    })
  },
})

About the Author

Jordan Wu profile picture
Jordan is a full stack engineer with years of experience working at startups. He enjoys learning about software development and building something people want. What makes him happy is music. He is passionate about finding music and is an aspiring DJ. He wants to create his own music and in the process of finding is own sound.
Email icon image
Stay up to date

Get notified when I publish something new, and unsubscribe at any time.