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 \
4. Create an access key for the user:
aws iam create-access-key
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.
create-next-appand select an application name
- Change directories into the new app and run
- Add the following code into the
4. Run the
serverless command to deploy the application
The resulting output should look something like this:
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.
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.