Published on

How to Deploy Next.js on AWS Amplify in Under 15 Minutes

You can build and deploy a Next.js app on AWS in under 15 minutes by connecting a GitHub repository to AWS Amplify (a service that automates hosting and backend setup). This process creates a continuous deployment pipeline where every code change you push to GitHub automatically updates your live website. By the end of this guide, you will have a production-ready URL running the latest version of Next.js on Amazon’s global infrastructure.

Why should you choose AWS for Next.js?

AWS offers professional-grade reliability and scaling that grows with your project. While many beginners start with simpler platforms, using AWS Amplify provides a direct path to integrating other powerful tools like databases or user authentication systems later.

Next.js is a React framework (a library for building user interfaces) that allows for fast performance through features like server-side rendering (preparing the webpage on the server before sending it to the user). Deploying this on AWS ensures your site stays fast even if thousands of people visit at once.

We've found that starting with AWS Amplify removes the headache of manually configuring servers, making it the most beginner-friendly entry point into the cloud. It handles the SSL certificate (the lock icon in your browser that proves a site is secure) and the CDN (Content Delivery Network - a system of servers that delivers web content faster based on geographic location) automatically.

What do you need before starting?

Before you run your first command, ensure your computer is ready for modern web development. You will need a few free accounts and specific software versions installed.

  • Node.js (Version 24 or 26 LTS): This is the environment that runs JavaScript on your computer. You can download it from the official Node.js website.
  • A GitHub Account: This is where you will store your code (repository) so AWS can find it.
  • An AWS Account: You will need to provide a credit card for identity verification, though the "Free Tier" covers most beginner projects for the first year.
  • A Terminal: This is the text-based interface used to run commands, like Command Prompt on Windows or Terminal on macOS.

How do you create your Next.js project?

The first step is to generate the code for your website using the terminal. We will use the standard Next.js creator tool to set up a modern template.

Step 1: Open your terminal and type the following command to create a new project.

npx create-next-app@latest my-aws-site
# npx is a tool to run packages without installing them permanently
# create-next-app is the official starter kit for Next.js

Step 2: The terminal will ask you several configuration questions. For a standard setup, press "Enter" to accept all the default suggestions (using TypeScript, ESLint, and Tailwind CSS).

Step 3: Move into your new project folder and start the local development server to make sure it works.

cd my-aws-site
# cd stands for 'change directory'
npm run dev
# This starts the site on your computer for testing

What you should see: Your terminal will say "Ready in..." and provide a link like http://localhost:3000. Open that in your browser to see the default Next.js welcome page.

How do you push your code to GitHub?

AWS Amplify needs to "watch" your code on GitHub so it knows when to update your site. You need to move your local code to a cloud repository.

Step 1: Go to GitHub and click the "+" icon to create a "New repository." Name it my-aws-site and keep it public or private, then click "Create repository."

Step 2: Back in your terminal, stop the local server by pressing Ctrl + C. Run these commands to link your local code to GitHub.

git add .
# This prepares all your files to be saved
git commit -m "Initial commit"
# This saves a snapshot of your code with a descriptive message
git branch -M main
# This ensures your primary branch is named 'main'
git remote add origin https://github.com/your-username/my-aws-site.git
# Replace the URL above with the one GitHub gave you
git push -u origin main
# This sends your code to GitHub's servers

What you should see: Refresh your GitHub repository page in your browser. You should now see all your project files and folders listed there.

How do you connect GitHub to AWS Amplify?

Now that your code is on GitHub, you can tell AWS to turn that code into a live website. Log into your AWS Management Console and search for "Amplify" in the top search bar.

Once you are in the Amplify dashboard, click the "Create new app" button. You will be asked to choose a service; select "GitHub" and click "Next" to begin the integration.

AWS will ask for permission to access your GitHub account. Follow the prompts to authorize AWS and then select your my-aws-site repository from the dropdown list.

Choose the main branch and click "Next." Amplify will automatically detect that you are using Next.js and suggest the correct build settings for you.

Review the details on the final screen and click "Save and deploy." This tells AWS to start the "Build" process, where it installs your dependencies and optimizes your code for the web.

What you should see: You will see a dashboard with a status indicator. It will move through stages like "Provisioning," "Building," and "Deploying." Once the "Deployment" stage shows a green checkmark, AWS will provide a URL (ending in .amplifyapp.com) where your site is live.

What are some common mistakes to avoid?

One common error is using an incompatible version of Node.js. AWS Amplify uses a specific environment to build your site, and if your local version is much newer than the one AWS uses, the build might fail.

You can fix this by adding a "Build Image Settings" override in the Amplify console or by specifying your Node version in your package.json file. This ensures the cloud environment matches your local computer.

Another frequent issue is forgetting to export environment variables (secret keys like API tokens). If your app relies on a secret key to fetch data, you must manually add that key in the Amplify "Environment variables" settings.

If the site doesn't look right, check your "Build Settings" in the Amplify console. Ensure the "Base directory" is set to .next or out, depending on whether you are using a dynamic server or a static export.

Don't worry if the first build takes 3-5 minutes. AWS is setting up a lot of infrastructure behind the scenes to make sure your site is fast for everyone.

Next Steps

Now that your site is live, try making a small change to the text in app/page.tsx on your computer. Use git add, git commit, and git push to send that change to GitHub.

Watch the AWS Amplify dashboard; it will automatically start a new build and update your live URL within minutes. This workflow is called CI/CD (Continuous Integration and Continuous Deployment), and it is how professional software teams work.

You might also want to explore adding a custom domain name (like www.yourname.com) which Amplify can handle through its "Domain management" menu.

For more detailed guides, visit the official Next.js documentation.

Read the Next.js Documentation