In 5 steps host your NextJS 14 app on AWS Amplify and Integrate custom domain

You are a front-end engineer or someone who has never experienced the deployment or cloud. Now, you want to deploy your NextJS application on cloud. If you are looking to deploy your NextJS app on cloud without getting into the deep dive in cloud then AWS has a wonderful service for web and mobile developers – AWS amplify.

Amplify is a service designed to assist web and mobile developers in creating and deploying end-to-end apps. Amplify takes care of a lot of heavy lifting in the cloud backend, allowing users to focus on ‘doing more without delving too much into cloud or AWS’. It has simplified complex resource provisioning, deployment, environment creation, etc.

Features of Amplify:

1. Hosting dynamic web and mobile apps
2. API creation and hosting
3. Authentication management
4. Deployment via GitHub, etc
5. Metrics, logging, etc
6. Environment variables
7. Custom domain
8. Send notifications

In this blog, we will see how we can host a NextJS app from GitHub to Amplify and map a custom domain too in just 5 steps.

If you want to watch a video of the blog check here

In this blog, I will take you step by step to show how you can host your NextJS app on AWS using Amplify service.

Make sure you have your NextJS code hosted on GitHub (private or public , both is fine).

1. NextJS code hosted in a GitHub account (private or public repo , both will work)

2. Working AWS account

3. Domain name from any vendor

4. Domain setup at Route53

We will connect our code hosted in GitHub to Amplify. Whenever we will do any change in our code, push to our repo, and merge the code the deployment will happen automatically.

Step 0: Prepare your GitHub

Push your NextJS code to your GitHub. The repo could be public, or private. Amplify support monorepo too.

Step 1: Log in to your AWS Account

You should have a working AWS account. Log in to your account and go to the AWS amplify services ( search on the AWS search bar). You can change the region from the right-top corner. Make sure you to take a note of the region you are going to host your app.

Step 2: Host Web App

Your landing page will look different from the screenshot below (so, ignore), but on the right side, you will see an orange button – ‘New App.’ Click on that and select ‘Host Web App‘.

Step 3: Connect your Github

We will be connecting GitHub and deploying our repo for this demo. But we do have a lot of different options to pick our existing code from BitBucket, GitLab etc.

Choose the GitHub option.

To connect your GitHub to AWS. If you are connecting GitHub and AWS Amplify for the first-time, you need to give permission from GitHub to allow AWS Amplify ( all you need to do is just follow the screen).

Once AWS has the permission of GitHub, now click the “Continue” button.

Select the repo and branch you want to deploy to Amplify, and click on “Continue” button

Step 4: Build Settings & role

Once repo and branch is selected, AWS needs more information to create the build , test and setup the environment. You will see a screen like below. Please be aware that the build settings could be different based on the framework or language we are using in our code. If you are on NextJS then it would be same like the screenshot shown below.

We don’t need to do any changes here but its good to understand the fields here:

App Name: This name will reflect on the Amplify’s dashboard

Build and Test settings: This is the config file consist of the dependencies, build environments, instructions for creation of build, and test environment, etc. We can download this YML script and keep it in our local code.

IAM roles: This to allow the Amplify to do cross service access.

Now, click on “review and deploy“.

Now, just wait for the deployment to happen. It will just take a few minutes. Once the deployment will be successful you will see a screen with the URL.

If any of the steps are unsuccessful, you will see a screen like this with red indicating the step that failed. To debug we need to access the logs to identify the issues and try to fix it.

Common Errors:

I have covered these in the video.Do check here

1. Machine selection

This is the error I got stuck too. For new NextJS version we need to change the build settings and select the image “AWS Linux 2023”.

You can go to build settings from the left hand side navigation, Click on Edit, and select the image

2. Deployment errors

Remember there could be deployment or build issues if your local dependencies versions are different from what is required at the AWS build image. Eg: NodeJS version might be require at AWS build could be different (greater) from what you are using at local environment

Step 5: Domain setup

To setup your domain with the hosted app, you need to setup Route53. In AWS, go to Route53 and update the domain records there. Check video here to see how to setup Route53

Now, back to AWS Amplify page , select your project you hosted previously. Once you are in the project from left navigation click on domain management, and select “Add Domain” .

If your Route53 is successfully configured then in the drop down you will see your domain. Select from drop down and click on “Configure Domain” and click on “Add domain”

You will get the CNAME and just copy and use them in your domain settings. Amplify will do following for you:

• SSL Creation
• SSL Configuration
• SSL verification
• Domain Activation

Now, wait for a few hours and your domain would be ready and you will be able to access your hosted project.

Say Hi to me on Twitter and LinkedIn

Happy Learning!!