كيفية نشر تطبيق React المعتمد على React Router على Netlify باحترافية

مقدمة: لماذا يُعد Netlify خياراً ممتازاً لنشر تطبيقات React؟

إذا كنت تبحث عن طريقة سريعة وموثوقة لنشر تطبيق React على الإنترنت، فإن منصة Netlify تُعد من أفضل الخيارات المتاحة، خصوصاً للمشاريع الأمامية والتطبيقات الثابتة. تمتاز المنصة بسهولة الاستخدام، وسرعة النشر، ودعمها الممتاز للتكامل مع مستودعات الشيفرة مثل GitHub وGitLab وBitbucket.

في هذا الدليل، ستتعرّف على أكثر الطرق شيوعاً لنشر تطبيق React على Netlify، كما سنشرح التعديل الضروري لتشغيل التطبيقات التي تعتمد على React Router دون الوقوع في مشكلة ظهور صفحة 404 عند تحديث الصفحة أو زيارة رابط داخلي مباشرة.

أبرز مزايا نشر التطبيقات عبر Netlify

• نشر موقع ثابت خلال ثوانٍ قليلة.
• دعم النشر التلقائي المستمر عند ربط المشروع مع GitHub أو GitLab.
• تقليل احتمالية توقف الموقع أثناء التحديثات الجديدة.
• إمكانية الرجوع إلى أي نسخة منشورة سابقاً بنقرة واحدة.
• معاينة الإصدارات السابقة بسهولة.
• تغيير اسم النطاق الفرعي أو اسم الموقع بسرعة.

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

الطريقة الأولى: رفع مجلد build مباشرة إلى Netlify

هذه هي أسرع طريقة لنشر تطبيق React، وهي مناسبة عندما تريد تجربة النشر فوراً دون إعداد ربط مع مستودع برمجي.

إنشاء مجلد build

من داخل مجلد المشروع، نفّذ أحد الأمرين التاليين:

npm run build

أو:

yarn build

بعد تنفيذ الأمر، سيُنشأ مجلد باسم build يحتوي على النسخة الجاهزة للنشر من التطبيق.

رفع المجلد إلى المنصة

بعد الدخول إلى حسابك في Netlify، يمكنك سحب مجلد build وإفلاته داخل منطقة الرفع ضمن قسم Sites. عندها ستتولى المنصة نشر التطبيق مباشرة.

تمتاز هذه الطريقة بالبساطة، لكنها أقل مرونة من النشر المرتبط بمستودع GitHub، لأنها تتطلب إعادة رفع الملفات يدوياً بعد كل تعديل.

الطريقة الثانية: نشر تطبيق React على Netlify عبر GitHub

تُعد هذه الطريقة الأفضل عملياً، لأنها تفعّل النشر التلقائي مع كل عملية push جديدة إلى المستودع. وهذا يوفّر الوقت، ويجعل إدارة الإصدارات أسهل، ويمنحك إمكانات قوية في التراجع إلى نسخة مستقرة عند الحاجة.

الخطوة 1: تسجيل الدخول وبدء إنشاء موقع جديد

سجّل الدخول إلى حسابك في Netlify، ثم من لوحة التحكم اضغط على زر New site from Git.

الخطوة 2: ربط حساب GitHub

اختر GitHub كمزوّد للمستودع البرمجي.

قد تُفتح نافذة جديدة لإتمام التفويض، لذلك تأكد من تفعيل النوافذ المنبثقة في المتصفح.

الخطوة 3: البحث عن المستودع المطلوب

استخدم مربع البحث Search repos للعثور على المستودع الذي تريد نشره. إذا لم يظهر المستودع، فاضغط على Configure the Netlify app on GitHub لمنح الصلاحيات اللازمة.

بعد ذلك، من قائمة Select repositories اختر المستودع المناسب ثم اضغط Save.

ستعود بعدها إلى صفحة عرض المستودعات المتاحة، ويمكنك البحث مجدداً عن المشروع المطلوب وتحديده.

الخطوة 4: مراجعة إعدادات البناء والنشر

بعد اختيار المستودع، ستظهر لك شاشة إعدادات النشر.

غالباً ستقوم Netlify بتعبئة الحقول تلقائياً، وخاصة:

• Build command
• Publish directory

إذا كان مشروعك يستخدم إعدادات مختلفة داخل ملف package.json، فتأكد من تعديل هذه القيم بما يتوافق مع طريقة البناء الخاصة بك.

بعد ذلك، اضغط على Deploy site.

الخطوة 5: انتظار اكتمال النشر

بمجرد بدء العملية، ستظهر رسالة Site deploy in progress.

