قائمة التحقق للإنتاج
قبل نشر تطبيق Next.js الخاص بك في بيئة الإنتاج، هناك بعض التحسينات والأنماط التي يجب مراعاتها لتحقيق أفضل تجربة مستخدم وأداء وأمان.
توفر هذه الصفحة أفضل الممارسات التي يمكنك استخدامها كمرجع عند بناء تطبيقك، قبل الانتقال للإنتاج، وبعد النشر - بالإضافة إلى تحسينات Next.js التلقائية التي يجب أن تكون على علم بها.
التحسينات التلقائية
هذه التحسينات في Next.js مفعلة افتراضيًا ولا تتطلب أي تكوين:
- تقسيم الكود (Code-splitting): يقوم Next.js بتقسيم كود تطبيقك تلقائيًا حسب الصفحات. هذا يعني أنه يتم تحميل الكود المطلوب للصفحة الحالية فقط أثناء التنقل. يمكنك أيضًا التفكير في التحميل البطيء (lazy loading) لمكتبات الطرف الثالث، حيثما كان ذلك مناسبًا.
- الجلب المسبق (Prefetching): عندما يدخل رابط لمسار جديد في نطاق رؤية المستخدم، يقوم Next.js بجلب المسار مسبقًا في الخلفية. هذا يجعل التنقل إلى المسارات الجديدة شبه فوري. يمكنك إلغاء تفعيل الجلب المسبق، حيثما كان ذلك مناسبًا.
- التحسين الثابت التلقائي (Automatic Static Optimization): يحدد Next.js تلقائيًا ما إذا كانت الصفحة ثابتة (يمكن تقديمها مسبقًا) إذا لم يكن لديها متطلبات بيانات حظر. يمكن تخزين الصفحات المحسنة وعرضها للمستخدم النهائي من مواقع CDN متعددة. يمكنك اختيار العرض من جانب الخادم (Server-side Rendering)، حيثما كان ذلك مناسبًا.
تهدف هذه الإعدادات الافتراضية إلى تحسين أداء تطبيقك، وتقليل التكلفة وكمية البيانات المنقولة في كل طلب شبكة.
أثناء التطوير
أثناء بناء تطبيقك، نوصي باستخدام الميزات التالية لضمان أفضل أداء وتجربة مستخدم:
التوجيه والعرض
- مكون
<Link>: استخدم مكون<Link>للتنقل من جانب العميل والجلب المسبق. - الأخطاء المخصصة (Custom Errors): تعامل مع أخطاء 500 و404 بشكل أنيق.
جلب البيانات والتخزين المؤقت
- مسارات API (API Routes): استخدم معالجات المسار للوصول إلى موارد الخلفية، ومنع الكشف عن الأسرار الحساسة للعميل.
- تخزين البيانات المؤقت (Data Caching): تحقق مما إذا كانت طلبات البيانات الخاصة بك مخزنة مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا. تأكد من أن الطلبات التي لا تستخدم
getStaticPropsمخزنة مؤقتًا حيثما كان ذلك مناسبًا. - التجديد الثابت التدريجي (Incremental Static Regeneration): استخدم التجديد الثابت التدريجي لتحديث الصفحات الثابتة بعد بنائها، دون إعادة بناء موقعك بالكامل.
- الصور الثابتة (Static Images): استخدم دليل
publicلتخزين الأصول الثابتة لتطبيقك مؤقتًا تلقائيًا، مثل الصور.
واجهة المستخدم وإمكانية الوصول
- وحدة الخطوط (Font Module): حسّن الخطوط باستخدام وحدة الخطوط، التي تستضيف ملفات الخطوط تلقائيًا مع الأصول الثابتة الأخرى، وتزيل طلبات الشبكة الخارجية، وتقلل من انزياح التخطيط (layout shift).
- مكون
<Image>: حسّن الصور باستخدام مكون الصورة، الذي يحسن الصور تلقائيًا، ويمنع انزياح التخطيط، ويقدمها بتنسيقات حديثة مثل WebP أو AVIF. - مكون
<Script>: حسّن نصوص الطرف الثالث باستخدام مكون النص، الذي يؤجل النصوص تلقائيًا ويمنعها من حظر الخيط الرئيسي. - ESLint: استخدم المكون الإضافي المدمج
eslint-plugin-jsx-a11yلاكتشاف مشكلات إمكانية الوصول مبكرًا.
الأمان
- متغيرات البيئة (Environment Variables): تأكد من إضافة ملفات
.env.*إلى.gitignoreوأن المتغيرات العامة فقط مسبوقة بـNEXT_PUBLIC_. - سياسة أمان المحتوى (Content Security Policy): فكر في إضافة سياسة أمان المحتوى لحماية تطبيقك من التهديدات الأمنية المختلفة مثل حقن النصوص عبر المواقع (cross-site scripting)، والتصيد بالنقر (clickjacking)، وهجمات حقن التعليمات البرمجية الأخرى.
البيانات الوصفية وتحسين محركات البحث (SEO)
- مكون
<Head>: استخدم مكونnext/headلإضافة عناوين الصفحات والأوصاف والمزيد.
سلامة الأنواع
- TypeScript والمكون الإضافي لـ TS: استخدم TypeScript والمكون الإضافي لـ TypeScript لتحسين سلامة الأنواع، ولمساعدتك في اكتشاف الأخطاء مبكرًا.
قبل الانتقال للإنتاج
قبل الانتقال للإنتاج، يمكنك تشغيل next build لبناء تطبيقك محليًا واكتشاف أي أخطاء في البناء، ثم تشغيل next start لقياس أداء تطبيقك في بيئة تشبه بيئة الإنتاج.
مؤشرات الويب الأساسية (Core Web Vitals)
- Lighthouse: شغّل Lighthouse في وضع التصفح المتخفي لفهم أفضل لكيفية تجربة المستخدمين لموقعك، ولتحديد مجالات التحسين. هذا اختبار محاكاة ويجب أن يقترن بفحص بيانات الميدان (مثل مؤشرات الويب الأساسية).
تحليل الحزم
استخدم المكون الإضافي @next/bundle-analyzer لتحليل حجم حزم JavaScript الخاصة بك وتحديد الوحدات الكبيرة والتبعيات التي قد تؤثر على أداء تطبيقك.
بالإضافة إلى ذلك، يمكن للأدوات التالية مساعدتك في فهم تأثير إضافة تبعيات جديدة إلى تطبيقك:
بعد النشر
اعتمادًا على مكان نشر تطبيقك، قد يكون لديك إمكانية الوصول إلى أدوات وتكاملات إضافية لمساعدتك في مراقبة وتحسين أداء تطبيقك.
لنشرات Vercel، نوصي بما يلي:
- التحليلات: لوحة تحليلات مدمجة لمساعدتك في فهم حركة مرور تطبيقك، بما في ذلك عدد الزوار الفريدين، ومشاهدات الصفحات، والمزيد.
- Speed Insights: رؤى أداء واقعية بناءً على بيانات الزوار، تقدم رؤية عملية لكيفية أداء موقعك في الميدان.
- التسجيل: سجلات وقت التشغيل والنشاط لمساعدتك في تصحيح الأخطاء ومراقبة تطبيقك في الإنتاج. بدلاً من ذلك، راجع صفحة التكاملات للحصول على قائمة بأدوات وخدمات الطرف الثالث.
معلومة مفيدة:
للحصول على فهم شامل لأفضل الممارسات لنشرات الإنتاج على Vercel، بما في ذلك الاستراتيجيات التفصيلية لتحسين أداء الموقع، راجع قائمة التحقق للإنتاج لـ Vercel.
اتباع هذه التوصيات سيساعدك في بناء تطبيق أسرع وأكثر موثوقية وأمانًا لمستخدميك.