كيفية تحسين تطبيق Next.js للإنتاج
قبل نشر تطبيق Next.js الخاص بك في بيئة الإنتاج، هناك بعض التحسينات والأنماط التي يجب مراعاتها لتحقيق أفضل تجربة مستخدم وأداء وأمان.
توفر هذه الصفحة أفضل الممارسات التي يمكنك استخدامها كمرجع عند بناء تطبيقك وقبل الانتقال إلى الإنتاج، بالإضافة إلى تحسينات Next.js التلقائية التي يجب أن تكون على دراية بها.
التحسينات التلقائية
هذه تحسينات Next.js المضمنة بشكل افتراضي ولا تتطلب أي تكوين:
- مكونات الخادم (Server Components): يستخدم Next.js مكونات الخادم افتراضيًا. تعمل مكونات الخادم على الخادم ولا تتطلب جافا سكريبت للعرض على العميل. وبالتالي، ليس لها أي تأثير على حجم حزم جافا سكريبت الخاصة بالعميل. يمكنك بعد ذلك استخدام مكونات العميل (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): تعامل مع الأخطاء الشاملة وأخطاء 404 في الإنتاج بشكل أنيق عن طريق إنشاء صفحات أخطاء مخصصة.
- مكونات العميل والخادم (Client and Server Components): اتبع أنماط التركيب الموصى بها لمكونات الخادم والعميل، وتحقق من مواضع حدود
"use client"لتجنب زيادة حجم حزمة جافا سكريبت الخاصة بالعميل دون داع. - واجهات برمجة التطبيقات الديناميكية (Dynamic APIs): كن على دراية بأن واجهات برمجة التطبيقات الديناميكية مثل
cookiesوخاصيةsearchParamsستجعل المسار بأكمله يعمل بـالعرض الديناميكي (Dynamic Rendering) (أو تطبيقك بالكامل إذا تم استخدامها في التخطيط الجذري (Root Layout)). تأكد من أن استخدام واجهات برمجة التطبيقات الديناميكية مقصود وقم بلفها في حدود<Suspense>عند الحاجة.
معلومة مفيدة: العرض الجزئي المسبق (تجريبي) سيسمح لأجزاء من المسار بأن تكون ديناميكية دون جعل المسار بأكمله يعمل بالعرض الديناميكي.
جلب البيانات والتخزين المؤقت
- مكونات الخادم (Server Components): استفد من مزايا جلب البيانات على الخادم باستخدام مكونات الخادم.
- معالجات المسار (Route Handlers): استخدم معالجات المسار للوصول إلى موارد الخلفية من مكونات العميل. ولكن لا تستدع معالجات المسار من مكونات الخادم لتجنب طلب خادم إضافي.
- البث (Streaming): استخدم واجهة مستخدم التحميل و React Suspense لإرسال واجهة المستخدم تدريجيًا من الخادم إلى العميل، ومنع انسداد المسار بالكامل أثناء جلب البيانات.
- جلب البيانات المتوازي (Parallel Data Fetching): قلل من الشلالات الشبكية عن طريق جلب البيانات بشكل متوازي عند الحاجة. فكر أيضًا في جلب البيانات مسبقًا عند الحاجة.
- تخزين البيانات المؤقت (Data Caching): تحقق مما إذا كانت طلبات البيانات الخاصة بك يتم تخزينها مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت عند الحاجة. تأكد من تخزين الطلبات التي لا تستخدم
fetchمؤقتًا. - الصور الثابتة (Static Images): استخدم دليل
publicلتخزين الموارد الثابتة لتطبيقك تلقائيًا، مثل الصور.
واجهة المستخدم وإمكانية الوصول
- النماذج والتحقق (Forms and Validation): استخدم إجراءات الخادم (Server Actions) لمعالجة إرسال النماذج والتحقق من جانب الخادم ومعالجة الأخطاء.
- وحدة الخطوط (Font Module): حسّن الخطوط باستخدام وحدة الخطوط، التي تستضيف ملفات الخطوط تلقائيًا مع الموارد الثابتة الأخرى، وتزيل طلبات الشبكة الخارجية وتقلل من انزياح التخطيط (Layout Shift).
- مكون
<Image>: حسّن الصور باستخدام مكون الصورة، الذي يحسن الصور تلقائيًا ويمنع انزياح التخطيط ويقدمها بتنسيقات حديثة مثل WebP. - مكون
<Script>: حسّن نصوص الطرف الثالث باستخدام مكون النص، الذي يؤجل النصوص تلقائيًا ويمنعها من عرقلة الخيط الرئيسي. - ESLint: استخدم المكون الإضافي المدمج
eslint-plugin-jsx-a11yلاكتشاف مشكلات إمكانية الوصول مبكرًا.
الأمان
- التلويث (Tainting): امنع الكشف عن البيانات الحساسة للعميل عن طريق تلويث كائنات البيانات و/أو قيم محددة.
- إجراءات الخادم (Server Actions): تأكد من أن المستخدمين مخولون لاستدعاء إجراءات الخادم. راجع ممارسات الأمان الموصى بها.
- متغيرات البيئة (Environment Variables): تأكد من إضافة ملفات
.env.*إلى.gitignoreوأن المتغيرات العامة فقط هي التي تبدأ بـNEXT_PUBLIC_. - سياسة أمان المحتوى (Content Security Policy): فكر في إضافة سياسة أمان محتوى لحماية تطبيقك من التهديدات الأمنية المختلفة مثل البرمجة النصية عبر المواقع (XSS) وتزوير النقر (Clickjacking) وهجمات حقن الشفرة الأخرى.
البيانات الوصفية وتحسين محركات البحث (SEO)
- واجهة برمجة التطبيقات للبيانات الوصفية (Metadata API): استخدم واجهة برمجة التطبيقات للبيانات الوصفية لتحسين تحسين محركات البحث (SEO) لتطبيقك عن طريق إضافة عناوين الصفحات والوصف والمزيد.
- صور Open Graph (OG): أنشئ صور OG لإعداد تطبيقك للمشاركة الاجتماعية.
- خرائط الموقع (Sitemaps) وملفات الروبوتات (Robots): ساعد محركات البحث في الزحف إلى صفحاتك وفهرستها عن طريق إنشاء خرائط مواقع وملفات روبوتات.
سلامة النوع
- TypeScript والمكون الإضافي لـ TypeScript: استخدم TypeScript والمكون الإضافي لـ TypeScript لتحسين سلامة النوع ومساعدتك في اكتشاف الأخطاء مبكرًا.
قبل الانتقال إلى الإنتاج
قبل الانتقال إلى الإنتاج، يمكنك تشغيل next build لبناء تطبيقك محليًا واكتشاف أي أخطاء في البناء، ثم تشغيل next start لقياس أداء تطبيقك في بيئة تشبه الإنتاج.
مؤشرات الأداء الأساسية للويب (Core Web Vitals)
- Lighthouse: شغّل Lighthouse في وضع التصفح المتخفي لفهم أفضل لكيفية تجربة المستخدمين لموقعك، ولتحديد مجالات التحسين. هذا اختبار محاكاة ويجب إقرانه ببيانات الميدان (مثل مؤشرات الأداء الأساسية للويب).
- خطاف
useReportWebVitals: استخدم هذا الخطاف لإرسال بيانات مؤشرات الأداء الأساسية للويب (Core Web Vitals) إلى أدوات التحليل.
تحليل الحزم
استخدم المكون الإضافي @next/bundle-analyzer لتحليل حجم حزم جافا سكريبت الخاصة بك وتحديد الوحدات الكبيرة والتبعيات التي قد تؤثر على أداء تطبيقك.
بالإضافة إلى ذلك، يمكن للأدوات التالية مساعدتك في فهم تأثير إضافة تبعيات جديدة إلى تطبيقك: