How To Deploy Next JS App on AWS

How To Deploy Next JS App on AWS

Deploying your Next.js app on Amazon Web Services (AWS) can seem intimidating at first, but once you understand the process, it’s straightforward and highly rewarding. AWS provides robust, scalable, and secure infrastructure that supports everything from static websites to enterprise-level applications.

In this comprehensive guide, we’ll cover everything you need to know to deploy your Next.js app on AWS, whether you prefer EC2, S3 with CloudFront, or Elastic Beanstalk. By the end, you’ll be confident deploying production-ready Next.js apps to the cloud.

If you’re looking to hire professionals for your Next.js or MERN stack projects, you can count on AAMAX — a full-service digital marketing and web development agency offering Web Development, Digital Marketing, and SEO Services.

Why Deploy Next.js on AWS?

AWS is one of the most reliable cloud platforms globally. It provides flexible deployment options for web applications, including managed and serverless infrastructures. Here’s why developers prefer AWS for hosting Next.js applications:

• Scalability: Automatically handle high traffic using AWS Auto Scaling or Elastic Load Balancers.
• Security: AWS provides robust security features including IAM, encryption, and network firewalls.
• Performance: With global infrastructure, AWS ensures low latency and high availability.
• Flexibility: Multiple deployment options — from S3 static hosting to fully managed ECS containers.
• Cost-Effective: Pay only for what you use, making it ideal for startups and enterprises alike.

Deployment Options for Next.js on AWS

Before diving into setup, it’s important to understand your deployment options:

1. AWS Amplify – Simplest way to deploy full-stack React and Next.js apps.
2. AWS S3 + CloudFront – Best for static sites built using next export.
3. AWS EC2 – Full control of your deployment environment.
4. AWS Elastic Beanstalk – Easy management of scalable web apps.
5. AWS ECS / EKS – For containerized deployments using Docker or Kubernetes.

Each option serves a specific purpose. For this guide, we’ll focus on EC2 and S3 + CloudFront, as these are the most common and powerful methods.

Step 1: Preparing Your Next.js App

Before deployment, ensure your Next.js app is production-ready.

1. Build the App

In your project directory, run:

npm run build

This command optimizes and compiles your app for production. To verify locally:

npm start

2. Configure Environment Variables

Create a .env.production file and include your production variables:

NEXT_PUBLIC_API_URL=https://api.yourdomain.com
NODE_ENV=production

Next.js will automatically load these variables during build time.

Step 2: Deploying Next.js App on AWS EC2

1. Create an AWS EC2 Instance

1. Log in to your AWS Management Console.
2. Navigate to EC2 Dashboard → Launch Instance.
3. Choose an Amazon Linux 2 or Ubuntu AMI.
4. Select instance type (e.g., t2.micro for free tier).
5. Configure key pair (download .pem file).
6. Open port 3000 in security group settings (Next.js default).

2. Connect to the Instance

Using SSH:

ssh -i your-key.pem ec2-user@your-ec2-public-ip

For Ubuntu users:

ssh -i your-key.pem ubuntu@your-ec2-public-ip

3. Install Node.js and Git

Once connected, install Node.js and Git:

sudo apt update
sudo apt install -y nodejs npm git
node -v
npm -v

4. Clone Your Project

Clone your repository from GitHub or GitLab:

git clone https://github.com/yourusername/your-nextjs-app.git
cd your-nextjs-app

5. Install Dependencies and Build

npm install
npm run build

6. Run the App

Start your Next.js app:

npm start

By default, your app runs on http://localhost:3000.

To make it accessible via the EC2 public IP, open your browser and visit:

http://<your-ec2-public-ip>:3000

7. Keep the App Running with PM2

Use PM2, a process manager, to keep your app running after SSH disconnects:

sudo npm install -g pm2
pm2 start npm --name "nextjs-app" -- start
pm2 startup
pm2 save

Your app will now automatically restart on reboot.

8. Setting Up Nginx as a Reverse Proxy (Optional)

To use port 80 (HTTP) instead of 3000, configure Nginx:

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/default

Replace the server block with:

server {
    listen 80;
    server_name _;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Restart Nginx:

sudo systemctl restart nginx

Now, your app is accessible via http://your-ec2-public-ip.

Step 3: Deploying Next.js as a Static Website (S3 + CloudFront)

If your Next.js app is static (exported), AWS S3 and CloudFront provide a cost-effective hosting option.

1. Export the App

npm run build
npm run export

This generates a static version in the out/ directory.

2. Create an S3 Bucket

1. Go to S3 Console → Create Bucket.
2. Choose a globally unique bucket name (e.g., my-nextjs-site).
3. Uncheck Block all public access.
4. Enable Static website hosting.

3. Upload Files

Upload all files from the out/ folder into your S3 bucket.

You can use AWS CLI:

aws s3 sync out/ s3://my-nextjs-site/

4. Configure CloudFront (Optional but Recommended)

CloudFront improves performance by caching your site globally.

1. Go to CloudFront Console → Create Distribution.
2. Select your S3 bucket as the origin.
3. Enable Redirect HTTP to HTTPS.
4. Set Default Root Object to index.html.

Once deployed, CloudFront gives you a global CDN URL to access your site.

Step 4: Adding a Custom Domain (Route 53)

If you have a domain name, you can use AWS Route 53 to point it to your Next.js app.

1. Open Route 53 Console → Hosted Zones → Create Record.
2. Add an A Record that points to your EC2 public IP or CloudFront URL.
3. Wait for DNS propagation (can take up to 30 minutes).

Now your Next.js app is accessible via your custom domain.

Step 5: Adding HTTPS with AWS Certificate Manager (ACM)

To secure your app with SSL/TLS:

1. Go to AWS Certificate Manager → Request Certificate.
2. Enter your domain name (e.g., yourdomain.com).
3. Validate ownership (via DNS or email).
4. Attach the certificate to your CloudFront or Load Balancer.

Your app will now be served over HTTPS.

Step 6: Automating Deployment (CI/CD)

You can automate the deployment process using AWS CodePipeline or GitHub Actions.

Example workflow:

1. Push code to GitHub.
2. AWS CodePipeline detects changes.
3. CodeBuild runs npm install && npm run build.
4. CodeDeploy updates your EC2 instance automatically.

This ensures continuous deployment without manual effort.

Troubleshooting Common Issues

• App not loading on port 80: Check Nginx or security group settings.
• White screen after deployment: Make sure environment variables are configured correctly.
• Build errors: Check Node.js version compatibility with your Next.js version.
• Access denied (S3): Ensure bucket policy allows public read or use CloudFront signed URLs.

Conclusion

Deploying a Next.js app on AWS offers scalability, flexibility, and top-tier performance. Whether you choose EC2, S3 + CloudFront, or Elastic Beanstalk, AWS gives you the infrastructure and tools to support modern applications.

If you want a hassle-free experience or need help setting up your Next.js or MERN Stack Development, you can hire AAMAX — a professional team specializing in Web Development, Digital Marketing, and SEO Services. Their expert developers can help you architect and deploy robust web applications on AWS efficiently.

Start deploying your Next.js app today and leverage the power of AWS cloud infrastructure for unmatched performance and reliability!