[{"data":1,"prerenderedAt":168},["ShallowReactive",2],{"seo-verification":3,"blog-نشر-تطبيق-nextjs-على-vps-ma-ar":6,"promo-bar-likely":167},{"google":4,"bing":5},"EycwPY2XMyTkVzas3n1ygeNJFGAH513qrMjfDljzsMQ","",{"key":7,"data":8},"blog-نشر-تطبيق-nextjs-على-vps-ma-ar",{"id":9,"slug":10,"slugs":11,"title":15,"excerpt":16,"readTime":17,"views":18,"isPinned":19,"noindex":19,"publishedAt":20,"updatedAt":21,"category":22,"categories":28,"featuredImage":30,"bgImage":31,"posterImage":32,"relatedSolution":33,"intro":35,"sections":36,"ctaTitle":109,"ctaBody":110,"ctaButton":111,"ctaUrl":112,"relatedPosts":113},46,"نشر-تطبيق-nextjs-على-vps",{"fr":12,"en":13,"ar":10,"es":14},"deployer-nextjs-vps","deploy-a-nextjs-application-on-a-vps","desplegar-nextjs-en-un-vps","نشر تطبيق Next.js على VPS","انشر Next.js على VPS: Node.js وPM2 وNginx وSSL وSSR. دليل كامل للمطوّرين والوكالات الراغبين في الاستضافة الذاتية.",13,1,false,"2026-05-05T00:00:00+00:00","2026-11-04T16:30:25+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},4,"التطوير","developpement","bg-warning\u002F10 text-warning","dev",[29],{"id":23,"name":24,"slug":25,"color":26,"icon":27},null,"\u002Fblog\u002Fcovers\u002Fbg.svg","\u002Fblog\u002Fcovers\u002Fdeployer-nextjs-vps-poster.svg",{"categorySlug":24,"appSlug":34},"nextjs-stack","يجمع Next.js بين التصيير من جهة الخادم والتوليد الثابت ومسارات API في إطار React واحد. ونشره على VPS بدلًا من منصة احتكارية يحرّرك من حصص الدوال وحدود عرض النطاق (bandwidth) والارتباط بمزوّد واحد، مع إبقاء SSR يعمل بكامل طاقته.",[37,41,51,54,57,60,82,85,88,91,94,97,100,103,106],{"type":38,"title":39,"body":40},"h2","لماذا تستضيف Next‎.js ذاتيًا على VPS؟","غالبًا ما يُقرَن Next‎.js بمنصة استضافة بعينها، لكن خادم Node‎.js المستقل (standalone) الخاص به يعمل بشكل مثالي على أي VPS. وتصبح الاستضافة الذاتية مجدية بمجرد استخدامك المكثف لـSSR أو ISR (التوليد الثابت التزايدي) أو مسارات API: فهذه الميزات تستهلك استدعاءات مفوترة على المنصات المُدارة، بينما هي مجانية وغير محدودة على خادمك. تتحكم في ذاكرة ISR المؤقتة على القرص، وفي عرض النطاق للصور المُحسَّنة، وفي زمن تنفيذ الدوال، دون حد الـ10 ثوانٍ.",{"type":42,"title":43,"items":44},"ul","فوائد ملموسة لاستضافة Next‎.js ذاتيًا",[45,46,47,48,49,50],"SSR ومسارات API دون حصة استدعاءات ودون فوترة لكل دالة.","ذاكرة ISR مؤقتة دائمة على القرص، دون فقدان إعادة التحقق بين عمليات النشر.","عرض نطاق مشمول، مثالي للمواقع الغنية بالصور والفيديو.","عدة مشاريع Next‎.js على VPS واحد، موحَّدة تحت Nginx.","تحسين الصور عبر `next\u002Fimage` يُقدَّم محليًا دون تكلفة إضافية لكل تحويل.","بناء ونشر مُتحكَّم فيهما عبر Git أو CI\u002FCD أو مجرد `git pull` وإعادة بناء.",{"type":38,"title":52,"body":53},"المتطلبات المسبقة للعتاد والبرمجيات","عملية بناء Next‎.js نهِمة للذاكرة: خصّص ما لا يقل عن 2 غيغابايت من ذاكرة RAM (و4 غيغابايت لمشروع كبير بكثير من الصفحات)، وإلا فقد تفشل عملية البناء بسبب نقص الذاكرة. أما من ناحية وقت التشغيل، فيكفي 1 إلى 2 vCPU لتقديم SSR. ثبّت Node‎.js 18 أو 20 LTS، إما أصليًا عبر `nvm` أو عبر صورة Docker `node:20-alpine`. فعّل `output: 'standalone'` في `next‎.config‎.js` لنشر خفيف.",{"type":38,"title":55,"body":56},"بناء Docker متعدد المراحل: node:20-alpine","يُقلّص البناء متعدد المراحل الصورة النهائية إلى الحد الأدنى ويتجنّب شحن أدوات البناء إلى بيئة الإنتاج. تعتمد الاستراتيجية الثلاثية المراحل — **deps** و**builder** و**runner** — وهي الأكثر شيوعًا مع Next‎.js في وضع `standalone`.\n\n```dockerfile\n# المرحلة 1 — الاعتماديات\nFROM node:20-alpine AS deps\nWORKDIR \u002Fapp\nCOPY package‎.json package-lock‎.json .\u002F\nRUN npm ci --omit=dev\n\n# المرحلة 2 — البناء\nFROM node:20-alpine AS builder\nWORKDIR \u002Fapp\nCOPY --from=deps \u002Fapp\u002Fnode_modules .\u002Fnode_modules\nCOPY . .\nRUN npm run build\n\n# المرحلة 3 — المشغّل (الصورة النهائية)\nFROM node:20-alpine AS runner\nWORKDIR \u002Fapp\nENV NODE_ENV=production\nCOPY --from=builder \u002Fapp\u002F‎.next\u002Fstandalone .\u002F\nCOPY --from=builder \u002Fapp\u002F‎.next\u002Fstatic .\u002F‎.next\u002Fstatic\nCOPY --from=builder \u002Fapp\u002Fpublic .\u002Fpublic\nEXPOSE 3000\nCMD [\"node\", \"server‎.js\"]\n```\n\nتُثبّت مرحلة `deps` الاعتماديات الإنتاجية فقط (`--omit=dev`). تنسخ مرحلة `builder` المصدر الكامل وتُشغّل `npm run build`. لا تحتوي مرحلة `runner` إلا على مجلد `standalone` الذي يُنشئه Next‎.js والأصول الثابتة ومجلد `public` — بلا `node_modules` مصدرية.",{"type":38,"title":58,"body":59},"متغيرات البيئة: ‎.env‎.local مقابل ‎.env‎.production","يُميّز Next‎.js بين عائلتين من المتغيرات بحسب نطاقهما.\n\n**المتغيرات العامة (`NEXT_PUBLIC_*`)**: تُدمَج في حزمة JavaScript وقت البناء وتُكشَف للمتصفح. تناسب URL واجهة برمجة عامة أو معرّف Google Analytics أو علامة ميزة. لا تضع فيها أسرارًا أبدًا.\n\n**متغيرات الخادم**: تُقرَأ على جانب Node فقط (مسارات API ومكوّنات الخادم و`getServerSideProps`). لا تُرسَل إلى العميل أبدًا. هنا تعيش مفاتيح API الخارجية وسلاسل اتصال قاعدة البيانات وأسرار JWT.\n\nعلى VPS، نهجان متاحان: حقن المتغيرات في بيئة عملية PM2 عبر ملف النظام البيئي (`ecosystem‎.config‎.js`)، أو تمريرها إلى Docker عبر `--env-file ‎.env‎.production`. النهج الثاني أفضل: يبقى الملف على قرص الخادم خارج مستودع git.\n\nتنبيه: يجب أن تكون متغيرات `NEXT_PUBLIC_*` معروفة **وقت البناء**، وليس فقط وقت التشغيل. إذا غيّرت متغيرًا عامًا بعد البناء، يجب إعادة بناء التطبيق.",{"type":61,"title":62,"steps":63},"steps","نشر Next‎.js خطوة بخطوة",[64,67,70,73,76,79],{"title":65,"body":66},"تجهيز الخادم","عبر SSH، ثبّت Node‎.js 20 LTS وPM2 (`npm install -g pm2`)، أو Docker. استنسخ المستودع وأنشئ `‎.env‎.production` مع متغيراتك (`NEXT_PUBLIC_*` للعميل، وأسرار الخادم لمسارات API).",{"title":68,"body":69},"بناء التطبيق","نفّذ `npm ci` ثم `npm run build`. ومع `output: 'standalone'`، يُنشئ Next‎.js مجلدًا مستقلًا `‎.next\u002Fstandalone` يحتوي فقط على الاعتماديات اللازمة، ما يخفّف الصورة بشكل كبير.",{"title":71,"body":72},"تشغيل خادم Node","شغّل الخادم باستخدام `pm2 start node --name nextjs -- ‎.next\u002Fstandalone\u002Fserver‎.js` على المنفذ 3000، أو عبر حاوية Docker. اضبط `pm2 startup` و`pm2 save` لإعادة تشغيل تلقائية عند إعادة إقلاع VPS.",{"title":74,"body":75},"إعداد Nginx في الواجهة الأمامية","أنشئ كتلة خادم تنفّذ `proxy_pass http:\u002F\u002Flocalhost:3000`، وتُمرّر ترويستَي `Host` و`X-Forwarded-For`، وتقدّم `\u002F_next\u002Fstatic\u002F` مباشرة من القرص لتخفيف العبء عن Node. فعّل ضغط gzip.",{"title":77,"body":78},"تثبيت شهادة SSL","احصل على شهادة Let's Encrypt عبر Certbot لـ`yourdomain‎.com`، وافرض إعادة التوجيه إلى HTTPS، واضبط التجديد التلقائي. تحقّق من تمرير ترويسات `X-Forwarded-Proto` بشكل صحيح لأجل SSR.",{"title":80,"body":81},"إعداد عمليات النشر","أتمِت دورة `git pull && npm ci && npm run build && pm2 reload nextjs` عبر سكربت أو webhook خاص بـGit. ويضمن أمر `reload` في PM2 إعادة تشغيل دون انقطاع (zero-downtime) بين إصدارين.",{"type":38,"title":83,"body":84},"إعداد Nginx الكامل مع upstream","يتجاوز إعداد Nginx الكامل لـNext‎.js مجرد `proxy_pass`. تحتاج إلى تقديم الأصول الثابتة مباشرة من القرص، وإدارة ترويسات الذاكرة المؤقتة، وتفعيل الضغط، وتمرير معلومات العميل بشكل صحيح.\n\n```nginx\nupstream nextjs_upstream {\n  server 127.0.0.1:3000;\n  keepalive 64;\n}\n\nserver {\n  listen 443 ssl http2;\n  server_name yourdomain‎.com;\n\n  gzip on;\n  gzip_types text\u002Fplain text\u002Fcss application\u002Fjavascript application\u002Fjson image\u002Fsvg+xml;\n\n  location \u002F_next\u002Fstatic\u002F {\n    alias \u002Fhome\u002Fdeploy\u002Fmyapp\u002F‎.next\u002Fstatic\u002F;\n    expires 1y;\n    add_header Cache-Control \"public, immutable\";\n  }\n\n  location \u002F {\n    proxy_pass http:\u002F\u002Fnextjs_upstream;\n    proxy_http_version 1.1;\n    proxy_set_header Host $host;\n    proxy_set_header X-Real-IP $remote_addr;\n    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n    proxy_set_header X-Forwarded-Proto $scheme;\n  }\n}\n```\n\nتُحافظ كتلة `upstream` مع `keepalive 64` على مجمع اتصالات دائمة نحو Node، ما يتجنّب التفاوض على TCP في كل طلب. توجيه `proxy_http_version 1.1` ضروري لعمل اتصالات keepalive فعليًا.",{"type":38,"title":86,"body":87},"استراتيجية ISR: إعادة التحقق وثبات الذاكرة المؤقتة","يتيح ISR (التوليد الثابت التزايدي) لـNext‎.js إعادة توليد الصفحة الثابتة في الخلفية بعد تأخير معيّن، دون إعادة بناء كاملة. على VPS، يتطلّب هذا بقاء الذاكرة المؤقتة عبر عمليات إعادة التشغيل.\n\nتُخزَّن ذاكرة ISR المؤقتة في `‎.next\u002Fcache`. خياران متاحان لجعلها تنجو من عمليات إعادة النشر:\n\n**الخيار 1 — وحدة تخزين دائمة**: ربط `‎.next\u002Fcache` خارج مجلد النشر وإعادة نسخها بعد كل rebuild.\n\n**الخيار 2 — معالج ذاكرة مؤقتة Redis**: لعدة نسخ Node أو احتياج المشاركة بين الأجهزة، يدعم Next‎.js معالجات الذاكرة المؤقتة المخصّصة منذ الإصدار 13.4. يتيح هذا نقل ذاكرة ISR المؤقتة إلى Redis.\n\nللمواقع ذات الحركة المنخفضة، يكفي الخيار 1. يصبح الخيار 2 ضروريًا عند وجود عدة عمليات Node (مجموعة PM2) أو عدة VPS خلف موازن حِمل.",{"type":38,"title":89,"body":90},"مكوّنات الخادم مقابل مكوّنات العميل: تأثير ذاكرة RAM والمعالج","منذ Next‎.js 13 وApp Router، المكوّنات هي **مكوّنات خادم بشكل افتراضي**. للتمييز تبعات مباشرة على استهلاك موارد VPS.\n\n**مكوّنات الخادم** تعمل على جانب الخادم فقط. يمكنها قراءة قاعدة البيانات مباشرة والوصول إلى نظام الملفات، ولا تُرسَل قط إلى حزمة JavaScript للمتصفح. والنتيجة HTML خالص يُقلّص حجم حزمة العميل ويُحسّن Core Web Vitals (LCP). على الخادم، تستهلك CPU في كل طلب SSR غير مُخزَّن مؤقتًا.\n\n**مكوّنات العميل** (`'use client'` في أعلى الملف) يتم ترطيبها في المتصفح. ضرورية للتفاعلات: أحداث، حالة محلية، hooks (`useState`، `useEffect`).\n\nالقاعدة العملية على VPS: **احتفظ بمكوّنات الخادم لكل ما يتعلق بالبيانات**، وحدّد مكوّنات العميل في مناطق التفاعل.",{"type":38,"title":92,"body":93},"CI\u002FCD: GitHub Actions أو Forgejo","يتجنّب أتمتة النشر الأخطاء البشرية ويضمن أن كل دمج على الفرع الرئيسي يُشغّل إعادة بناء نظيفة. حلّان شائعان على VPS: **GitHub Actions** (إذا كان مستودعك على GitHub) و**Forgejo** (منصة مستضافة ذاتيًا، بديل مفتوح المصدر لـGitHub\u002FGitea).\n\n```yaml\nname: Deploy Next‎.js\non:\n  push:\n    branches: [main]\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Deploy via SSH\n        uses: appleboy\u002Fssh-action@v1\n        with:\n          host: ${{ secrets.VPS_HOST }}\n          username: deploy\n          key: ${{ secrets.VPS_SSH_KEY }}\n          script: |\n            cd \u002Fhome\u002Fdeploy\u002Fmyapp\n            git pull origin main\n            npm ci\n            npm run build\n            pm2 reload nextjs\n```\n\nفي كلتا الحالتين، تُضبَط الأسرار (مفتاح SSH، متغيرات البيئة) في أسرار المستودع ولا تظهر أبدًا في السجلات.",{"type":38,"title":95,"body":96},"المراقبة مع PM2","PM2 هو مدير العمليات وأداة المراقبة الأولى لتطبيق Next‎.js. أوامر أساسية:\n\n```bash\n# حالة العمليات\npm2 list\n\n# سجلات مباشرة\npm2 logs nextjs\n\n# مقاييس CPU وذاكرة RAM\npm2 monit\n\n# إعادة تشغيل بلا انقطاع\npm2 reload nextjs\n```\n\nفعّل `pm2-logrotate` لمنع امتلاء القرص بملفات السجل:\n\n```bash\npm2 install pm2-logrotate\npm2 set pm2-logrotate:max_size 50M\npm2 set pm2-logrotate:retain 7\n```\n\nاحفظ قائمة العمليات بعد كل تغيير: `pm2 save`.",{"type":98,"body":99},"tip","إذا كنت تستخدم ISR، فاربط وحدة تخزين دائمة لمجلد `‎.next\u002Fcache` كي تبقى الصفحات المُعاد التحقق منها بعد عمليات إعادة النشر. وبدون ذلك، تبدأ كل عملية إعادة بناء من ذاكرة مؤقتة فارغة وتسبّب ذروة توليد فوري. ولعدة نسخ Node خلف موازن حِمل، انقل هذه الذاكرة المؤقتة إلى تخزين مشترك أو إلى Redis مع معالِج ذاكرة مؤقتة مخصّص.",{"type":38,"title":101,"body":102},"استكشاف الأخطاء: أخطاء شائعة في الإنتاج","تتكرر ثلاثة إلى خمسة أخطاء بشكل منتظم عند أول نشر لتطبيق Next‎.js على VPS.\n\n**ENOMEM أثناء `npm run build`**\nيُجري بناء Next‎.js التجميع بالتوازي وقد يتجاوز 2 غيغابايت من ذاكرة RAM. إذا توقف البناء بـ`Killed` أو `JavaScript heap out of memory`، ارفع حد الذاكرة:\n\n```bash\nNODE_OPTIONS=\"--max-old-space-size=4096\" npm run build\n```\n\n**Port 3000 already in use**\nعملية PM2 قديمة أو عملية Node يتيمة تستمع بالفعل على المنفذ 3000. حدّدها وأوقفها:\n\n```bash\nlsof -i :3000\nkill -9 \u003CPID>\n```\n\n**MODULE_NOT_FOUND في الإنتاج مع `output: 'standalone'`**\nمجلد `‎.next\u002Fstandalone` يحتوي نسخة من الاعتماديات اللازمة، لكن ليس الأصول الثابتة ولا مجلد `public`. انسخ المجلدات الثلاثة:\n\n```bash\ncp -r ‎.next\u002Fstatic ‎.next\u002Fstandalone\u002F‎.next\u002Fstatic\ncp -r public ‎.next\u002Fstandalone\u002Fpublic\n```\n\n**حلقة إعادة توجيه HTTPS مع `X-Forwarded-Proto`**\nتأكد أن Nginx يُمرّر `X-Forwarded-Proto: https` وأن تطبيقك يقرأ هذه الترويسة لتحديد البروتوكول الفعلي.",{"type":38,"title":104,"body":105},"النسخ الاحتياطي لـ ‎.next\u002Fcache","يحتوي مجلد `‎.next\u002Fcache` على نوعين من البيانات القيّمة: الصفحات ISR المُعاد التحقق منها وذاكرة تجميع Webpack\u002FSWC المؤقتة. فقدان هذه الذاكرة يُجبر Next‎.js على إعادة توليد جميع صفحات ISR فور أول طلب.\n\nأعدّ نسخة احتياطية بسيطة باستخدام `rsync` أو `tar` قبل كل نشر. ذاكرة Webpack المؤقتة تُسرّع عمليات إعادة البناء اللاحقة بشكل ملحوظ — على مشروع متوسط، تستغرق إعادة البناء مع ذاكرة مؤقتة كاملة 40 إلى 60 بالمئة أقل من البناء الأولى.",{"type":38,"title":107,"body":108},"نشر Next‎.js بنقرة واحدة من Marketplace","يوفّر Marketplace من ServOrbit قالب **Next‎.js Stack** الذي يُهيّئ تلقائيًا Node‎.js LTS وPM2 وNginx وPostgreSQL على خادمك الافتراضي. في دقائق قليلة، ستكون بيئة الإنتاج الخاصة بك جاهزة لاستقبال تطبيق React SSR الخاص بك — دون أي إعداد يدوي.\n\nمقارنةً بالتثبيت الموصوف في هذا الدليل، يتولّى القالب الإعداد الأولي ويتيح لك البدء مباشرةً بخطوة «نشر كودك».","بيئة Next.js جاهزة في دقائق","يُهيّئ قالب Next.js Stack تلقائيًا Node.js LTS وPM2 وNginx وPostgreSQL — جاهزًا لاستقبال تطبيق React SSR الخاص بك.","انشر Next.js Stack الخاص بي","\u002Fapplications\u002Fالتطوير\u002Fnextjs-stack",[114,131,149],{"id":115,"slug":116,"slugs":117,"title":121,"excerpt":122,"readTime":23,"views":18,"isPinned":19,"noindex":19,"publishedAt":123,"updatedAt":124,"category":125,"categories":126,"featuredImage":30,"bgImage":31,"posterImage":128,"relatedSolution":129},5,"نشر-laravel-على-خادم-vps-دليل-الإنتاج",{"fr":118,"en":119,"ar":116,"es":120},"deployer-laravel-vps","deploying-laravel-on-a-vps-a-production-guide","desplegar-laravel-en-un-vps","نشر Laravel على خادم VPS: دليل الإنتاج","انقل Laravel إلى بيئة الإنتاج على خادم VPS: PHP وworkers والذاكرة المؤقتة وقاعدة البيانات وreverse proxy وHTTPS مُهيّأة بشكل نظيف.","2026-02-09T00:00:00+00:00","2026-09-07T11:26:10+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[127],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-laravel-vps-poster.svg",{"categorySlug":27,"appSlug":130},"laravel-stack",{"id":132,"slug":133,"slugs":134,"title":138,"excerpt":139,"readTime":140,"views":18,"isPinned":19,"noindex":19,"publishedAt":141,"updatedAt":142,"category":143,"categories":144,"featuredImage":30,"bgImage":31,"posterImage":146,"relatedSolution":147},43,"نشر-تطبيق-nodejs-على-vps",{"fr":135,"en":136,"ar":133,"es":137},"deployer-nodejs-vps","deploy-a-nodejs-application-on-a-vps","desplegar-una-aplicacion-nodejs-en-un-vps","نشر تطبيق Node.js على VPS","انشر تطبيق Node.js في بيئة الإنتاج على VPS: PM2 وبروكسي عكسي Nginx وشهادة SSL من Let's Encrypt وبدء تشغيل تلقائي عند الإقلاع.",8,"2026-05-08T00:00:00+00:00","2026-11-08T01:13:12+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[145],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-nodejs-vps-poster.svg",{"categorySlug":24,"appSlug":148},"nodejs-stack",{"id":150,"slug":151,"slugs":152,"title":156,"excerpt":157,"readTime":158,"views":159,"isPinned":19,"noindex":19,"publishedAt":160,"updatedAt":21,"category":161,"categories":162,"featuredImage":30,"bgImage":31,"posterImage":164,"relatedSolution":165},44,"نشر-تطبيق-django-على-vps",{"fr":153,"en":154,"ar":151,"es":155},"deployer-django-vps","deploy-a-django-application-on-a-vps","desplegar-una-aplicacion-django-en-un-vps","نشر تطبيق Django على VPS","انشر Django على VPS: Gunicorn وNginx وPostgreSQL وDocker وSSL. دليل كامل لمطوّري Python الراغبين في الاستضافة الذاتية.",3,7,"2026-05-07T00:00:00+00:00",{"id":23,"name":24,"slug":25,"color":26,"icon":27},[163],{"id":23,"name":24,"slug":25,"color":26,"icon":27},"\u002Fblog\u002Fcovers\u002Fdeployer-django-vps-poster.svg",{"categorySlug":24,"appSlug":166},"django",true,1794270311830]