بناء موقع Jamstack احترافي باستخدام Next.js و Vercel: دليل شامل

تُعد بنية Jamstack مقاربة عصرية لفكرة قديمة: إنشاء مواقع ويب ثابتة وسريعة، ولكن مع إضافة ديناميكية إليها باستخدام أدوات مثل JavaScript. يهدف هذا المقال إلى استكشاف كيفية الاستفادة من إطار عمل الويب Next.js ومنصة الاستضافة Vercel لبناء ونشر تطبيقات ويب عالية الأداء والموثوقية.

ملاحظة: هذا المقال هو جزء من دليل Jamstack Handbook الشامل، والذي يقدم كل ما تحتاج لمعرفته حول Jamstack، ويتضمن ثلاثة دروس تعليمية مفصلة، منها هذا الدرس. احصل على نسختك وتعلم كيفية بناء تطبيقات سريعة وديناميكية باستخدام JavaScript والويب الثابت.

ماذا سنبني في هذا الدليل؟

سيكون مشروعنا بسيطًا نسبيًا. سنستخدم قالب Next.js Starter الافتراضي كنقطة انطلاق سهلة للمشروع، وسنتعلم كيفية تهيئة Next.js للتحويل البرمجي الثابت (statically compile)، ثم سنقوم بنشر هذا المشروع مع تخصيصاتنا على منصة Vercel.

القالب (Starter) هو نموذج جاهز يسمح للمطورين بإنشاء مشروع جديد من سطر الأوامر (command line) بناءً على هذا النموذج. عند تثبيت القالب، يقوم إطار العمل بإعداد المشروع وتثبيت جميع التبعيات (dependencies) المطلوبة تلقائيًا.

الخطوة 1: البدء بتطبيق Next.js React

للبدء، نحتاج أولاً إلى الانتقال إلى المجلد الذي نرغب في إنشاء مشروعنا فيه. سنستخدم قالب Starter لإنشاء المشروع. لدينا خياران لمدير الحزم (package manager) الذي يمكن استخدامه: yarn أو npm. يمكنك اختيار أيهما تفضل استخدامه لبقية هذا الدليل.

yarn create next-app
# or
npx create-next-app

عند تشغيل هذا الأمر، سيطلب منك Next.js أولاً اسم المشروع. يمكننا استخدام أي اسم نريده لتحديد المشروع. سأستخدم اسم my-nextjs-app.

بمجرد الانتهاء من التثبيت، نكون الآن جاهزين للبدء مع Next.js. انتقل في محطتك الطرفية (terminal) إلى المجلد الجديد حيث يوجد مشروعك وقم بتشغيل:

yarn dev
# or
npm run dev

سيؤدي هذا إلى بدء خادم التطوير (development server) الخاص بك، مما سيجعل موقعك الجديد متاحًا على العنوان http://localhost:3000.

إذا فتحت عنوان http://localhost:3000 الخاص بك، يجب أن ترى الآن مشروع Next.js الافتراضي!

الخطوة 2: إعداد المشروع باستخدام Git

ستحتاج إلى إعداد هذه الخطوة بنفسك. قم بإنشاء مستودع (repository) جديد مع مزود Git المفضل لديك والذي تدعمه Vercel. وقت كتابة هذا المقال، تدعم Vercel كلاً من GitHub و GitLab و Bitbucket. إذا كنت تختار مزودًا لأول مرة، فإن GitHub يعد خيارًا قويًا وسهل البدء به.

بعد ذلك، ستحتاج إلى إضافة مشروعك إلى هذا المستودع الجديد ودفعه (push) إلى Git. هل تحتاج إلى مساعدة؟ يمكنك مراجعة دليل “إضافة مشروع موجود إلى GitHub باستخدام سطر الأوامر” هنا. لبقية هذا الدليل، سأشير إلى GitHub، ولكن التعليمات يجب أن تكون هي نفسها لأي مزود مدعوم.

الخطوة 3: نشر Next.js باستخدام Vercel

بمجرد إعداد مشروعك مع GitHub، انتقل إلى موقع vercel.com وقم بتسجيل الدخول. إذا لم يكن لديك حساب Vercel بالفعل، يجب عليك إنشاء واحد الآن. أوصي بإنشاء حساب باستخدام حساب GitHub الخاص بك لأنه سيساعدك في استيراد مشروعك.

داخل لوحة تحكم Vercel، انقر على Import Project (استيراد مشروع).

بعد ذلك، تحت قسم Import Git Repository (استيراد مستودع Git)، انقر على Continue (متابعة).

ستطلب Vercel الآن عنوان URL للمستودع. سيكون هذا هو الصفحة الرئيسية للمستودع الذي أنشأته للتو لمشروعك.

