نشر تطبيق Next.js على سيرفر سعودي

نشر تطبيق Next.js على سيرفر سعودي

Next.js أصبح الإطار الأكثر استخداماً لبناء تطبيقات React في الإنتاج. نشره على سيرفر خاص (بدل Vercel) يوفر تكاليف ويعطيك تحكماً كاملاً. هذا الدليل يأخذك من الكود للإنتاج.

لماذا نشر ذاتي بدل Vercel؟

Vercel Pro Plan: $20/شهر = 75 ريال
+ كل طلب فوق الحد: تكلفة إضافية
+ حجم البناء محدود
+ البيانات على سيرفرات أمريكية

مقابل VPS كلاود (نمو):
أسعار تنافسية — <a href="https://cloud.net.sa/pricing">الأسعار والباقات</a> = 575 ريال/شهر
+ سيرفر سعودي
+ لا حدود على الطلبات
+ تحكم كامل

لكن Vercel أسهل للمبتدئين. النشر الذاتي يحتاج معرفة تقنية.

متطلبات السيرفر

# على السيرفر الجديد — تثبيت Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# التحقق
node --version # v20.x.x
npm --version # 10.x.x

# تثبيت PM2 (process manager)
npm install -g pm2

# تثبيت Nginx
apt install nginx -y

بناء Next.js للإنتاج

إعداد next.config.js

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
 output: 'standalone', // مهم جداً للنشر الذاتي
 
 images: {
 remotePatterns: [
 {
 protocol: 'https',
 hostname: '**.yourcdn.com',
 },
 ],
 },
 
 // ضغط الاستجابة
 compress: true,
 
 // إزالة header الـ X-Powered-By
 poweredByHeader: false,
};

module.exports = nextConfig;

البناء

# محلياً
npm run build

# التحقق من حجم البناء
du -sh .next/
# جيد: أقل من 500 MB

النشر على السيرفر

طريقة 1: النسخ المباشر

# على جهازك — نسخ ملفات البناء للسيرفر
rsync -avz --exclude 'node_modules' --exclude '.git' \
 ./ user@YOUR.SERVER.IP:/var/www/nextapp/

# على السيرفر
cd /var/www/nextapp
npm install --production
pm2 start npm --name "nextapp" -- start
pm2 save
pm2 startup

طريقة 2: Git Pull على السيرفر (الأفضل)

# على السيرفر
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 لتحديثات مستقبلية
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

إعداد Nginx كـ 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 مع caching
 location /_next/static/ {
 alias /var/www/nextapp/.next/static/;
 expires 1y;
 add_header Cache-Control "public, immutable";
 }
 
 # Public files
 location /public/ {
 root /var/www/nextapp;
 expires 30d;
 }
 
 # Proxy للـ 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;
 }
}

# تفعيل الموقع
ln -s /etc/nginx/sites-available/nextapp /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

# تثبيت SSL
certbot --nginx -d yourapp.com -d www.yourapp.com

متغيرات البيئة في الإنتاج

# /var/www/nextapp/.env.local
NEXT_PUBLIC_API_URL=https://api.yourapp.com
DATABASE_URL=postgresql://user:pass@localhost/appdb
NEXTAUTH_SECRET=your-super-secret-key
NEXTAUTH_URL=https://yourapp.com

# أو استخدم PM2 ecosystem
# ecosystem.config.js
module.exports = {
 apps: [{
 name: 'nextapp',
 script: 'npm',
 args: 'start',
 env: {
 NODE_ENV: 'production',
 PORT: 3000,
 },
 env_file: '.env.production',
 }]
};

المراقبة والسجلات

# مشاهدة السجلات مباشرة
pm2 logs nextapp

# حالة التطبيق
pm2 status

# مراقبة الموارد
pm2 monit

# إعادة تشغيل تلقائية عند وصول الذاكرة لحد معين
pm2 start npm --name "nextapp" -- start \
 --max-memory-restart 500M

الخلاصة

Next.js على VPS سعودي يوفر أداءً ممتازاً لمستخدمي المملكة (latency أقل من 12ms مع كلاود في الرياض) مع تكلفة أقل من Vercel Pro للمشاريع التي تتجاوز الحجم المجاني. الإعداد يأخذ ساعة، لكنه يعطيك تحكماً كاملاً.

---

ابدأ الآن

جاهز تبني مشروعك؟ اختر خادمك السحابي بالمواصفات اللي يحتاجها تطبيقك، أو راجع الباقات والأسعار.