إنشاء وتشغيل مشروع Next.js باستخدام ServBay

نظرة عامة

يُعد Next.js إطار عمل قويًا مبنيًا على React وتم تطويره وصيانته من قبل Vercel. يُستخدم الإطار بشكل واسع لبناء تطبيقات ويب حديثة وعالية الأداء، ويوفّر خصائص جاهزة تسهّل على المطورين بناء تطبيقات معقّدة بسرعة وكفاءة.

ما هو Next.js؟

Next.js عبارة عن إطار عمل مفتوح المصدر وشائع مبني على React يدعم العديد من استراتيجيات التصيير مثل التصيير من جهة الخادم (SSR) وتوليد المواقع الثابتة (SSG). تساهم هذه الخصائص في تعزيز أداء التطبيقات، وتحسين تجربة المستخدم، وزيادة ظهور المواقع في محركات البحث. يتضمّن Next.js أنظمة توجيه مبنية على نظام الملفات، ونقاط نهاية API، وتقسيم الكود، ودعم CSS Modules والمزيد من المزايا لتوفير تجربة تطوير متكاملة.

أهم مزايا وخصائص Next.js

• دعم استراتيجيات تصيير متعددة: يدعم التصيير من جهة الخادم (SSR)، توليد المواقع الثابتة (SSG)، التصيير من جهة العميل (CSR)، ويمكن المزج بينها حسب احتياجات المشروع.
• نظام توجيه مبني على الملفات: يُنشئ التوجيه تلقائيًا استنادًا إلى بنية مجلدات pages أو app، وهو بسيط وسهل الفهم.
• توجيه API: يتيح إنشاء نقاط نهاية API بسهولة داخل مشروع Next.js لدعم تطوير الواجهة الأمامية والخلفية من خلال إطار واحد.
• تقسيم الكود تلقائيًا: تقسيم الكود على مستوى الصفحات لتحميل ملفات JavaScript اللازمة فقط للصفحة الحالية، مما ينتج عنه تحسين سرعة التحميل.
• تحسين مكوّن الصور (next/image): تحسين تلقائي لحجم الصور، الصيغة، واستراتيجية التحميل لتعزيز الأداء.
• دعم CSS وSass مدمج: تسهيلات لإدارة وكتابة أنماط التصميم بسهولة.
• تحديث فوري (Fast Refresh): يعرض التغييرات البرمجية في التطوير بشكل فوري تقريبًا.

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

تشغيل مشروع Next.js باستخدام ServBay

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

سيرشدك هذا الدليل خطوة بخطوة لإنشاء مشروع Next.js وتشغيله في وضع التطوير (عبر بروكسي عكسي) ونشره في وضع الإنتاج كـ موقع ثابت عبر ServBay.

المتطلبات الأساسية

قبل البدء، تأكد من:

1. أنّك قمت بتثبيت ServBay بنجاح على نظام macOS.
2. أنك فعّلت حزمة Node.js المطلوبة عبر واجهة إدارة الحزم في ServBay. إذا لم تقم بتثبيت Node.js بعد، يُرجى مراجعة استخدام بيئة Node.js في ServBay.

خطوات التنفيذ

1. إنشاء مشروع Next.js

أولاً، سنقوم بتهيئة مشروع Next.js جديد.

1. افتح الطرفية وانتقل إلى مجلد المواقع الافتراضي المخصّص لـ ServBay:

   cd /Applications/ServBay/www

2. استخدم create-next-app لتهيئة المشروع: نفّذ الأمر التالي لإنشاء مشروع Next.js جديد. ننصح بتسمية المشروع servbay-next-app، حيث سيتم إنشاء مجلد يحمل نفس الاسم تحت /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   أداة npx تُستخدم لتشغيل أوامر حزم Node.js، أما create-next-app@latest فتستخدِم أحدث نسخة من أدوات تهيئة Next.js. اتبع تعليمات الطرفية لإتمام ضبط المشروع (كتحديد ما إذا كنت تود استخدام TypeScript، ESLint، Tailwind CSS، App Router، إلخ).

3. ادخل إلى مجلد المشروع وثبّت التبعيات:

   cd servbay-next-app
   npm install

   باستخدام أمر npm install سيتم تثبيت جميع التبعيات الموجودة في ملف package.json الخاص بالمشروع.

2. تعديل محتوى مخرجات المشروع (اختياري)

للتحقق من نجاح تشغيل المشروع، سنجري تعديلًا بسيطًا على الصفحة الرئيسية.

1. افتح ملف pages/index.js (إذا اخترت Pages Router). أما إذا اخترت App Router، قم بتعديل ملف app/page.js. هنا نستخدم Pages Router كمثال:

   # استخدم محررك المفضل، كمحرر VS Code
   code pages/index.js

2. قم بتعديل محتوى الملف ليعرض على الموقع "Hello ServBay!": استبدل أو عدّل محتوى الملف ليكون مشابهًا لما يلي:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>يتم تشغيل هذه الصفحة عبر ServBay.</p>
       </div>
     );
   }

   إذا كنت تستخدم App Router (app/page.js)، قد يختلف التركيب قليلاً، لكن التعديل الأساسي في محتوى وسم <h1> يبقى نفسه تقريبًا.

3. الدخول إلى وضع التطوير

