Hosting Next.js App on AWS Lightsail or Ubuntu VPS

Next.js is a popular React framework that offers powerful features like server-side rendering and static site generation. While services like Vercel are specifically designed to host Next.js apps, there are many cases where you may prefer to host your app on a standalone server, such as AWS Lightsail or an Ubuntu VPS.

In this guide, we’ll walk you through the steps to configure and deploy a Next.js app on an Ubuntu server using Nginx as a reverse proxy.

Prerequisites

• A Next.js project (If not created, we will set one up).

• An Ubuntu-based server (either AWS Lightsail or any VPS).

• Basic understanding of SSH and server configuration.

Step 1: Update Your Server's Software

Before starting, make sure your server’s software is up to date:

sudo apt update && sudo apt upgrade -y

Step 2: Install Nginx

Nginx will act as a reverse proxy to forward traffic to your Next.js application.

sudo apt install nginx -y

Step 3: Install Node.js and npm

Next.js requires Node.js and npm. Install them using the following commands:

sudo apt install nodejs npm -y

Check the installed versions:

node -v npm -v

Step 4: Install PM2

PM2 is a process manager that will keep your Next.js application running even after system restarts.

sudo npm install -g pm2

Step 5: Set Up Your Next.js Application

Navigate to the /var/www directory, create a new Next.js project, or copy your existing one to this directory:

cd /var/www 

npx create-next-app@latest intertoonsnextapp

Once the project is set up, navigate into your app’s folder and build it:

cd intertoonsnextapp 

npm run build

Step 6: Configure Nginx

Now, let’s configure Nginx to serve your Next.js application. We need to create a new Nginx configuration file in /etc/nginx/sites-available/ for your domain or IP.

cd /etc/nginx/sites-available 

sudo nano intertoonsnextapp

Paste the following configuration into the file, making sure to replace placeholders with your domain or IP address:

server 
 { 
	listen 80; server_name intertoonsnextapp.intertoons.com; #Change to your domain 
	location /_next/static/ 
		{ 
			alias /var/www/intertoonsnextapp/.next/static/; # Change to your app path 
			expires 365d; 
			access_log off;
 		} 
	location / { 
		proxy_pass http://127.0.0.1:3000; # App runs on port 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;
	} 
}

Step 7: Enable Nginx Configuration

Open nginx config file find below line

 include /etc/nginx/sites-enabled/*;

Replace with below line

    include /etc/nginx/sites-available/*;

If a default Nginx configuration exists, remove it to avoid conflicts:

sudo rm /etc/nginx/sites-enabled/default, sudo rm /etc/nginx/sites-available/default

Step 8: Restart Nginx

Check the Nginx configuration for any syntax errors:

sudo nginx -t

If there are no errors, restart Nginx to apply the changes:

sudo systemctl restart nginx

Step 9: Run the Next.js Application with PM2

Change to the directory where your Next.js app is located, and start the application with PM2:

cd /var/www/intertoonsnextapp 

pm2 start npm --name "intertoonsnextapp" -- start

Save the PM2 process list to ensure the app restarts automatically on reboot:

pm2 save

Step 10: Ensure PM2 Starts on Boot

To make sure PM2 starts your Next.js app after a server reboot, run:

pm2 startup

Step 11: Verify Your Application

Visit your domain in the browser (http://intertoonsnextapp.intertoons.com), and you should see your Next.js application running.

Conclusion

By following these steps, you’ve successfully deployed your Next.js application on an Ubuntu-based server using Nginx and PM2. This setup allows you to take full control over your server and scale as needed. For better performance and security, consider adding SSL using Let’s Encrypt, which can be integrated easily into the Nginx configuration.

Feel free to comment below if you encounter any issues!