Deploy a Next Js Application on Amazon Amplify Service

#javascript #nextjs #node #amplify

Introduction

Next.js is a flexible React framework that gives you building blocks to create fast web applications. Source — Next Js

Since this tutorial isn’t an introduction to Next js, i wouldn’t go into much details on Next Js. You can read more here.

I believe you already have some knowledge on Next Js, and you’re trying to deploy your application to Amazon Amplify.

Amplify

Frontend web and mobile developers can quickly create, launch, and host full-stack applications on AWS with the help of AWS Amplify. It’s a comprehensive solution that gives developers the freedom to take advantage of the breadth of AWS services as use cases change. Cloud knowledge is not required.

Prerequisite

Have a basic knowledge on Next Js, CLI and Git.
Have an AWS account. You can create an account here if you don’t have one.
Have Node and NPM installed. You can install from here.
Have Git installed on your computer.
Your prefered code editor.

Setup a basic Next Js Application

We need to have a next js application running.

First, let’s create a new next js application. Go over to the terminal and enter the commands below:

Note: I’m using Yarn package manager in this tutorial. You can subsitute it with pnpm or npx.

yarn create next-app

Enter your project name and follow the prompt. You have options to choose if you want to use TypeScript and EsLint with your application. After the installation is complete, run the command below to run the app on your local environment:

yarn run dev

Open up http://localhost:3000 to view your application in your browser.

You should see this screen below, if you’ve installed everything correctly:

Deploy to Github

On your terminal, add the following commands to push our sample code to the created repo:

git add remote origin <YOUR_GITHUB_URL_>
git remote set-url origin <YOUR_GITHUB_URL_>
git push origin main

Once you have pushed the code to your repo. Then we can proceed to deploying to amplify.

Amplify

In the search bar, search for Amplify and click on AWS Amplify.

You should see something like this in the next page:

Once you click on Get Started.

As i have explained initially, amplify really gives us awesome features to develop full stack apps. Especially developing a backend application for an existing app.

On the section below, there are two options, Amplify Studio **and **Amplify Hosting. We only need Amplify Hosting for this tutorial. We can use the Amplify Hosting to deploy React, Vue and Js apps. We’re deploying a Next js app, so we’re good to go.

Click on Get Started.

On the next page that shows, you should see a page like this:

Select Github to connect your repository to host your web app. As you can see, we have several other git repos, but for now, our focus is only Github.

Click on Continue.

On the next page, it’s asks you to login to you github account:

Select the existing repo in the dropdown. Then select the git branch you want to deploy from in the Branch dropdown. In our own case, we’ll select main.

Click on Next. You should see the next screen below:

Note: You can click on the advanced settings if you have a Dockerized application. Also, you can edit the build settings to suit your app needs.

Click on Next. On the next screen below, click on Save and deploy.

Now the app creation is in progress. You should see a screen like below:

On the next screen, you should wait patiently for your app to be deployed successfully. Once it’s deployed, you’ll see a screen like the one below — You can now click on the link to your app.

Kudos Ninja 👏🏻…We have successfully deployed our Next Js app to Amplify.

Now this is one of the most easiest thing Amplify has to offer. There are tons of other things you can do with Amplify like i’ve mentioned earlier. I’ll probably have some other tutorials on that soon.

Cheers! 🥷🏻