Using Git to deploy a Next app to AWS Amplify Hosting

Nader Dabit: [0:00] To get started, create a new Next app by running npm init next-app. Here, give the project a name and choose the Default starter app. Next, change into the directory and open the app in your text editor.

[0:15] Open package.json and add next export to the existing build script. Next export allows you to export your app to static HTML which can then be run standalone without the need of a Node.js server.

[0:29] Next, we'll go to GitHub and create a new Git repository for our app. Once the repo has been created, copy the URI of the repo onto your clipboard. Back at the command line, we'll initialize a new Git repository by running git init. Next, we'll set the origin by pasting in the URI of the repo we just created.

[1:00] Now, we'll add and commit the files within our project. We'll update our repo by running git push origin master. Next, open the AWS Console at console.aws.amazon.com. Here, search for AWS Amplify.

[1:28] In the Amplify Console, click Connect App. Here, choose GitHub and click continue. Once you've authenticated, you should see a list of all of your repositories. Here I'll choose the new repository that I just created.

[1:45] Next, we'll choose the master branch. Next, we'll update the baseDirectory which is the output directory when a new build is run. We'll set this to out and then click Save. Click Next and then click Save and deploy. Once the build is complete, you should be able to click on the URL to view your app.

[2:21] Next, let's make an update and kick off a new build. To do so, open your text editor and then open index.js. Here, we'll add a V2 to our title and save the file.

[2:36] Back at the command line, we'll add our files, commit the changes and push the updates to Git. Back in the Amplify Console, you should see that a new build has been kicked off. When we open our app, we should see that V2 has been deployed.