Deploying Next.js on a Saudi Server

Next.js Deployment on Saudi Server

Next.js has become the most widely used framework for building React applications in production. Self-hosting instead of using Vercel saves costs and gives you full control. This guide takes you from code to production.

Why Self-Host Instead of Vercel?

Vercel Pro Plan: $20/month
+ Cost per request over the limit
+ Build size limits
+ Data on US servers

vs. كلاود Growth VPS:
competitive pricing — <a href="https://cloud.net.sa/en/pricing">pricing and plans</a> = 575 SAR/month
+ Saudi server
+ No request limits
+ Full control

Vercel is easier for beginners. Self-hosting requires technical knowledge.

Server Requirements

# On the new server — install Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# Verify
node --version # v20.x.x
npm --version # 10.x.x

# Install PM2 (process manager)
npm install -g pm2

# Install Nginx
apt install nginx -y

Building Next.js for Production

Configure next.config.js

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
 output: 'standalone', // Very important for self-hosting
 
 images: {
 remotePatterns: [
 {
 protocol: 'https',
 hostname: '**.yourcdn.com',
 },
 ],
 },
 
 compress: true,
 poweredByHeader: false,
};

module.exports = nextConfig;

Build

# Locally
npm run build

# Check build size
du -sh .next/
# Good: under 500 MB

Deploying to the Server

Method: Git Pull on Server (Recommended)

# On the server
git clone https://github.com/youruser/nextapp.git /var/www/nextapp
cd /var/www/nextapp
npm install
npm run build
pm2 start npm --name "nextapp" -- start

# Script for future updates
cat > /var/www/nextapp/deploy.sh << 'EOF'
#!/bin/bash
cd /var/www/nextapp
git pull origin main
npm install
npm run build
pm2 restart nextapp
echo "Deployed successfully at $(date)"
EOF
chmod +x /var/www/nextapp/deploy.sh

Configure Nginx as Reverse Proxy

# /etc/nginx/sites-available/nextapp
server {
 listen 80;
 server_name yourapp.com www.yourapp.com;
 return 301 https://$host$request_uri;
}

server {
 listen 443 ssl http2;
 server_name yourapp.com www.yourapp.com;
 
 ssl_certificate /etc/letsencrypt/live/yourapp.com/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/yourapp.com/privkey.pem;
 
 # Next.js static files with caching
 location /_next/static/ {
 alias /var/www/nextapp/.next/static/;
 expires 1y;
 add_header Cache-Control "public, immutable";
 }
 
 # Proxy to Next.js server
 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_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_cache_bypass $http_upgrade;
 }
}

# Enable the site
ln -s /etc/nginx/sites-available/nextapp /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

# Install SSL
certbot --nginx -d yourapp.com -d www.yourapp.com

Monitoring and Logs

# View logs live
pm2 logs nextapp

# Application status
pm2 status

# Resource monitoring
pm2 monit

# Auto-restart when memory limit reached
pm2 start npm --name "nextapp" -- start \
 --max-memory-restart 500M

Conclusion

Next.js on a Saudi VPS delivers excellent performance for Saudi users (latency under 12ms with كلاود in Riyadh) at lower cost than Vercel Pro for projects that exceed the free tier. Setup takes about an hour but gives you complete control.

---

Get Started

Ready to build your project? Configure your cloud server with the specs your app needs, or view plans and pricing.