Ship it, Next.js on AWS with Serverless Framework
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.
- Head over to the Serverless website and sign up for an account (I used github oauth).
- 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.
- Run
create-next-app
and select an application name - Change directories into the new app and run
touch serverless.yml
- 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: E1VPEOLCTW9OP6105s › 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-nextjs
held 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.