إنشاء وتشغيل مشروع Next.js

ما هو Next.js؟

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

الميزات الرئيسية والمزايا لـ Next.js

• التصيير على جانب الخادم (SSR): يزيد من سرعة تحميل الصفحات ويُحسّن أداء تحسين محركات البحث (SEO).
• توليد الموقع الثابت (SSG): يقدّم صفحات ثابتة مسبقة التصيير، مما يحسن الأداء وتجربة المستخدم.
• تقسيم الأكواد التلقائي: يتم تحميل كود JavaScript المطلوب فقط للصفحة الحالية، مما يحسن الأداء.
• التوجيه المدمج: يعتمد على نظام ملفات التوجيه، دون الحاجة إلى إعداد إضافي.
• مسارات API: يمكن إنشاء نقاط نهائية لـ API ضمن نفس المشروع.
• دعم CSS وSass المدمج: يسهل إدارة الأنماط.

استخدام Next.js يمكن أن يساعد المطورين في بناء تطبيقات ويب حديثة وسريعة الاستجابة بكفاءة أكبر.

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

في هذه المقالة، سنستخدم بيئة Node.js التي توفرها ServBay لإنشاء وتشغيل مشروع Next.js. سنستخدم وظيفة "المضيف" في ServBay لإعداد خادم الويب، وتحقيق وصول المشروع من خلال الوكيل العكسي وخدمة الملفات الثابتة.

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

1. تهيئة المشروع

   أولاً، تأكد من أنك قد قمت بتثبيت بيئة Node.js التي توفرها ServBay. ثم، استخدم الأوامر التالية لتهيئة مشروع Next.js جديد:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   أدخل اسم المشروع كما هو مطلوب (يوصى بتسميته servbay-next-app)، واختر الخيارات الأخرى حسب الحاجة.

2. تثبيت التبعيات

   أدخل إلى دليل المشروع وقم بتثبيت التبعيات:

   cd servbay-next-app
   npm install

تعديل محتوى خرج مشروع Next.js

1. تعديل ملف pages/index.js

   افتح ملف pages/index.js، وعدّل المحتوى لجعل صفحة الويب تعرض "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

الدخول في وضع التطوير

1. تشغيل خادم التطوير

   ابدأ خادم التطوير وحدد المنفذ (مثلًا: 8585):

   npm run dev -- -p 8585

   سيتم تشغيل خادم تطوير محلي وسيتم فتح المنفذ 8585.

2. تكوين وكيل عكسي في ServBay المضيف

   استخدم وظيفة "المضيف" في ServBay للوصول إلى خادم التطوير من خلال الوكيل العكسي. في إعدادات "المضيف" في ServBay، أضف وكيلًا عكسيًا جديدًا:

   • الاسم: موقع تطوير Next.js الأول
   • اسم النطاق: servbay-next-test.dev
   • نوع المضيف: وكيل عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

   يمكن العثور على الخطوات التفصيلية في إضافة موقع Nodejs التطويري.

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

   افتح المتصفح، وقم بزيارة https://servbay-next-test.dev لمشاهدة المشروع في الوقت الفعلي. بفضل دعم ServBay لأسماء النطاقات المخصصة وشهادات SSL المجانية، ستحصل على أمان أعلى.

بناء نسخة الإنتاج

1. بناء نسخة الإنتاج

   عندما تنتهي من التطوير، استخدم الأوامر التالية لبناء نسخة الإنتاج:

   npm run build
   npm run export

   بعد اكتمال البناء، سيتم وضع الملفات الثابتة في دليل out.

2. إعداد خدمة الملفات الثابتة

   استخدم وظيفة "المضيف" في ServBay للوصول إلى نسخة الإنتاج من خلال خدمة الملفات الثابتة. في إعدادات "المضيف" في ServBay، أضف موقعًا ثابتًا جديدًا:

   • الاسم: موقع إنتاج Next.js الأول
   • اسم النطاق: servbay-next-test.prod
   • نوع المضيف: ثابت
   • دليل الجذر للموقع: /Applications/ServBay/www/servbay-next-app/out

3. الوصول إلى وضع الإنتاج

   افتح المتصفح، وقم بزيارة https://servbay-next-test.prod لمشاهدة نسخة الإنتاج المبنية. بفضل نطاقات ServBay المخصصة وشهادات SSL المجانية، سيكون موقعك أكثر أمانًا وموثوقية.

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