Next.js و Vercel

Vercel تم تطويرها من قبل مبتكري Next.js وتوفر دعمًا ممتازًا لـ Next.js. عند نشر تطبيق Next.js الخاص بك على Vercel، يحدث ما يلي افتراضيًا:

• الصفحات التي تستخدم التوليد الثابت (Static Generation) والأصول (JS، CSS، الصور، الخطوط، إلخ) سيتم تقديمها تلقائيًا من شبكة توصيل المحتوى (CDN) الخاصة بـ Vercel، والتي تتميز بسرعة فائقة.
• الصفحات التي تستخدم العرض من جانب الخادم (Server-Side Rendering) ومسارات API ستصبح تلقائيًا وظائف بدون خادم (Serverless Functions) معزولة. هذا يسمح بتوسيع نطاق عرض الصفحات وطلبات API إلى ما لا نهاية.

تقدم Vercel العديد من الميزات الإضافية، مثل:

• النطاقات المخصصة: بمجرد النشر على Vercel، يمكنك تعيين نطاق مخصص لتطبيق Next.js الخاص بك. راجع توثيقنا هنا.

• متغيرات البيئة: يمكنك أيضًا تعيين متغيرات البيئة على Vercel. راجع توثيقنا هنا. ثم يمكنك استخدام هذه المتغيرات البيئية في تطبيق Next.js الخاص بك.

• HTTPS التلقائي: يتم تمكين HTTPS افتراضيًا (بما في ذلك النطاقات المخصصة) ولا يتطلب تكوينًا إضافيًا. نقوم بتجديد شهادات SSL تلقائيًا.

يمكنك معرفة المزيد عن المنصة في توثيق Vercel.

نشر المعاينة لكل تغيير

الخطوات التالية اختيارية — يمكنك تجربتها أو مجرد قراءتها.

بعد النشر على Vercel، حاول القيام بما يلي إذا استطعت:

• إنشاء فرع جديد في تطبيقك.
• إجراء بعض التغييرات ودفعها إلى GitHub.
• إنشاء طلب سحب (pull request) جديد (صفحة مساعدة GitHub).

يجب أن ترى تعليقًا من بوت vercel في صفحة طلب السحب.

حاول النقر على رابط المعاينة داخل هذا التعليق. يجب أن ترى التغييرات التي أجريتها للتو.

عندما يكون لديك طلب سحب مفتوح، تقوم Vercel تلقائيًا بإنشاء نشر معاينة لهذا الفرع مع كل تغيير. سيشير رابط المعاينة دائمًا إلى أحدث نشر معاينة.

يمكنك مشاركة رابط المعاينة هذا مع زملائك والحصول على ملاحظات فورية.

إذا بدا نشر المعاينة جيدًا، قم بدمجه مع الفرع الرئيسي main. عند القيام بذلك، تقوم Vercel تلقائيًا بإنشاء نشر للإنتاج.

تطوير، معاينة، نشر

لقد مررنا للتو بسير العمل الذي نسميه DPS: Develop (تطوير)، Preview (معاينة)، و Ship (نشر).

• التطوير: قمنا بكتابة التعليمات البرمجية في Next.js واستخدمنا خادم التطوير الخاص بـ Next.js للاستفادة من ميزة إعادة التحميل السريع.
• المعاينة: قمنا بدفع التغييرات إلى فرع على GitHub، وقامت Vercel بإنشاء نشر معاينة متاح عبر رابط. يمكننا مشاركة رابط المعاينة هذا مع الآخرين للحصول على ملاحظات. بالإضافة إلى مراجعة التعليمات البرمجية، يمكنك معاينة النشر.
• النشر: قمنا بدمج طلب السحب مع الفرع الرئيسي main للنشر في الإنتاج.

نوصي بشدة باستخدام سير العمل هذا عند تطوير تطبيقات Next.js — سيساعدك على التكرار بشكل أسرع في تطبيقك.