استضافة Next.js على Droplet مع تثبيت ووردبريس موجود

تعتبر عملية استضافة تطبيقات Next.js على خوادم مختلطة، مثل تلك التي تحتوي على تثبيتات فعالة لنظام إدارة المحتوى ووردبريس، تحديًا يتطلب بعض التخطيط والمعرفة التقنية. إذا كنت قد قمت بإعداد Droplet وتعمل فيه ووردبريس بشكل سلس، فقد تكون لديك الرغبة في استضافة تطبيق Next.js على نفس الخادم. في هذا المقال، سنستعرض الخطوات اللازمة لتحقيق ذلك وسنقدم نصائح قيمة لتحقيق تجربة سلسة وناجحة.

متطلبات أساسية قبل البدء

قبل أن نبدأ في عملية الإعداد، من المهم التأكد من أن لديك متطلبات أساسية. يجب أن يكون لديك:

1. خادم Droplet: تأكد من أن لديك خادم Droplet ذو مواصفات كافية لتحمل تطبيق Next.js بالإضافة إلى ووردبريس.
2. بيئة العمل: تأكد من أنك تمتلك Node.js و npm مثبتين على سيرفرك. يمكن تثبيتهما عن طريق الأوامر التالية:

   sudo apt update
   sudo apt install nodejs npm

تثبيت Next.js على خادم Droplet

بمجرد أن تكون مستعدًا، يمكنك البدء في تثبيت Next.js. يمكنك استخدام مدير الحزم npm لإنشاء تطبيق جديد. اتبع الخطوات التالية:

1. إنشاء مشروع Next.js: داخل المجلد الذي تريده، اكتب الأمر التالي:

   npx create-next-app@latest my-next-app

2. تنزيل المتطلبات: انتقل إلى المجلد الخاص بالتطبيق الذي أنشأته:

   cd my-next-app

3. تشغيل التطبيق: يمكنك الآن تشغيل التطبيق باستخدام الأمر التالي:

   npm run dev

ستتمكن الآن من الوصول إلى تطبيق Next.js من خلال متصفح الويب عبر الرابط localhost:3000.

دمج Next.js مع ووردبريس

بعد أن قمت بتثبيت التطبيق، يحتاج الأمر إلى ربطه بووردبريس. يمكنك استخدام REST API الخاص بووردبريس للوصول إلى المحتوى. هذا يعني أنك ستحتاج إلى إجراء بعض التعديلات على التطبيق Next.js ليتمكن من استخدام البيانات من ووردبريس.

1. تكوين الاتصال: افتح ملف pages/index.js الخاص بتطبيق Next.js. قم بتعديل الكود لاستيراد المكتبات اللازمة للاتصال بـ WordPress REST API.

2. جلب البيانات: استخدم getStaticProps لجلب البيانات من واجهة برمجية ووردبريس الخاصة بك. كود بسيط يمكن أن يبدو كالتالي:

   export async function getStaticProps() {
    const res = await fetch('https://yourwordpresssite.com/wp-json/wp/v2/posts');
    const posts = await res.json();
    return {
      props: {
        posts,
      },
    };
   }

3. عرض المحتوى: بعد الحصول على البيانات، يمكنك عرضها في مكونات React الخاصة بك.

إعداد الوكيل العكسي (Reverse Proxy)

لإعداد اتصال بين خادم Next.js وووردبريس على نفس Droplet، ستحتاج إلى إعداد وكيل عكسي. يمكنك استخدام Nginx لهذه المهمة. اتبع الخطوات التالية:

1. تثبيت Nginx:

   sudo apt install nginx

2. تكوين ملف Nginx: افتح ملف الإعدادات الخاص بموقعك على Nginx:

   sudo nano /etc/nginx/sites-available/default

3. تعديل إعدادات الخادم: أضف القواعد التالية لتوجيه الطلبات بشكل صحيح:

   server {
      listen 80;
      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;
      }
      location /wp {
          proxy_pass http://localhost:80; # Assuming WordPress is running here
      }
   }

4. إعادة تشغيل Nginx:

   sudo systemctl restart nginx

اختبار التطبيق

مع الانتهاء من كل هذه الخطوات، يمكنك الآن اختبار التطبيق. افتح المتصفح وانتقل إلى عنوان Droplet الخاص بك. يجب أن تتمكن من رؤية تطبيق Next.js يعمل بجوار ووردبريس.

استنتاج

عند اتباع الإجراءات الصحيحة، يمكنك بكل سهولة استضافة تطبيق Next.js على Droplet يحتوي على تثبيت ووردبريس قائم. تتيح لك هذه العملية الاستفادة من قوة تطبيقات Next.js الحديثة مع ميزات ووردبريس الشهيرة.

إذا كنت تواجه أي عقبات خلال هذه العملية، فكر في مراجعة الملفات أو الاستعانة بالمجتمع عبر المنتديات للحصول على دعم إضافي.