كيفية تحسين تطبيق Next.js للإنتاج
قبل نشر تطبيق 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: استخدم معالجات المسار للوصول إلى موارد الخلفية، ومنع الكشف عن الأسرار الحساسة للعميل.
- تخزين البيانات المؤقت (Data Caching): تحقق مما إذا كانت طلبات البيانات الخاصة بك يتم تخزينها مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت عند الحاجة. تأكد من تخزين الطلبات التي لا تستخدم
getStaticPropsمؤقتًا عند الحاجة. - التجديد الثابت التدريجي (Incremental Static Regeneration): استخدم التجديد الثابت التدريجي لتحديث الصفحات الثابتة بعد بنائها، دون إعادة بناء موقعك بالكامل.
- الصور الثابتة (Static Images): استخدم دليل
publicلتخزين الموارد الثابتة لتطبيقك تلقائيًا، مثل الصور.
واجهة المستخدم وإمكانية الوصول
- وحدة الخطوط (Font Module): حسّن الخطوط باستخدام وحدة الخطوط، التي تستضيف ملفات الخطوط تلقائيًا مع الموارد الثابتة الأخرى، وتزيل طلبات الشبكة الخارجية وتقلل من انزياح التخطيط (Layout Shift).
- مكون
<Image>: حسّن الصور باستخدام مكون الصورة، الذي يحسن الصور تلقائيًا ويمنع انزياح التخطيط ويقدمها بتنسيقات حديثة مثل WebP. - مكون
<Script>: حسّن نصوص الطرف الثالث باستخدام مكون النص، الذي يؤجل النصوص تلقائيًا ويمنعها من عرقلة الخيط الرئيسي. - ESLint: استخدم المكون الإضافي المدمج
eslint-plugin-jsx-a11yلاكتشاف مشكلات إمكانية الوصول مبكرًا.
الأمان
- متغيرات البيئة (Environment Variables): تأكد من إضافة ملفات
.env.*إلى.gitignoreوأن المتغيرات العامة فقط هي التي تبدأ بـNEXT_PUBLIC_. - سياسة أمان المحتوى (Content Security Policy): فكر في إضافة سياسة أمان محتوى لحماية تطبيقك من التهديدات الأمنية المختلفة مثل البرمجة النصية عبر المواقع (XSS) وتزوير النقر (Clickjacking) وهجمات حقن الشفرة الأخرى.
البيانات الوصفية وتحسين محركات البحث (SEO)
- مكون
<Head>: استخدم مكونnext/headلإضافة عناوين الصفحات والوصف والمزيد.
سلامة النوع
- TypeScript والمكون الإضافي لـ TypeScript: استخدم TypeScript والمكون الإضافي لـ TypeScript لتحسين سلامة النوع ومساعدتك في اكتشاف الأخطاء مبكرًا.
قبل الانتقال إلى الإنتاج
قبل الانتقال إلى الإنتاج، يمكنك تشغيل next build لبناء تطبيقك محليًا واكتشاف أي أخطاء في البناء، ثم تشغيل next start لقياس أداء تطبيقك في بيئة تشبه الإنتاج.
مؤشرات الأداء الأساسية للويب (Core Web Vitals)
- Lighthouse: شغّل Lighthouse في وضع التصفح المتخفي لفهم أفضل لكيفية تجربة المستخدمين لموقعك، ولتحديد مجالات التحسين. هذا اختبار محاكاة ويجب إقرانه ببيانات الميدان (مثل مؤشرات الأداء الأساسية للويب).
تحليل الحزم
استخدم المكون الإضافي @next/bundle-analyzer لتحليل حجم حزم جافا سكريبت الخاصة بك وتحديد الوحدات الكبيرة والتبعيات التي قد تؤثر على أداء تطبيقك.
بالإضافة إلى ذلك، يمكن للأدوات التالية مساعدتك في فهم تأثير إضافة تبعيات جديدة إلى تطبيقك: