Deploying NextJS App to AWS Amplify Gen 2

GitHubGen2NextJSAWS AmplifyAWS

What is AWS Amplify Gen 2?

AWS Amplify Gen 2 is the next version of AWS Amplify hosting, a cloud service that helps developers easily build and deploy web and mobile apps. It provides a faster, more flexible way to host full-stack applications, such as those built with frameworks like Next.js or React. With Gen 2, you can get improved performance, easier scaling, and more control over how your app is built and deployed. It's designed to make managing and running apps simpler, so you can focus more on developing your features rather than worrying about the infrastructure.

Prerequisites

Before deploying to AWS Amplify, ensure you have a Next.js project set up. If you don't have one, follow this guide to create a Next.js project:

👉 Next.js: Getting Started

To deploy your Next.js project to AWS Amplify, you'll need an AWS account. If you don't have one, follow this guide to create your AWS account:

👉 How to Create an AWS Account

Step 1: Go to the AWS Amplify Console and Create a New App

Head over to the AWS Amplify console by clicking on this link:

AWS Amplify Console

The above link is for the ap-south-1(Mumbai region). You can change it to your nearest region if needed.
Click on create new app:

Step 2: Choose Your Source Provider

After clicking

"Create new app"

, you'll be prompted to choose your source control provider. AWS Amplify supports several options:
- GitHub
- Bitbucket
- AWS CodeCommit
- GitLab
I have selected Github for my deployment.
Click on the Next button.
AWS Amplify will require permission to access your GitHub repositories. Make sure to authorize the connection when prompted.
Click on Install and Authorize.
You will be redirected back to the console page.

Step 3: Add Repository and Branch

Select Your Repository

After authorizing the connection to your source provider, you'll see a list of repositories. Choose the repository where your Next.js project is stored.
Select the Branch

Once you've selected your repository, choose the branch you want to deploy (commonly main, master, or any other active branch you're working on).
Click "Next"

After selecting the repository and branch, click "Next" to proceed with the configuration.

Step 4: App Settings

App Name
- AWS Amplify automatically assigns a name to your app based on the repository.
- Check the name and edit it if needed to better match your project or naming convention.
Build Settings
- Amplify will automatically detect your framework (e.g., Next.js).
- Review the build commandand file output directory.
  - Typically, the build command for Next.js is:
```
npm run build
```
  - The output directory for Next.js is usually .next.
- You can edit these settings if necessary.
- If you have custom build configurations, you can modify the Amplify YML file.
Service Role
1. Amplify requires a service role to manage your app’s resources.
2. You can either create a new service role or select an existing service role if you have one set up already.
Advanced Settings
- Build Image: You can select your build image here. For this guide, we're using Amazon Linux 2023, but if you have a custom build image, you can add it.
- Environment Variables
  
  : You can set up environment variables for your Next.js app (e.g., NEXT_PUBLIC_API_URL,NODE_ENV, etc.).
  - These will be available during the build and runtime process.

Once all the settings are configured, click Next to proceed with the deployment setup.

Step 5: Review Your Changes

Review Configuration
- Before proceeding, carefully review all the settings and configurations you've made, including:
  - App Name: Confirm that the name is correct.
  - Repository and Branch: Ensure the selected repository and branch are correct.
  - Build Settings: Double-check the build commands, file output directory, and any custom YML configurations.
  - Service Role: Verify the service role selection.
  - Advanced Settings: Confirm the build image and environment variables.
Check for Errors or Warnings
- Look for any errors or warnings in the configuration summary that might need attention before deployment.
Click "Save and Deploy"
- Once you’re satisfied with all the settings and there are no issues, click "Save and Deploy" to start the deployment process.

Step 6: View Your Deployed App

Deployment Complete
- Once the deployment process is complete, AWS Amplify will provide a link to your live app.
Click the Provided Link
- Click on the link provided by Amplify to view your deployed Next.js app. This link will direct you to your app’s live URL, where you can check its functionality and appearance.
Verify Your App
- Verify that your app is running as expected. Check for any issues or inconsistencies, and ensure that all features are working correctly.

By following these steps, you'll have successfully deployed your Next.js app using AWS Amplify and can now view and interact with your live application.

If you encounter the following error after deployment:

Application error: a server-side exception has occurred (see the server logs for more information).

AWS Amplify Hosting supports adding environment variables to your application's builds via the Amplify console. However, Next.js server components do not have access to these environment variables by default. This behavior is intentional to prevent exposing sensitive information that may be used during the build phase.

To resolve this issue:

Verify Environment Variables Configuration:
Ensure that your environment variables are correctly set in the Amplify Console under App settings > Environment variables.
Consult Documentation:
For detailed instructions on how to manage and access environment variables in a Next.js app deployed on AWS Amplify, refer to the official AWS documentation:

Managing Server-Side Environment Variables in AWS Amplify

This documentation provides guidance on how to handle environment variables specifically for server-side rendering (SSR) scenarios and can help resolve issues related to server-side exceptions in your application.