خلال التطوير، عادة ما نستخدم خادم التطوير المدمج مع Next.js، إذ يدعم تبديل الوحدات الساخن (HMR) والتحديث الفوري لعرض النتائج مباشرة. تسمح لك خاصية البروكسي العكسي في ServBay بربط اسم نطاق محلي مع منفذ تطوير Next.js بسهولة.

1. شغل خادم تطوير Next.js: من جذر المشروع (/Applications/ServBay/www/servbay-next-app)، نفّذ:

   npm run dev -- -p 8585

   هذا الأمر سيُشغّل خادم تطوير Next.js على المنفذ المحلي 8585 (يمكنك اختيار منفذ آخر إذا رغبت).

2. اضبط موقعًا عبر ServBay (بروكسي عكسي): افتح واجهة تطبيق ServBay واذهب إلى إدارة المواقع. أضف موقعًا جديدًا بإعدادات كالتالي:

   • الاسم (Name): My first Next.js dev site (أو أي اسم تفضله)
   • النطاق (Domain): servbay-next-dev.servbay.demo (ننصح دائمًا بنطاق .servbay.demo للاختبارات المحلية)
   • نوع الموقع (Website Type): اختر بروكسي عكسي (Reverse Proxy)
   • عنوان IP للوكيل (Proxy IP): 127.0.0.1 (عنوان الحلقة المحلية)
   • منفذ الوكيل (Proxy Port): 8585 (منفذ خادم Next.js)

   بعد ضبط الإعدادات، احفظ وفعّل التغييرات. سيقوم ServBay تلقائيًا بإعداد Caddy أو Nginx (حسب تفضيلك) للتعامل مع طلبات servbay-next-dev.servbay.demo وتحويلها إلى 127.0.0.1:8585.

   لمزيد من التفاصيل حول الإعداد، راجع إضافة موقع تطوير Node.js عبر ServBay.

3. الدخول لموقع وضع التطوير: افتح متصفح الإنترنت وادخل على النطاق الذي قمت بإعداده: https://servbay-next-dev.servbay.demo.

   بفضل دعم ServBay الافتراضي وتكوينه التلقائي لشهادات SSL لنطاقات الاختبار المحلية (باستخدام ServBay User CA)، يمكنك تصفح موقعك المحلي بأمان عبر HTTPS بلا رسائل تحذير من المتصفح. كذلك يدعم ServBay تخصيص النطاقات وإصدار شهادات SSL مجانية، ما يجعل تجربة التطوير المحلية أكثر راحة.

4. بناء نسخة الإنتاج ونشرها كموقع ثابت

عند اكتمال تطوير مشروع Next.js وأصبح جاهزًا للنشر، عادةً ما نقوم ببناء نسخة إنتاج محسّنة. لمشاريع Next.js التي تنتج مواقع ثابتة (output: 'export' أو باستخدام أمر next export)، تبقى خدمة المواقع الثابتة في ServBay مثالية.

1. بناء نسخة إنتاج وتصدير الملفات الثابتة: من جذر المشروع (/Applications/ServBay/www/servbay-next-app) نفّذ:

   npm run build
   npm run export

   • ينفّذ أمر npm run build عملية ترجمة وتحسين كاملة لمشروع Next.js، ويخرج الملفات النهائية في مجلد .next.
   • يقوم أمر npm run export (أو عبر ضبط output: 'export') بتصدير الموقع بالكامل لملفات HTML وCSS وJS ثابتة، ويحفظها في مجلد out.

2. إعداد موقع ServBay لخدمة الملفات الثابتة: عبر واجهة تطبيق ServBay، ادخل إلى إدارة المواقع. أضف موقعًا جديدًا بالإعدادات التالية:

   • الاسم (Name): My first Next.js production site (أو ما تفضل)
   • النطاق (Domain): servbay-next-prod.servbay.demo (ينصح باستخدام .servbay.demo)
   • نوع الموقع (Website Type): اختر ثابت (Static)
   • الجذر (Website Root): أدخل المسار الكامل لمجلد out الذي يحوي ملفات Next.js المثبتة، مثلاً: /Applications/ServBay/www/servbay-next-app/out.

   بعد ضبط الإعدادات، احفظ وطبّق التغييرات لكي يقدّم خادم الويب الملفات من المجلد الذي تم تصديره مباشرةً.

3. الدخول لموقع الإنتاج: افتح المتصفح وانتقل إلى: https://servbay-next-prod.servbay.demo لتلاحظ محتوى موقعك الثابت والمبني من Next.js.

   كذلك، يسمح لك ServBay باستخدام شهادة SSL تلقائية للنطاق المحلي المُعد، بحيث يوفر الموقع في بيئة الإنتاج المحلية عبر HTTPS بسهولة وموثوقية.

خلاصة

باتباع الخطوات السابقة أصبحت الآن قادرًا على إنشاء مشروع Next.js وتشغيله ضمن بيئة التطوير المحلية ServBay، استعمال خاصية البروكسي العكسي للمعاينة الفورية أثناء التطوير، وأخيرًا نشر الموقع الثابت النهائي باستخدام خدمة الملفات الثابتة الرفيعة من ServBay. تسهّل لك البيئة المتكاملة وأدوات إدارة المواقع في ServBay كثيرًا من عمليات التطوير والاختبار المحلي لمشاريع Next.js.