قائمة التحقق للإنتاج

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

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

التحسينات التلقائية

هذه التحسينات في Next.js مفعلة افتراضيًا ولا تتطلب أي تكوين:

• مكونات الخادم (Server Components): يستخدم Next.js مكونات الخادم افتراضيًا. تعمل مكونات الخادم على الخادم ولا تتطلب JavaScript للعرض على العميل. وبالتالي، ليس لها أي تأثير على حجم حزم JavaScript الخاصة بالعميل. يمكنك بعد ذلك استخدام مكونات العميل (Client Components) حسب الحاجة للتفاعلية.
• تقسيم الكود (Code-splitting): تمكن مكونات الخادم من تقسيم الكود تلقائيًا حسب مقاطع المسار. يمكنك أيضًا التفكير في التحميل البطيء (lazy loading) لمكونات العميل ومكتبات الطرف الثالث، حيثما كان ذلك مناسبًا.
• الجلب المسبق (Prefetching): عندما يدخل رابط لمسار جديد في نطاق رؤية المستخدم، يقوم Next.js بجلب المسار مسبقًا في الخلفية. هذا يجعل التنقل إلى المسارات الجديدة شبه فوري. يمكنك إلغاء تفعيل الجلب المسبق، حيثما كان ذلك مناسبًا.
• العرض الثابت (Static Rendering): يقوم Next.js بعرض مكونات الخادم والعميل بشكل ثابت على الخادم أثناء البناء ويخزن النتيجة المعروضة لتحسين أداء تطبيقك. يمكنك اختيار العرض الديناميكي (Dynamic Rendering) لمسارات محددة، حيثما كان ذلك مناسبًا.
• التخزين المؤقت (Caching): يقوم Next.js بتخزين طلبات البيانات، والنتيجة المعروضة لمكونات الخادم والعميل، والأصول الثابتة، والمزيد، لتقليل عدد طلبات الشبكة إلى خادمك وقاعدة البيانات وخدمات الخلفية. يمكنك إلغاء تفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا.

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

أثناء التطوير

أثناء بناء تطبيقك، نوصي باستخدام الميزات التالية لضمان أفضل أداء وتجربة مستخدم:

التوجيه والعرض

• التخطيطات (Layouts): استخدم التخطيطات لمشاركة واجهة المستخدم عبر الصفحات وتمكين العرض الجزئي (partial rendering) أثناء التنقل.
• مكون <Link>: استخدم مكون <Link> لـالتنقل من جانب العميل والجلب المسبق.
• معالجة الأخطاء (Error Handling): تعامل مع الأخطاء الشاملة (catch-all errors) وأخطاء 404 في الإنتاج بإنشاء صفحات أخطاء مخصصة.
• أنماط التكوين (Composition Patterns): اتبع أنماط التكوين الموصى بها لمكونات الخادم والعميل، وتحقق من وضع حدود "use client" لتجنب زيادة حجم حزمة JavaScript الخاصة بالعميل بشكل غير ضروري.
• الوظائف الديناميكية (Dynamic Functions): كن على علم بأن الوظائف الديناميكية مثل cookies() وخاصية searchParams ستجعل المسار بأكمله يعمل في وضع العرض الديناميكي (Dynamic Rendering) (أو تطبيقك بالكامل إذا تم استخدامها في التخطيط الجذري (Root Layout)). تأكد من أن استخدام الوظائف الديناميكية مقصود وقم بتغليفها في حدود <Suspense> حيثما كان ذلك مناسبًا.

معلومة مفيدة: التقديم المسبق الجزئي (Partial Prerendering) (تجريبي) سيسمح لأجزاء من المسار أن تكون ديناميكية دون جعل المسار بأكمله يعمل في وضع العرض الديناميكي.

جلب البيانات والتخزين المؤقت

• مكونات الخادم (Server Components): استفد من مزايا جلب البيانات على الخادم باستخدام مكونات الخادم.
• معالجات المسار (Route Handlers): استخدم معالجات المسار للوصول إلى موارد الخلفية من مكونات العميل. ولكن لا تستدعي معالجات المسار من مكونات الخادم لتجنب طلب خادم إضافي.
• البث (Streaming): استخدم واجهة تحميل وReact Suspense لإرسال واجهة المستخدم تدريجيًا من الخادم إلى العميل، ومنع حظر المسار بأكمله أثناء جلب البيانات.
• جلب البيانات المتوازي (Parallel Data Fetching): قلل من شلالات الشبكة بجلب البيانات بشكل متوازي، حيثما كان ذلك مناسبًا. أيضًا، فكر في جلب البيانات مسبقًا (preloading data) حيثما كان ذلك مناسبًا.
• تخزين البيانات المؤقت (Data Caching): تحقق مما إذا كانت طلبات البيانات الخاصة بك مخزنة مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا. تأكد من أن الطلبات التي لا تستخدم fetch مخزنة مؤقتًا.
• الصور الثابتة (Static Images): استخدم دليل public لتخزين الأصول الثابتة لتطبيقك مؤقتًا تلقائيًا، مثل الصور.

واجهة المستخدم وإمكانية الوصول

