Ship it, Next.js on AWS with Serverless Framework

Richard Austin Melchior
elmmly
Published in
3 min readJun 2, 2021

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

First we need to install the Serverless framework, and hookup an account to the Serverless CLI.

  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

Let's dive into creating an AWS user with administrator privileges for the Serverless framework to use 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

To connect AWS to the Serverless CLI run the following command:

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

Now that all the boring configuration steps are finished, it’s time to get an app deployed. The following steps will outline how to deploy a freshly generated Next.js application using the Serverless framework.

  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

Well, that deployment sure was quick and easy! The creators of serverless-nextjsheld to their design principles of Zero configuration by default and Fast deployments. The ease of deployment with Serverless framework coupled with benefits of a serverless architecture, like inherent scalability, are huge selling points for further considering this approach. These tools have made it appealing for me to dive deeper into the world of serverless application development and deployment. I’m really looking forward learning more.

--

--

elmmly
elmmly

Published in elmmly

Delivering on big ideas is our craft.

Richard Austin Melchior
Richard Austin Melchior

Written by Richard Austin Melchior

Software Engineer at GoodRx | Software Engineering Consultant with Elmmly

No responses yet