Self-hosting a Next.js application gives you more control over your deployment and can reduce costs compared to managed hosting. This guide covers deploying Next.js with Nginx as a reverse proxy and PM2 for process management.
Anıl Soylu
Self-hosting your Next.js application offers greater control over your deployment environment and can be more cost-effective than using managed hosting services. This guide walks you through the complete process of deploying a Next.js application using Nginx as a reverse proxy and PM2 as a process manager.
Before deployment, optimize your application by excluding unnecessary files and directories:
zip -r archive.zip . -x ".next/*" "node_modules/*" ".env" ".git/*This command creates a compressed archive of your project while excluding build artifacts, dependencies, environment variables, and Git history.
Begin by creating and organizing your website directory:
# Create website directory
mkdir -p /var/www/example.com
cd /var/www/example.com
# Upload and extract files
unzip archive.zip
mv project-master/* .
mv project-master/.* . 2>/dev/null || true
rmdir project-master
# Set permissions
sudo chown -R www-data:www-data /var/www/example.com/public
sudo chmod -R 775 /var/www/example.com/publicThese commands establish a proper directory structure and set appropriate permissions for your web server.
Create a dedicated Nginx configuration file to handle requests to your application:
sudo nano /etc/nginx/sites-available/example.comAdd the following configuration:
# HTTP configuration - for redirection to HTTPS
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
# Directory for Let's Encrypt verification
location /.well-known/acme-challenge/ {
root /var/www/html;
allow all;
}
}
# HTTPS configuration (will be updated by Certbot automatically)
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.com www.example.com;
# Static files location
location /uploads/ {
alias /var/www/example.com/public/uploads/;
autoindex on;
expires max;
}
# Next.js static assets
location /_next/ {
proxy_pass http://localhost:3000/_next/;
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;
}
# Forward all other requests to Next.js
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;
}
}This configuration handles both HTTP and HTTPS traffic, with specific locations for static files, Next.js assets, and proxying requests to your application.
Enable the configuration and verify it works correctly:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginxSecure your site with a free SSL certificate from Let's Encrypt:
sudo certbot --nginx -d example.com -d www.example.comThis command automatically configures HTTPS and redirects HTTP traffic to HTTPS.
Start your Next.js application using PM2 for persistent execution:
cd /var/www/example.com
PORT=3000 pm2 start npm --name "example-app" -- start
# Or if using pnpm:
# PORT=3000 pm2 start pnpm --name "example-app" -- start
# Save PM2 configuration for auto-restart on server reboot
pm2 savePM2 ensures your application stays running even after server restarts and provides easy management of your Node.js processes.
By following these steps, you'll have a production-ready Next.js application running on your own server with proper HTTP/HTTPS handling, performance optimization, and process management.