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.

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.

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.

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.

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 for my case) as shown in the image.

   • Click Install & Authorize to finalize the connection.

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).

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

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

   • 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

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.

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.