How to deploy next.js 9 to aws lambda

Question

I am developing a project with next.js9. I have some problems and questions. I would like to deploy my next.js 9 project to AWS lambda.

1. official next.js 9 doc tell me "each page in the pages directory becomes a serverless lambda." Above library is not working like doc. How can I deploy from each page to each lambda?

2. What is reasonable solution to deployment? please someone who use nextjs 9 in production level help me.

3. I am using this library https://github.com/danielcondemarin/serverless-next.js. it's working well. but all options are fixed. I would like to deploy my project to Tokyo region. but I have no idea how to change region. always deploy to N. virginia region. I already checked doc but I think they don't have options. and test like this yml file.

serverless.yml

myNextApplication:
  component: serverless-next.js
region: ap-northeast-1

but it was not working. if someone know how to change region with serverless-next.js. Please help me.

Thank you in advance

Answer 1

Deploying Next.js to AWS Lambda needs a layer of abstraction because Next.js is designed to work as a Node.js server in the first place.

Vercel does this with a thing called now-node-bridge which basically starts a local Node.js http-server inside the Lambda function and then create a request from the Lambda invoke event.

Here is a simplified flow chart what happens when you run a request against a Next.js app that is deployed on Vercel:

While Next.js is Open Source the proxy that does the conversion from HTTP Requests to Lambda Events at Vercel is not. That is the reason why a serverless deployment to AWS is still a tricky task while Vercel internally also uses AWS Lambda for their deployments.

Deployment to AWS Lambda

While the Serverless framework still might be the most popular choice at the moment, I created a simple to use Terraform module for this task. Terraform is an Open Source CLI application for managing Cloud-Resources in providers like AWS.

With Terraform installed it is as simple as this:

1. Go to your Next.js app and install this helper:

   npm i -D tf-next     # npm or
   yarn add -D tf-next  # yarn
   

2. Add the following script tf-next to your package.json of your Next.js app:

   {
     ...
     "scripts": {
       "dev": "next",
       "build": "next build",
       "start": "next start",
   +   "tf-next": "tf-next build"
      }
   }
   ...
   

3. Create a new main.tf with the following content right next to your package.json:

   # main.tf
   
   terraform {
     required_providers {
       aws = {
         source  = "hashicorp/aws"
         version = "~> 3.0"
       }
     }
   }
   
   # Main region where the resources should be created in
   provider "aws" {
     region = "us-east-1"
   }
   
   module "tf_next" {
     source  = "dealmore/next-js/aws"
   }
   

4. Create an AWS Access Key and expose it in the terminal:

   export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
   export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
   

5. Build the app and deploy it to AWS with terraform:

    terraform init    # Only needed on the first time running Terraform
   
    yarn tf-next      # Build the next.js app
    terraform plan    # See what resources Terraform will create
    terraform apply   # Deploy the App to your AWS account
   

You can change the region in the main.tf to any AWS region that supports Lambdas and the region that you define there is the region where your Lambdas are deployed to.

For more information please see the GitHub Page: AWS Next.js Terraform module on GitHub

Answer 2

There is a webpack plugin, that can help next-aws-lambda-webpack-plugin.

1. This plugin generate for each page a directory with the serverless code of the Next.JS
2. This plugin do not use Serverless framwork so you can use native AWS deployment solution for your infrastructure like : AWS SAM ou AWS cloudformation for your deployment and benefit from AWS support.
3. With AWS native solution deployment you are free to choose any wanted region.

Answer 3

this plugin you're using for deployment is using lambda@edge and this operates region-less:

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html

Lambda@Edge is an extension of AWS Lambda, a compute service that lets you execute functions that customize the content that CloudFront delivers. You can author Node.js or Python functions in one Region, US-East-1 (N. Virginia), and then execute them in AWS locations globally that are closer to the viewer, without provisioning or managing servers. Lambda@Edge scales automatically, from a few requests per day to thousands per second.

If you like to have more flexibility in you serverless deployment, use the webpack plugin that is mentioned here in the thread:

https://github.com/vincent-herlemont/next-aws-lambda-webpack-plugin

Together with the serverless framework you can define manually, for every NextJs page, a lambda function (not Lambda@Edge) and deploy it to you AWS account in your region.