Deploy Next.js app with SSR using AWS Lambda

There are many ways to deploy Next.js app to the production environment. In AWS we can use EC2, Amplify, S3 Buckets, etc. We need to choose the right deployment process based on the web app.

Here we will see the process of Next.js app deployment using AWS Lambda and S3. It has good scalability and is a cost-saving approach in serverless architecture. Let us have some details about the role of Lambda and S3.

AWS Lambda —
In this deployment, AWS Lambda is responsible for creating SSR pages dynamically by processing server-side props of the next.js app.

S3 Bucket —
We will use the S3 bucket to serve all static content of the website like JS, CSS, Media, etc. AWS Lambda has a limit for its size, so we can not put large static files there.

Let's start step by step process to deploy your Next.js app using this process. We will use an AWS Lambda Web Adapter to convert and process the HTTP request received on the lambda function and transfer it to our next.js app.
https://github.com/awslabs/aws-lambda-web-adapter

The basic structure of this process is as below.

1. Build your app in a standalone format.
   Here are some configuration updates for your next.config.js

Here output format is standalone so it will create the standalone app in the build process to deploy anywhere using node. Now you will see a standalone folder inside .next after the build finishes.
Here assetPrefix is used to point all static files to S3 bucket.

Now run next.js build command.

npm run build

It will produce .next folder with the output below —

2. Deploy static contents on S3 Bucket
Copy static foder form .next to your s3 bucket inside ${BUILD_VERSION}/_next/
Now all your static files should be accessible using bucket url like:
https://${s3Bucket}.s3.${awsRegion}.amazonaws.com/${buildVersion}/_next/static/media/51ed15f9841b9f9d-s.woff2

3. Deploy the standalone app to AWS Lambda
Create AWS Lambda function for app deployment.
https://ap-south-1.console.aws.amazon.com/lambda/home?region=ap-south-1#/create/function
Provide the function name and in Advance Setting Check “Enable Function URL”

Add AWS Lambda Web Adapter to our lambda function by using “Add a layer” option.

Select “Specify an ARN” and fill:
arn:aws:lambda:${AWS::Region}:753240598075:layer:LambdaAdapterLayerX86:22
update aws region in the above ARN.

Now AWS Lambda Web Adapter is ready to use. Now update “Runtime settings” handler. Set handler as server.sh.

Before deploying the standalone folder to AWS Lambda we need to create the server.sh file inside the standalone directory and put the execution entry code.

#!/bin/bash
# Execute server.js for SSR pages
exec node server.js

Now copy the public folder from the root of your next.js app into .next/standalone for server public content on SSR.

cp -r public/. .next/standalone/public

Here your standalone app is ready to deploy on AWS lambda, create a zip of contents inside the standalone.

cd .next/standalone
zip -r deploy.zip .

Now upload deploy.zip file in AWS Lambda function.

In the last, we need to set up environment variables that are used in our app. To run the application we need to set up two environment variables initially.

AWS_LAMBDA_EXEC_WRAPPER = /opt/bootstrap
PORT = 8000

Our deployment is finished here, you can test now using the Function URL.

You can see logs in Monitor -> View Cloud Logs to see SSR logs.

The Next.js app is ready to use. To deploy your app just need to set the Function URL to Cloudfront Origin.

Conclusion

Here I was implying the Next.js app deployment that is easy to maintain, watch, and scale. After setting up this infrastructure it is easy to create a CI/CD pipeline using any CI/CD tool.