⚡️ 5 Minute Tutorial: Deploying a NextJS app with AWS Amplify Hosting
Tags: serverless, jamstack, nextjs, awsamplify
Published: 2020-05-05 16:20:01

---
title: ⚡️ 5 Minute Tutorial: Deploying a NextJS app with AWS Amplify Hosting
published: true
description: How to deploy a Next app to AWS with Amplify Hosting
tags: serverless, jamstack, nextjs, awsamplify
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jggzfg23o5rqrcqz9qg1.jpg
---

> Cover image by [Lubo Minar](https://unsplash.com/@bubo)

In this tutorial you'll learn how to deploy a [Next](https://nextjs.org/) app to AWS using [Amplify](https://docs.amplify.aws/) Hosting.

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

1. [CLI workflow](#cli-workflow)
2. [Git-based workflow](#gitbased-deployments)

## CLI workflow

To get started, create a new Next site:

```sh
$ 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:

```json
"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:

```sh
$ npm install -g @aws-amplify/cli

$ amplify configure
```

> To see a video walkthrough of how to configure the CLI, click [here](https://www.youtube.com/watch?v=fWbM5DLh25U).

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

```sh
$ 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:

```sh
$ amplify add hosting

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

Next, deploy the app:

```sh
$ 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.

![](https://dev-to-uploads.s3.amazonaws.com/i/bc06wo8unppp7am869ra.png)

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

```sh
$ amplify console
```

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

{% youtube 7VDdgKXAAP0 %}

### Deploying updates

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

```sh
$ amplify publish
```

### Deleting the app

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

```sh
$ 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

```sh
$ 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:

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

__3.__ Create a Git repository, then push your code to Git.

```sh
$ 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](https://console.aws.amazon.com/amplify) 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](https://dev-to-uploads.s3.amazonaws.com/i/edt8ccos33addseu2c06.png)

__7.__ Click __Next__ then __Save and deploy__.

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

{% youtube g-63px0PtTg %}

### 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

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

## Dynamic routes

Next also supports dynamic routes.

Let's say you have a folder and file structure that looks like this:

```
/pages/posts/[id].js
```

This component needs to read the ID of the URL parameter and use this data in some way in the app. To make this happen, we can use `next/router`:

```javascript
// /pages/posts/[id].js
import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post
```

To enable this, you need to set up a rewrite for __/pages/posts/[id].html__ in the __Rewrites and redirects__ section of the Amplify Console:

![Dynamic Routes with Amplify Console hosting](https://dev-to-uploads.s3.amazonaws.com/i/7owuue5k9akwp0kogd29.png)

## API routes

At this time, Amplify hosting does not support API routes with NextJS.

If you are interested in this functionality, I would recommend instead checking out [Vercel](https://vercel.com/) or the [Serverless NextJS Component](https://github.com/serverless-nextjs/serverless-next.js#readme).