How to Deploy a Next.js 13 App to AWS with Amplify Hosting
Tags: nextjs, javascript, aws, tutorial
Published: 2023-05-04 07:14:00

# Introduction

[AWS Amplify Hosting](https://aws.amazon.com/amplify/hosting/) - the ultimate solution for fast, secure, and scalable web app deployment. Whether you're building a static or server-side rendered app, a mobile app landing page, or a web app, Amplify Hosting's fully managed Continuous Integration and Continuous Deployment (CI/CD) service has everything you need.
You can quickly deploy web content with support for modern web frameworks like React, Angular, Vue, Next.js, Gatsby, Hugo, Jekyll, and more.

AWS Amplify Hosting now supports Next.js 12 and 13, enabling your app to leverage Next.js features like server-side rendering, API routes, middleware, incremental static regeneration, and image optimization.

With faster builds, seamless integration with Amplify back-ends, and fully managed-to-host infrastructure, Amplify Hosting takes your Next.js apps to the next level.

In this tutorial, you will learn how to create and deploy your Next.js app to AWS with Amplify Hosting and experience firsthand benefits.

# Prerequisites

To follow along, you will need the following:


- [AWS account created](https://portal.aws.amazon.com/billing/signup?refid=99f831a2-d162-429a-9a77-a89f6b3bd6cd&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email)
- Basic knowledge of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and working in the terminal, and using Git.
- [Next.js 13](https://nextjs.org/docs) installed
- [Node.js](https://nodejs.org/en/) ( v16+) installed

# Create a Next.js app

Let’s get started by bootstrapping a Nextjs project using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).

On your terminal, create a new project by running


  ```javaScript

    npx create-next-app@latest my-next-amplify-app
    
    cd my-next-amplify-app
  ```
    

In this tutorial, you will create two pages demonstrating **static site generation** **(SSG)** and **server-side rendering (SSR)**.

In your editor, replace the contents of the `pages/index.js` file with the code below. The change creates a static page that displays the last time the page was updated.


  ```javascript

    export default function About({ formattedDate }) {
      return (
        <>
          <h1>About page</h1>
          <p>This is the about page. It was last updated on {formattedDate}.</p>
          <p>
            <a href="/products">View a server-side rendered page.</a>
          </p>
        </>
      );
    }
    
    export async function getStaticProps() {
      const lastUpdateDate = new Date(2022, 9, 1); // Set the last update date
      const formattedDate = new Intl.DateTimeFormat("en-US", {
        dateStyle: "long",
        timeStyle: "long",
      }).format(lastUpdateDate);
    
      return { props: { formattedDate } };
    }  
```
Now create a new `pages/products.js` file containing the code below.

```javascript
    // pages/products.js
    export default function Products({ productList }) {
        return (
            <>
                <h1>Our Products</h1>
                <ul>
                    {productList.map((product) => (
                        <li key={product.id}>
                            {product.name} - ${product.price}
                        </li>
                    ))}
                </ul>
                <p>
                    <a href="/">View our home page.</a>
                </p>
            </>
        );
    }
    
    export async function getServerSideProps() {
        const productList = [
            { id: 1, name: "Product 1", price: 10 },
            { id: 2, name: "Product 2", price: 20 },
            { id: 3, name: "Product 3", price: 30 },
        ];
        return { props: { productList } };
    } 
```
The code creates a **Products** page that displays a list of products and their prices. The products are hardcoded as an array of objects in the `getServerSideProps` function. The page also includes a link back to the home page. The `getServerSideProps` function is used to generate the props for the page.


> Before starting the section below, Ensure you have created and pushed your code to GitHub or your preferred Git provider.

# Deploy to Amplify Hosting

Once you have pushed your application to a Git provider, you can deploy it to Amplify Hosting.

In [AWS Amplify Hosting](https://aws.amazon.com/amplify/hosting/), click the Host web app button, which takes you to the corresponding page.


![Select Git provider](https://res.cloudinary.com/practicaldev/image/fetch/s--caWP1RWS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pafe981aj8pqx1nmjmx9.png)


Choose your Git provider (in this case, Github) and click on the "Connect branch" button. Make sure to authorize and install AWS Amplify to access your repositories.


![Add repository](https://paper-attachments.dropboxusercontent.com/s_5596019094E418DD337460BEF17A4E4817EEE0B9775BA2E6D9247415BEF27E98_1681513627644_Screenshot+2023-04-15+at+00.05.42.png)


After clicking the **Next** button, you will be redirected to a page where you can configure your build settings.


![Build settings page](https://paper-attachments.dropboxusercontent.com/s_5596019094E418DD337460BEF17A4E4817EEE0B9775BA2E6D9247415BEF27E98_1681514206099_recentupdate.png)


Click on Next. On the **Review** page, select **Save and deploy**.


![](https://paper-attachments.dropboxusercontent.com/s_5596019094E418DD337460BEF17A4E4817EEE0B9775BA2E6D9247415BEF27E98_1681514785581_Screenshot+2023-04-15+at+00.25.23.png)


Your app will be created and you will be taken to the app’s page in the Amplify Console.
Amplify Hosting will set up a separate hosting and build environment for your project and deploy it. This process generally takes 2-3 minutes, and you can keep track of the progress by selecting the **Provision**, **Build**, or **Deploy** links as illustrated below.


![Build process](https://paper-attachments.dropboxusercontent.com/s_5596019094E418DD337460BEF17A4E4817EEE0B9775BA2E6D9247415BEF27E98_1681515052552_Screenshot+2023-04-15+at+00.30.40.png)


After the deployment phase is marked complete, you can now view your app.


![Deployed](https://paper-attachments.dropboxusercontent.com/s_5596019094E418DD337460BEF17A4E4817EEE0B9775BA2E6D9247415BEF27E98_1681515202103_Screenshot+2023-04-15+at+00.33.13.png)


Now, you can click on the deployed app link and check if all the features are working correctly.


# Conclusion

Now, you’ve successfully deployed a Next.js 13 application to Amplify Hosting. Amplify Hosting offers various features, such as [custom domain names](https://docs.aws.amazon.com/amplify/latest/userguide/custom-domains.html), and [web previews for pull requests](https://docs.aws.amazon.com/amplify/latest/userguide/pr-previews.html) and [feature branches](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html), that you can explore and utilize for your project's success. For more information, please visit [docs.aws.amazon.com](https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html).

# Resources and References
- [Deploy a Next.js 13 app to AWS with Amplify Hosting](https://aws.amazon.com/blogs/mobile/amplify-next-js-13/)
- [How to Deploy a Next.js 13 Site with AWS Amplify](https://dev.to/codebeast/deploying-nextjs-13-features-with-amplify-hosting-595i)