بعد النقر على Continue، اكتشفت Vercel بالفعل أن مشروعك يستخدم Next.js. هذا يعني أننا لا نحتاج إلى إعداد أي تكوينات مخصصة، ويمكننا الضغط على Deploy (نشر)!

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

انقر على Visit (زيارة) وسيتم توجيهك إلى مشروعك المباشر على الإنترنت:

ماذا قمنا بنشره للتو؟

لقد قمنا للتو بإنشاء تطبيق React جديد باستخدام Next.js ونشره على Vercel. دعنا نستعرض كل خطوة محددة:

• إنشاء تطبيق Next.js: قمنا أولاً بإنشاء مشروع Next.js جديد على جهاز الكمبيوتر الخاص بنا. زودنا هذا المشروع بتطبيق React جديد مكتمل بالتبعيات (dependencies) والتعليمات البرمجية للبدء بموقع ويب أساسي.
• إضافة المشروع إلى Git: أضفنا مشروع Next.js الجديد الخاص بنا إلى مستودع Git عبر الإنترنت مدعوم من Vercel. يتيح لنا هذا التفاعل بسهولة مع المشروع باستخدام خدمات أخرى مثل Vercel.
• ربط Git بمنصة Vercel: قمنا باستيراد مشروعنا من Git إلى Vercel. سمح هذا لـ Vercel بالتفاعل مع التعليمات البرمجية الخاصة بنا.
• البناء والنشر باستخدام Vercel: قامت Vercel بتنزيل التعليمات البرمجية الخاصة بنا، وتمكنت من التعرف على أنه مشروع Next.js، وقامت ببناء مشروعنا، ونشرت الناتج المترجم (compiled output) على بنيتها التحتية وجعلته متاحًا على الويب.

إذا كنت تنتظر المزيد من الخطوات لإخراج مشروعك إلى العالم، فلا توجد! لقد أصبح نقطة الدخول لنشر مشروع React جديد أسهل من أي وقت مضى، ويساعدك Next.js و Vercel في تحقيق ذلك.

فهم التكامل المستمر والنشر المستمر (CI/CD) الحديث مع Git

ميزة أخرى لمزودي البنية التحتية الحديثة مثل Vercel، هي أنه عند استخدام GitHub كاتصال خدمة، يمكن لـ Vercel مراقبة التغييرات على فرعنا الرئيسي (main branch). بمجرد أن تتعرف Vercel على حدوث تغيير، ستقوم بتنزيل أحدث التعليمات البرمجية وإعادة تشغيل نفس العملية التي قمنا بها في المرة الأولى (باستثناء أي تخزين مؤقت وتحسينات). هذا يعني أنه في أي وقت نجري فيه تغييرات جديدة على فرع الإنتاج (production branch) الخاص بنا، سيتم نشرها تلقائيًا.

إجراء تغيير ومشاهدة نشره تلقائيًا

لاختبار عمليات النشر التلقائية، دعنا نجري تغييرًا على مشروعنا. داخل مشروعنا، دعنا نجري تغييرًا على بعض محتوى الصفحة داخل الملف pages/index.js. سأقوم بتغيير العنوان إلى “مشروع كولبي Next.js“.

<h1 className={styles.title}> Colby 's Next.js App </h1>

بعد ذلك، قم بتثبيت هذا التغيير (commit) على فرع Git الرئيسي الخاص بك وادفعه (push) إلى GitHub. إذا انتظرت بضع ثوانٍ وعدت إلى vercel.com، ابحث عن مشروعك وانقر على علامة التبويب Deployments (عمليات النشر).

سترى أن مشروعك قيد التشغيل الآن أو ربما يكون قد انتهى بالفعل إذا لم تكن سريعًا بما فيه الكفاية. الآن إذا فتحت رابط موقع الويب الخاص بك مرة أخرى، سترى التغييرات المنشورة!

ماذا تعلمنا من هذا الدليل؟

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

الخلاصة التقنية

يمثل الجمع بين Next.js و Vercel نموذجًا مثاليًا لتطوير الويب الحديث ضمن بنية Jamstack. يوفر Next.js مرونة وقوة في بناء تطبيقات React عالية الأداء، سواء كانت ثابتة بالكامل (SSG) أو تتطلب عرضًا من جانب الخادم (SSR). بينما تكمل Vercel هذه التجربة بتقديم بيئة نشر سلسة ومؤتمتة بالكامل، تدعم التكامل المستمر والنشر المستمر (CI/CD) من خلال ربطها بمستودعات Git. هذا التناغم بين الإطار ومنصة النشر يقلل بشكل كبير من التعقيد ويحسن سرعة التطوير والنشر، مما يتيح للمطورين التركيز على بناء الميزات وتقديم قيمة للمستخدمين، مع ضمان تجربة مستخدم فائقة السرعة والموثوقية.