• النماذج والتحقق (Forms and Validation): استخدم إجراءات الخادم لمعالجة إرسال النماذج، والتحقق من جانب الخادم، ومعالجة الأخطاء.

• وحدة الخطوط (Font Module): حسّن الخطوط باستخدام وحدة الخطوط، التي تستضيف ملفات الخطوط تلقائيًا مع الأصول الثابتة الأخرى، وتزيل طلبات الشبكة الخارجية، وتقلل من انزياح التخطيط (layout shift).
• مكون <Image>: حسّن الصور باستخدام مكون الصورة، الذي يحسن الصور تلقائيًا، ويمنع انزياح التخطيط، ويقدمها بتنسيقات حديثة مثل WebP أو AVIF.
• مكون <Script>: حسّن نصوص الطرف الثالث باستخدام مكون النص، الذي يؤجل النصوص تلقائيًا ويمنعها من حظر الخيط الرئيسي.
• ESLint: استخدم المكون الإضافي المدمج eslint-plugin-jsx-a11y لاكتشاف مشكلات إمكانية الوصول مبكرًا.

الأمان

• التلويث (Tainting): امنع الكشف عن البيانات الحساسة للعميل عن طريق تلويث كائنات البيانات و/أو قيم محددة.
• إجراءات الخادم (Server Actions): تأكد من أن المستخدمين مصرح لهم باستدعاء إجراءات الخادم. راجع ممارسات الأمان الموصى بها.

• متغيرات البيئة (Environment Variables): تأكد من إضافة ملفات .env.* إلى .gitignore وأن المتغيرات العامة فقط مسبوقة بـ NEXT_PUBLIC_.
• سياسة أمان المحتوى (Content Security Policy): فكر في إضافة سياسة أمان المحتوى لحماية تطبيقك من التهديدات الأمنية المختلفة مثل حقن النصوص عبر المواقع (cross-site scripting)، والتصيد بالنقر (clickjacking)، وهجمات حقن التعليمات البرمجية الأخرى.

البيانات الوصفية وتحسين محركات البحث (SEO)

• واجهة برمجة تطبيقات البيانات الوصفية (Metadata API): استخدم واجهة برمجة تطبيقات البيانات الوصفية لتحسين تحسين محركات البحث (SEO) لتطبيقك عن طريق إضافة عناوين الصفحات والأوصاف والمزيد.
• صور Open Graph (OG): أنشئ صور OG لإعداد تطبيقك للمشاركة الاجتماعية.
• خرائط الموقع (Sitemaps) وملفات الروبوتات (Robots): ساعد محركات البحث في الزحف إلى صفحاتك وفهرستها عن طريق إنشاء خرائط مواقع وملفات روبوتات.

سلامة الأنواع

• TypeScript والمكون الإضافي لـ TS: استخدم TypeScript والمكون الإضافي لـ TypeScript لتحسين سلامة الأنواع، ولمساعدتك في اكتشاف الأخطاء مبكرًا.

قبل الانتقال للإنتاج

قبل الانتقال للإنتاج، يمكنك تشغيل next build لبناء تطبيقك محليًا واكتشاف أي أخطاء في البناء، ثم تشغيل next start لقياس أداء تطبيقك في بيئة تشبه بيئة الإنتاج.

مؤشرات الويب الأساسية (Core Web Vitals)

• Lighthouse: شغّل Lighthouse في وضع التصفح المتخفي لفهم أفضل لكيفية تجربة المستخدمين لموقعك، ولتحديد مجالات التحسين. هذا اختبار محاكاة ويجب أن يقترن بفحص بيانات الميدان (مثل مؤشرات الويب الأساسية).

• خطاف useReportWebVitals: استخدم هذا الخطاف لإرسال بيانات مؤشرات الويب الأساسية (Core Web Vitals) إلى أدوات التحليلات.

تحليل الحزم

استخدم المكون الإضافي @next/bundle-analyzer لتحليل حجم حزم JavaScript الخاصة بك وتحديد الوحدات الكبيرة والتبعيات التي قد تؤثر على أداء تطبيقك.

بالإضافة إلى ذلك، يمكن للأدوات التالية مساعدتك في فهم تأثير إضافة تبعيات جديدة إلى تطبيقك:

• Import Cost
• Package Phobia
• Bundle Phobia
• bundlejs

بعد النشر

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

لنشرات Vercel، نوصي بما يلي:

• التحليلات: لوحة تحليلات مدمجة لمساعدتك في فهم حركة مرور تطبيقك، بما في ذلك عدد الزوار الفريدين، ومشاهدات الصفحات، والمزيد.
• Speed Insights: رؤى أداء واقعية بناءً على بيانات الزوار، تقدم رؤية عملية لكيفية أداء موقعك في الميدان.
• التسجيل: سجلات وقت التشغيل والنشاط لمساعدتك في تصحيح الأخطاء ومراقبة تطبيقك في الإنتاج. بدلاً من ذلك، راجع صفحة التكاملات للحصول على قائمة بأدوات وخدمات الطرف الثالث.

معلومة مفيدة:

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

اتباع هذه التوصيات سيساعدك في بناء تطبيق أسرع وأكثر موثوقية وأمانًا لمستخدميك.