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 basic knowledge of 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 it from here.
Have Git installed on your computer.
Your preferred 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 the Yarn package manager in this tutorial. You can substitute 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 uphttp://localhost:3000 to view your application in your browser.
You should see this screen below, if you’ve installed everything correctly:
Deploy to Github
Sign in to your GitHub account and create an empty repository.
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
Sign in to your AWS account.
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 gives us awesome features to develop full-stack apps. Especially developing a backend application for an existing app.
In the section below, there are two options, Amplify Studio and Amplify Hosting. We only need Amplify Hosting for this tutorial. We can use 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 on Github.
Click on Continue*.*
On the next page, it asks you to log in 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 case, we’ll select the 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 things Amplify has to offer. There are tons of other things you can do with Amplify as I’ve mentioned earlier. I’ll probably have some other tutorials on that soon.
Cheers! 🥷🏻
#nextjs #nodejs #amplify #javascript #github