# Deploy Next.js on AWS Amplify: A Step-by-Step Guide

## **Step 1: Accessing the AWS Amplify Console**

Our journey begins in the AWS Management Console. To start, first **choose a Region.** This is an important decision as it determines the location of your application's infrastructure. Consider factors like your target audience and any compliance requirements when making your selection.

Next, we'll use the search bar at the top of the console and type "Amplify." This will bring up the Amplify service in the search results. Once located, select "AWS Amplify." This will take you to the Amplify console, where you'll manage your applications.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735385026270/45dd5a52-525a-4b29-8ce1-b97305ac9339.png align="center")

And there you have it! You've successfully navigated to the AWS Amplify console. In the next step, we'll create a new application specifically for our Next.js project.

## **Step 2: Creating a New Amplify Application**

Now that we're in the Amplify console, it's time to create a new application.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735388272994/a7353d48-1de4-4b23-874b-66b4abf7e40b.png align="center")

Simply click the "Deploy an app" button to begin the process. This will guide you through the necessary steps to set up your Next.js project for deployment.

## **Step 3: Choosing a Source Code Provider**

In this step, you'll connect your Next.js project's source code to AWS Amplify. Amplify supports various Git providers, ensuring a seamless connection to your repository.

1. **Select a Git Provider**: Choose your preferred Git provider from the options available—GitHub, Bitbucket, CodeCommit, or GitLab. For this example, we'll select **GitHub**.
    
2. **Grant Access**: AWS Amplify requires read-only access to your repository. Ensure you have authorized Amplify to connect to your Git provider. If this is your first time, you may need to log in and grant the necessary permissions.
    
3. **Other Deployment Options**: Alternatively, you can deploy without a Git provider by selecting the **Deploy without Git** option. This allows you to upload your app manually from Amazon S3 or a Zip file.
    
4. **Templates**: If you're starting fresh, Amplify offers templates for popular frameworks like Next.js, Vue, and Angular. These templates can be a great starting point for new projects.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735386064116/9bb1a821-4c5f-4d75-bb3c-9af150ec901c.png align="center")

Here I am selecting GitHub as the Git Provider for my project. Once you've made your selection, click the **Next** button to proceed to the next configuration step.

## Step 4: Authorizing GitHub and Selecting a Private Repository

1. **Authorize GitHub for AWS Amplify**  
    After selecting **GitHub** as the source provider in the previous step, AWS Amplify will redirect you to GitHub for authorization.
    
    * You will see a screen titled **"AWS Amplify Console would like permission to:"**.
        
    * Amplify requests read-only access to your repositories to link and deploy your project securely.
        
    * Click on the green **Authorize AWS Amplify** button to proceed.
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735386184774/49730617-ecb2-4504-a96a-656bdc08043f.png align="center")
    
2. **Select Your GitHub Repository**  
    Once authorized, you'll be redirected back to AWS Amplify to choose the specific repository for your application. You can choose all your repositories or some selected repositories.
    
    * If you have multiple repositories, select **"Only select repositories"**.
        
    * In the dropdown menu, search for and choose your private repository (e.g., [`xopslab.org`](http://xopslab.org) for my case) as shown in the image.
        
    * Click **Install & Authorize** to finalize the connection.
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735386555396/04768862-e349-445c-9b43-4ee605a6db8a.png align="center")
    

> **Note:** If you're selecting a private repository, ensure the repository contains your Next.js application and all necessary dependencies to deploy successfully. AWS Amplify will have read-only access to the repository to fetch the code.

## Step 5: Configuring the Repository and Branch

1. **Select the Branch for Deployment**  
    After authorizing the repository, AWS Amplify will display the selected repository and allow you to choose the branch you want to deploy from.
    
    * In the dropdown, choose the branch that contains your production-ready code (e.g., `main`).
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735388487681/bb439e21-80cb-4b01-88e9-842c4eca13e4.png align="center")
    
2. **Monorepo Setting (Optional)**  
    Amplify provides an option to configure monorepos. A **monorepo** is a single repository that holds multiple projects or applications, typically organized into separate folders. If your repository is a monorepo, you'll need to specify the folder containing the application you want to deploy.
    
    * **In this case**, since my repository is **not a monorepo**, I will leave the **"Monorepo"** checkbox **unchecked**.
        
3. **Confirm the Configuration**  
    Once you’ve selected the branch and ensured the monorepo setting is correct:
    
    * Click **Next** to proceed to the next step.
        

## Step 6: Configuring App Settings

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735388102420/680d0080-e328-44be-86e5-4394aa86a1b3.png align="center")

1. **App Name**
    
    * AWS Amplify automatically generates an app name based on your repository. You can customize it if needed.
        
2. **Build Settings**
    
    * Amplify detects the build settings based on your project type. These settings are automatically configured in a `buildspec.yml` file. You can modify this if your build process requires additional commands.
        
3. **Environment Variables**
    
    * If your project requires environment variables (e.g., API keys or secrets), add them here by clicking **Add Variable**.
        
    * For example: `NEXT_PUBLIC_API_URL =` [`https://api.example.com`](https://api.example.com)
        
    * Be cautious about sensitive data—Amplify handles these securely.
        
4. **Advanced Settings (Optional)**
    
    * You can enable advanced features like pull request previews or manual deployment overrides if needed.
        
    
    After completing these settings, click **Next** to proceed to the **Review** step.
    

## Step 7: Review Your Configuration

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735388377214/c39a9ae2-4cdb-4ec6-9495-cab08e4bbf4d.png align="center")

1. **Repository and Branch**
    
    * Verify that the correct repository and branch are selected.
        
2. **App Details**
    
    * Confirm the app name and build settings are accurate.
        
3. **Environment Variables**
    
    * Double-check the environment variables to ensure no errors in the values.
        

Once you’ve reviewed all the information and confirmed it’s correct, click the **Save and Deploy** or **Next** button to start the deployment process.

## Step 8: Deployment Overview

1. **Monitor Deployment Status**
    
    * After clicking **Save and Deploy**, AWS Amplify will take you to the **Overview** page.
        
    * Here, you can monitor the deployment status. The build process may take a few minutes to complete, depending on the size and configuration of your application.
        
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735389284721/61c5cd5d-5ad8-47e5-b819-a3e5eb1d25bb.png align="center")
    
2. **Deployment Complete**
    
    * Once the status changes to **Deployed**, your Next.js application is live!
        
3. **Access Your Application**
    
    * You can check your application by clicking the URL displayed on the overview page.
        
    * Alternatively, click the **Visit Deployed URL** button to open your live site in a new tab.
        

Congratulations! Your Next.js application is now successfully deployed using AWS Amplify.