Deploying a Next.js app with AWS Amplify

botdev_

Ely Alamillo

Posted on May 21, 2021

Deploying a Next.js app with AWS Amplify

This week AWS amplify announced support for deploying Next.js SSR apps, which has been a long awaited feature. You can read the announcement here.

Next app

For the purposes of this guide we will deploy the basic app scaffold provided by create-next-app

Deployment

Since we will be using Amplify, we first need to go through the installation and setup process. We can figure out how to do that by following the official docs.

Creating an Amplify Project

Once we have Amplify configured we can go ahead and create a project. We can achieve that by running amplify init

Domain List
We will need to create a name for our project and a profile to use and amplify will spin up all the resources we will need.

Zero config deploy

Amplify provides a zero config deploy similar to vercel, which allows us to connect a git provider to use for our deployments. To get started we can go the the Amplify console and select Host web app.

Host web app

Select git provider

We can now select our preferred git provider such as Github for this example.
Select a git provider

Add repo branch

After selecting our desired git provider we can select which branch we would like to deploy from.
Select repo branch to deploy from

Configure build settings

After selecting a branch we can now configure our build settings, for the most part we won't need to modify this config as Amplify will take care of that for us.
Configure build setting for deployment

Review

Now we can review everything looks correct before triggering a deploy.
Review configuration

Verify deployment

Finally we can see the deployment starting and in a few minutes our site will be live!
Verify deployment

Conclusion

Thanks to Amplify we can now deploy Next.js SSR app on AWS with a relatively low effort. Let me know what you think about this new feature!

💖 💪 🙅 🚩
botdev_
Ely Alamillo

Posted on May 21, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related