How to Deploy a Next.js app on a Kubernetes Cluster on AWS
Tags: kubernetes, aws, microtica, nextjs
Published: 2022-11-04 11:13:24

Next.js is an open-source, React framework, that helps developers build web applications, with all the features you need for production - hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
In this article we’ll deploy a Next.js application on a Kubernetes cluster on AWS, using Microtica’s production-ready templates:

- Amazon EKS
- Next.js 

This will setup a production-ready solution in less than 20 minutes.

## One-click Deploy
Click Deploy with Microtica below and follow the template steps to deploy your Next.js application on your AWS account.


[![One click deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqn8q1x14qe2r8hngnoj.png)](https://app.microtica.com/templates/new?template=https://raw.githubusercontent.com/microtica/templates/master/nextjs/.microtica/template.yaml&utm_source=devto&utm_medium=one_click_deploy_button&utm_campaign=nextjs)

## Prerequisites
﻿

- A Microtica account. You can create an account by signing up with your email or with your Git account.

- An AWS account. Here you can sign up for an AWS account.

## 1. Create Git Repository
After signup, click the **_Deploy app_** button to navigate to the Templates page, where you can see a list of Microtica’s production ready templates. There find the Next.js template and select it. On the Next.js template page, on the left side, you can see a link to the source code of this template. It will redirect you to Microtica's GitHub account to learn more about it.
As a first step, you need to connect a Git account (GitHub, Bitbucket, GitLab, or CodeCommit). Microtica defines a repository name by default for each template, but you can change it. If you already have a Git account connected to Microtica, you can choose it from the list. We will create a new repository on your account with the provided name, and every Git push will be deployed automatically in Microtica.

![Create git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7s0x3vjcry0vxnoq5vx.png)

Follow this guide on [How to import your existing application](https://docs.microtica.com/import-an-existing-nodejs-application?utm_source=devto&utm_medium=blog&utm_campaign=nextjs+on+aws) in Microtica, if you already have a Node.js application source code.

## 2. Configure Template
After creating your repository, you need to enter a name for the application, to be able to distinguish it from other apps in the Applications tab.

![Configure template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6pkhdva7umnaqv4ehim.png)

You can customize this template to meet your requirements with environment variables. You can update the configuration later in App Settings.

## 3. Select a cluster
The next step is choosing the Kubernetes cluster where your application will deploy. To deploy on your AWS account, you can create an AWS managed-Kubernetes (EKS) cluster on the spot, by clicking on the _**Create Amazon EKS Cluster**_ button.

![Choose where to deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otluiku2bf3r492zn2n5.png)

This is the recommended option for production applications, as it gives you full ownership of your cloud infrastructure and applications.

![Create Amazon EKS Cluster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js19uql87081cqgcf6nj.png)

This action will open the popup shown in the image above. You can select the environment in which you’d want this cluster to be deployed. If you don’t have an existing environment, you can create one by selecting the **_Create Environment_** action from the dropdown menu.

Once you select an environment, the next step is to select an AWS account and region where the EKS cluster will be deployed. If you don’t have a connected AWS account, you can connect one right here by clicking the **_Connect AWS Account_** button. This will initiate a CloudFormation stack that will give Microtica permissions to provision infrastructure on your AWS account. Once you create the stack, the connection will be established automatically and you’ll be able to see the AWS account in the dropdown list of accounts.

Select the account, select a region, and then click on **_Continue_** to move to the deployment of your environment.

Deploying a new Kubernetes cluster on your AWS account could take up to 15 mins.

## 4. Deploy the template to your cluster
Once you’re done with the cluster selection, you will see a summary of all the previous steps and what will be deployed with this template.

![Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmq3vn44b7y3xvqi5zrq.png)

You can go ahead and trigger a deployment of the environment by clicking on the **_Deploy_** button.

It takes approximately 15–20 mins for this application to be deployed on the cloud, together with a new EKS cluster.

In the meantime, you can follow the detailed deployment logs by clicking the **_View deployment_** button.

![Deployment logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tff2fhis91qvbfvkere.png)

When the EKS cluster deployment is finished, click the **_View logs_** button to follow the application deployment.

![View logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4xnm4mo35dca7bbrkv7.png)

## 5. Access the application
When the deployment is finished, you will see a View Application button, that leads you to the app Overview tab.

![Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lazk8m4xsthod5bglx91.png)

Since you deployed on your EKS cluster on AWS, you need to [expose your application to the internet](https://docs.microtica.com/expose-apps-on-the-internet?utm_source=devto&utm_medium=blog&utm_campaign=nextjs+on+aws), so follow this guide to enable external access to your apps.

For even more information, you can also look at the Deployments and Monitoring tabs, where you have the pipeline history, resource consumption metrics, and logs for your instances.

To learn more about how to scale your Next.js application in Microtica, read the following article about [Scaling Applications](https://docs.microtica.com/scaling-applications-in-microtica?utm_source=devto&utm_medium=blog&utm_campaign=nextjs+on+aws) in Microtica.

## Bonus: Cleanup
To undeploy your application in Microtica, navigate to the app, in _App Settings → Danger Zone_, and delete the application. 

To remove all the resources created on your AWS account, navigate to your _environment (demo in our example) → Environment Settings → Infrastructure_, and you’ll see the Undeploy section. 

This will clean up the resources created in AWS, but you will still have the configuration in Microtica in case you want to deploy it in the cloud again.