Serverless Components NextJs Deployment

This framework is compatible with Next10/11 version. I tried making this work with NextJs13+, and I failed. So feel free to try, however I am not sure if it’s compatible. Also node 17 & 18 might not work , so it is advised to use node16.

GitHub Repo : https://github.com/Viveksingh1313/nextjs-serverless-component

Check ReadMe file in the github repo on how to setup and run on local/AWS or continue on this blog to understand theoretical concepts with how to run the code.

serverless-component was introduced to provide a new low level API which nextJs projects can use to deploy onto AWS without the manual configurations needed to deploy lambdas, frontend and backend projects independently.

Remember — serverless framework, serverless-component(for nextJs), and serverless components GA are different.

Key Points about Serverless Components(NextJS)

Pages that need server side compute to render are hosted on Lambda@Edge.

All the endpoint calls are served from CloudFront edge locations using Lambda@Edge.

All the static pages including statically optimised pages compiled by NextJs are served from CloudFront Edge Locations.

Common image formats gif|jpe?g|jp2|tiff|png|webp|bmp|svg|ico under /public or /static folder have a 1 year cache control policy applied(max-age = 3153600)

Any of the assets in public or static folder are stored in S3 bucket and served from CloudFront edge locations with low latency and cost.

Lambda@Edge uses IAM role AWSLambdaBasicExecutionRole by default to put logs in CloudWatch.

default, api and image lambdas are independently deployed. API lambda comprises of all your endpoints. Default lambda is for your default endpoints provided by nextJs. Image lambda is for images.

By design, there is currently only one Lambda@Edge for all page routes and one Lambda@Edge for all API routes.

Serverless next.js is regionless. Serverless next js application will be deployed gloabally to every cloudfront edge location.

Serverless Components Architecture :

Soruce : https://www.serverless.com/plugins/serverless-nextjs-plugin

Serverless Components Framework uses 2 core concepts of AWS namely Lambda@Edge and CloudFront. CloudFront is used so that all the requests mainly static pages, images, videos, can be served with low latency using edge locations. Lambda@Edge is used for server side processing. All the API calls, request which need server side processing is deployed as a Lambda service. Lambda@Edge is used because it is regionless, and it is deployed across the global delivery network of AWS so that the requests processing can be done with low latency without the need to go to a particular region (like in case of Lambda which is deployed in a particular region).

About Lambda@Edge

Runs code without thinking about servers or clusters. Run code without provisioning or managing infrastructure. Lambda@Edge is a feature of CloudFront that lets you run code closer to users of application, which reduces latency and improves performance. Lambda@Edge is regionless, and you only pay for the time when your code runs.

About CloudFront

Amazon CloudFront is a low latency content delivery network which speeds up distribution of your static and dynamic web content, such as .html, .css, .php, image, and media files. When users request your content, CloudFront delivers it through a worldwide network of edge locations that provide low latency and high performance.

• If the content is already present in the edge location — CloudFront delivers it immediately with low latency
• If the content is not present in the edge location, CloudFront retrieves it from an origin that you’ve defined — such as an Amazon S3 bucket, a MediaPackage channel, or an HTTP server (for example, a web server) that you have identified as the source

Source : AWS docs

Code Practical Explained

Git : https://github.com/Viveksingh1313/nextjs-serverless-component

One of the main file for nextjs serverless deployment on AWS is serverless.yml file which is described below.

# serverless.yml
 
demo:
  component: "@sls-next/serverless-component@{version_here}" # it is recommended you pin the latest s

We define out application name as demo and serverless-component version as : @sls-next/serverless-component@{version_here}

It is advised to use 2.72.2 as the serverless-component version. Serverless framework itself will download the dependency from npm, so you don’t need to specify it on package.json file.

This is how you modify your nodeJs env :

# serverless.yml
myNextApplication:
  component: "@sls-next/serverless-component@{version_here}"
  inputs:
    runtime:
      defaultLambda: "nodejs14.x"
      apiLambda: "nodejs14.x"
      imageLambda: "nodejs14.x"

Change your timeout for lambdas :

# serverless.yml
 
myNextApplication:
  component: "@sls-next/serverless-component@{version_here}"
  inputs:
    timeout:
      defaultLambda: 20
      apiLambda: 15
      imageLambda: 15

To run the Github project — you can check Readme.md file in the Github repo.

Or follow this :

1. npm install
2. npm install -g serverless@2.72.2
3. Set your aws crednetials :

aws configure 
AWS Access Key ID [*************xxxx]: <Your AWS Access Key ID> 
AWS Secret Access Key [**************xxxx]: 
<Your AWS Secret Access Key> 
Default region name: [us-east-2]: us-east-2 
Default output format [None]: json

4. To run on local : npm run dev

5. To deploy on AWS :

serverless

demo:

appUrl: https://d14ez727nv5i3j.cloudfront.net
bucketName: kcz5psg-8lw281y
distributionId: E12EMW8XEGS2910

A similar kind of key/value will be generated like mentioned above. Use the appUrl to check if everything worked fine.

Screenshot for server running on cloudfront :

Server running on AWS using cloudfront

Directory Structure :

Screenshots from AWS after successful serverless deployment :

CloudFront resource

S3 bucket for static resources

Lambda@Edge zip (don’t mind the version of nodeJs — different from what is used in code)

Ending Notes :

I am active on Medium so please reach out to me in case you face any issues while running the application on local/server. Happy to help.
For any freelancing work or a healthy conversation — reach me out at
vivek.sinless@gmail.com or LinkedIn

References :

https://medium.com/mindful-engineering/today-we-will-learn-about-cloudfront-690bf3a8819a

Next JS Data Fetching: GetStaticProps vs GetServerSideProps

Serverless Next.js

Serverless Framework: Plugins

GitHub — serverless-nextjs/serverless-next.js: ⚡ Deploy your Next.js apps on AWS Lambda@Edge via…