انتظر قليلاً حتى يكتمل النشر، ثم ستظهر صفحة تؤكد نجاح العملية.

افتح الرابط الناتج في تبويب جديد، وستجد تطبيقك يعمل مباشرة على الإنترنت.

ميزة مهمة: النشر التلقائي بعد كل تحديث

بعد إتمام الربط مع GitHub، لن تحتاج إلى إعادة النشر يدوياً. يكفي أن تعدّل الشيفرة المصدرية، ثم تنفّذ عملية push إلى المستودع، وستكتشف Netlify التحديث تلقائياً وتبدأ نشر النسخة الجديدة.

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

المشكلة الشائعة: خطأ Page Not Found في تطبيقات React Router

قد يبدو التطبيق سليماً عند التنقل داخلياً بين الصفحات، لكن عند تحديث صفحة مثل /add أو زيارة هذا الرابط مباشرة، ستظهر لك صفحة خطأ تفيد بأن المسار غير موجود.

لماذا تحدث هذه المشكلة؟

عند تشغيل التطبيق محلياً، يتولى React Router إدارة التنقل بين المسارات داخل المتصفح. لكن بعد النشر على الخادم، فإن الوصول المباشر إلى رابط مثل /add يرسل الطلب إلى الخادم نفسه، وليس إلى التطبيق فقط.

وبما أن الخادم لا يملك ملفاً أو معالجاً خاصاً بهذا المسار، فإنه يعرض خطأ 404. هذه المشكلة شائعة في تطبيقات Single Page Application التي تعتمد على التوجيه من جهة العميل.

الحل الصحيح: إنشاء ملف _redirects داخل public

لحل المشكلة في Netlify، أنشئ ملفاً جديداً باسم _redirects داخل مجلد public في المشروع، ثم أضف إليه السطر التالي:

/* /index.html 200

ماذا يفعل هذا السطر؟

هذا الإعداد يخبر Netlify بأن أي طلب لأي مسار يجب أن يُعاد توجيهه إلى ملف index.html مع حالة نجاح 200.

وبما أن ملف index.html يحتوي على تطبيق React بالكامل بعد عملية البناء، فإن React Router سيستلم المسار ويعرض الصفحة الصحيحة من داخل التطبيق دون ظهور خطأ.

عند تنفيذ أمر البناء مثل yarn build أو npm run build، يتم نسخ هذا الملف إلى مجلد الإخراج النهائي، وبالتالي تعتمد عليه Netlify أثناء النشر.

بعد إضافة الملف

1. احفظ التغييرات داخل المشروع.
2. ادفع التحديثات إلى GitHub عبر push.
3. انتظر حتى تنتهي Netlify من إعادة النشر.
4. اختبر تحديث أي مسار داخلي مثل /add أو /edit.

بعد ذلك ستلاحظ أن التطبيق يعمل بصورة سليمة دون ظهور صفحة غير موجودة.

كيفية تغيير اسم الموقع بسهولة في Netlify

بعد نشر الموقع، قد تحصل على اسم عشوائي أو غير سهل التذكر. ولحسن الحظ، تتيح Netlify تغيير اسم الموقع بسرعة ليصبح أكثر وضوحاً واحترافية.

خطوات تغيير الاسم

1. انتقل إلى صفحة الموقع داخل Netlify.
2. اضغط على Site settings من قسم Site overview.
3. اختر Change site name.
4. أدخل الاسم الجديد ثم اضغط Save.

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

نصائح عملية لتحسين تجربة النشر

• تأكد من أن أوامر البناء داخل package.json صحيحة ومحدثة.
• راجع محتوى مجلد public قبل النشر، خصوصاً ملف _redirects.
• استخدم أسماء واضحة للمواقع والمستودعات لتسهيل الإدارة لاحقاً.
• اختبر الروابط الداخلية عبر التحديث المباشر بعد كل نشر جديد.
• استفد من سجل النشر داخل Netlify لتشخيص الأخطاء بسرعة.

متى تختار الرفع اليدوي ومتى تختار الربط مع GitHub؟

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

نشر تطبيق React على Netlify عملية بسيطة جداً، لكن التطبيقات المعتمدة على React Router تحتاج إلى خطوة إضافية أساسية، وهي إعداد ملف _redirects بالشكل الصحيح. من الناحية التقنية، هذا الإجراء يضمن توجيه جميع الطلبات إلى index.html بحيث يستكمل التطبيق إدارة المسارات من جهة العميل. إذا كنت تريد نشر مشروع احترافي مستقر وسهل الصيانة، فإن الربط بين Netlify وGitHub مع إعداد إعادة التوجيه هو الخيار الأمثل بلا شك.