loading...
Cover image for ⚡️ 5 Minute Tutorial: Deploying a Next app with AWS Amplify Hosting

⚡️ 5 Minute Tutorial: Deploying a Next app with AWS Amplify Hosting

dabit3 profile image Nader Dabit ・3 min read

Cover image by Lubo Minar

In this tutorial you'll learn how to deploy a Next app to AWS using Amplify Hosting.

There are two options: One using the Amplify CLI, and the other using a Git repository. We will cover both.

  1. CLI workflow
  2. Git-based workflow

CLI workflow

To get started, create a new Next site:

$ npm init next-app

✔ What is your project named? my-app
✔ Pick a template › Default starter app

Next, change into the new directory and update package.json to add the export script to the existing build script:

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

Adding Amplify hosting

If you haven't already, install and configure the latest version of the Amplify CLI:

$ npm install -g @aws-amplify/cli

$ amplify configure

To see a video walkthrough of how to configure the CLI, click here.

Next, initialize a new Amplify project. Make sure you se the Distribution Directory Path to out.

$ amplify init

? Enter a name for the project: mynextapp
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code (or your preferred editor)
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: out
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use: <your profile>

Now, add hosing with the Amplify add command:

$ amplify add hosting

? Select the plugin module to execute: Hosting with Amplify Console
? Choose a type: Manual deployment

Next, deploy the app:

$ amplify publish

? Are you sure you want to continue? Yes

⚡️ Congratulations, your app has now been successfully deployed! The URL for the app should be displayed in your terminal.

To see your app in the Amplify console at any time, run the following command:

$ amplify console

For a complete walkthrough of how to do this, check out this video:

Deploying updates

Once you make changes to your app and are ready to deploy them, you can run the publish command again:

$ amplify publish

Deleting the app

To delete the app and the deployment, run the delete command:

$ amplify delete

Git-based deployments

Amplify also offers Git-based deployments with features like CI/CD and branch previews.

To host using a Git-based deployment, follow these steps instead.

1. Create your app

$ npm init next-app

✔ What is your project named? my-app
✔ Pick a template › Default starter app

2. Be sure to set the new build script in your package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

3. Create a Git repository, then push your code to Git.

$ git init
$ git remote add origin git@github.com:your-name/my-next-app.git
$ git add .
$ git commit -m 'initial commit'
$ git push origin master

4. Go to the Amplify Console and click "Connect App"

5. Follow the steps to choose your Git provider and your branch.

6. Set the baseDirectory to out.

Setting the baseDirectory property

7. Click Next then Save and deploy.

For a complete walkthrough of how to do this, check out this video:

Kicking off a new build

You can kick off a new build directly from the Amplify console or by pushing changes to master.

  1. Make some changes to your code

  2. Push the changes to git

$ git add .
$ git commit -m 'updates'
$ git push origin master

Dynamic server-rendered routes

In this tutorial you learned how to deploy a static Next site using Amplify Hosting.

Next also supports pre-rendering for dynamic server-rendered routes. At this time, Amplify does not support the hosting of dynamic server-rendered routes with Next. If you are interested in this functionality, I would recommend instead checking out Vercel.

Posted on May 5 by:

dabit3 profile

Nader Dabit

@dabit3

Web and mobile developer specializing in cross-platform & cloud-enabled application development.

Discussion

markdown guide
 

Hey Nader, this is a great post! Could you please do something similar for React Native? Currently, I am using Expo and Amplify (App sync, lambda, Cognito) for development. There isn't great documentation that I could find for the deployment of these apps to the app store/play store and how to maintain and update over time. Could you please do something similar for RN, that would be really really helpful.

Also, slightly relevant question: is hosting category useful for React native development? Also, how can I set up my Frontend and Backend on Amplify for RN?

Thank you

 

Thank you for your post

 

This so Cool. Can we deploy Next apps with SSR enabled to amplify? @dabit3

 

Not yet, but we are working on supporting hosting SSR support.