Ship it, Next.js on AWS with Serverless Framework

Richard Austin Melchior
Jun 2 · 3 min read

With the growing appeal and adoption of serverless architectures let’s consider how to take a newly built Next.js application and ship it onto an AWS serverless stack using the Serverless framework.

I’ve spent a significant amount of time with Next.js lately. Vercel, the creators of Next.js call it the React framework for production. The intention of this framework is to provide a system that can be used to quickly create applications that are production-ready. Some of the highlights include pre-rendering, server-side rendering, and support for serverless hosting. If you haven’t looked into Next.js you can read more about it in this article where I discuss some of the key features of Next.js: Ramping-up with Next.js.

While looking into the serverless deployment process for a Next.js application I continually came across a method of deployment using a framework called Serverless Framework. The homepage of their site boasts “zero-friction serverless development” which is exactly what I was looking for to dip my toes in the water. Let’s take a look at the process for deploying a new application to a serverless environment!

Installing and configuring Serverless

  1. Head over to the Serverless website and sign up for an account (I used github oauth).
  2. Download the Serverless cli by running npm install -g serverless

3. Login to your Serverless CLI by running serverless login and filling in your account credentials

Preparing AWS credentials for deployment

1. Create a new user for the Serverless framework:

aws iam create-user --user-name serverless-admin

3. Attach a user-policy to assign the user administrator privileges:

aws iam attach-user-policy \
--policy-arn arn:aws:iam::aws:policy/AdministratorAccess \
--user-name serverless-admin

4. Create an access key for the user:

aws iam create-access-key
--user-name serverless-admin

5. Take note of the Access key ID and Secret access key as they will be used in the next step

Keep in mind, this user configuration gives Serverless complete admin access to your AWS account. You can manage the access for the service more directly but for the purposes of this guide we will use admin privileges. For more information about what AWS permissions are required for the serverless-nextjs component check out this github repo: serverless-nextjs.

Connecting AWS to your Serverless CLI

serverless config credentials --provider aws --key <AWS Access Key ID> --secret <AWS Secret Access Key>

Make sure to replace the AWS Access Key ID and AWS Secret Access Key fields with the keys generated in the last step.

Deploying an application

  1. Run create-next-app and select an application name
  2. Change directories into the new app and run touch serverless.yml
  3. Add the following code into the serverless.yml file:

4. Run the serverless command to deploy the application

The resulting output should look something like this:

newApplicationName: 
appUrl: https://doyljxklyolbt.cloudfront.net
bucketName: 0gint2b-z80aaug
distributionId: E1VPEOLCTW9OP6
105s › newApplicationName › done

You can access your newly deployed serverless Next.js application by navigating to the appUrl that is provided to you. There are many configuration options for the deployment of the application including setting domain address of the app. These configuration options are discussed at length in the serverless-nextjs component README.

Conclusion

elmmly

Delivering on big ideas is our craft.