Deploy NextJS Application to AWS with Terraform

Vercel — FrontEnd Cloud

Vercel is great! If you haven’t heard of Vercel, its a cloud platform as service optimized for frontend. Vercel offers solutions to several different pain points for developers which includes continuous deployments, serverless functions, global CDN. Not to mention the simplicity and a top tier UI experience it provides. Deploying to Vercel is as simple as connecting your Github account to Vercel and commit away! Vercel will automatically detect many popular framework and you’ll have your site live in seconds.

Limitations of Vercel

While Vercel undeniably offers a seamless deployment experience with its user-friendly interface and integrations capabilities, its important to keep in mind its limitations. While it provides serverless computing enabling you to include simple backend tasks, it may not be suitable for complex or advanced backends needs. As your stack increases in functionality and user base, you may face scalability and security challenges on Vercel due to its limitations in infrastructure flexibility. For instance, deploying a SaaS application with backend functions handling client PII raises security risks, insecure third party dependancies, insufficient monitoring and logging could result in difficulty detecting and respond to security incidents in a timely manner.

OpenNext

Having explored the strengths and limitations of Vercel for deploying Next.js applications, it’s evident that while Vercel offers a seamless frontend-focused deployment experience, it may pose challenges for projects requiring more complex backend functionalities or extensive scalability measures. To address these needs and flexibilities let’s turn to OpenNext & Terraform. OpenNext is open source Next.js serverless adapter we will be using as opposed to designing infrastructure from scratch. The goal of OpenNext is to create an open source, framework agnostic, serverless adapter specifically designed for Next.js.

For detailed architecture, visit the OpenNext official website: https://open-next.js.org/advanced/architecture

OpenNext takes the Next.js build output and converts it into a package that can be deployed to any functions as a service platform. As of now only AWS Lambda is supported.

As you may have guessed from the title of the article, this is where Terraform comes in. If you’re not familiar with Terraform, Terraform is an infrastructure-as-code software tool created by HashiCorp. Terraform’s immense popularity and utilization across many enterprise companies set a trend becoming somewhat of an industry standard IAC. To further make Next.js deployment convenient for you lets view this Terraform Module maintained by an amazing software engineer Rob Pearson. He is very active and supportive.

The module enables you to deploy your Next.js application using OpenNext efficiently utilizing Lambda, S3, CloudFront (diagram by Rob):

Keep in mind, as of now OpenNext only supports Amazon Web Services.

Terraform Module Setup:

module "open-next_tf-aws-open-next-zone" {
  source      = "RJPearson94/open-next/aws//modules/tf-aws-open-next-zone"
  version     = "2.2.0"
  folder_path = ".open-next"
  providers = {
    aws                 = aws
    aws.global          = aws.global
    aws.iam             = aws.iam
    aws.dns             = aws.dns
    aws.server_function = aws.server_function
  }
  server_function = {
    vpc = {
      security_group_ids = [aws_security_group.lambda_sg.id]
      subnet_ids         = var.private_subnets
    }
  }
}

An aspect that is immediately apparent and noteworthy is the configuration of providers. While it may look perplexing, but its actually quite simple. The module takes into consideration your organizational structure or requirement of certain resources be in their respected accounts enabling you to deploy different services to different accounts. The module is impressive in its resourcefulness. For example enabling you to provision your lambda server functions within your private network for secure database connectivity. In addition to network, you have an option to configure the following:

• Route 53 (A and AAAA records)
• Server function (lambda) customizations
• CloudFront staging distributions
• WAF (Web Application Firewall)
• Warmer function
• Image Optimization function
• Tag to Path Mapping DB

There is one step before you can execute your terraform to provision infrastructure resources. If we look closely at module arguments you notice folder_path which is path to hidden directory named .open-next generated by OpenNext. To generate package for your application, run the following command:

npx open-next@latest build

The command automatically detects your Next.js application. Open-Next first builds your application running npm run build in the background. Upon successful build, open-next converts your built app into a package that can be deployed to AWS as lambda. Terraform module then takes .open-next directory and deploys it as part of your Lambda functions along with CloudFront, S3 and other resources. Now you can run your terraform configuration to provision your resources:

terraform init
terraform plan
terraform apply

Conclusion

In conclusion, transitioning from Vercel to AWS infrastructure with OpenNext and Terraform offers developers a robust solution for deploying Next.js applications with enhanced flexibility and control. While Vercel excels in frontend-focused deployments, its limitations in handling complex backend needs and scalability challenges necessitate exploring alternative approaches. OpenNext bridges this gap by providing a framework-agnostic serverless adapter tailored for Next.js applications, complemented by Terraform’s infrastructure-as-code capabilities. By leveraging these tools, developers can overcome the constraints of traditional hosting platforms, empower their projects with scalable backend functionalities, and seamlessly manage their infrastructure on AWS. With a deeper understanding of these technologies, developers are equipped to embark on their journey to deploy Next.js applications with confidence and efficiency.