التحسينات
يأتي Next.js مع مجموعة متنوعة من تحسينات الأداء المدمجة المصممة لتحسين سرعة تطبيقك ومقاييس الويب الأساسية (Core Web Vitals). سيغطي هذا الدليل التحسينات التي يمكنك الاستفادة منها لتحسين تجربة المستخدم.
المكونات المدمجة
توفر المكونات المدمجة تجريدًا لتعقيد تنفيذ تحسينات واجهة المستخدم الشائعة. هذه المكونات هي:
- الصور: مبنية على عنصر
<img>الأصلي. يقوم مكون الصورة بتحسين الصور للأداء عن طريق التحميل المتأخر وتغيير حجم الصور تلقائيًا بناءً على حجم الجهاز. - الرابط: مبنية على علامات
<a>الأصلية. يقوم مكون الرابط بجلب الصفحات مسبقًا في الخلفية، لتحقيق انتقالات أسرع وأكثر سلاسة بين الصفحات. - النصوص البرمجية: مبنية على علامات
<script>الأصلية. يمنحك مكون النص البرمجي تحكمًا في تحميل وتنفيذ النصوص البرمجية لجهات خارجية.
البيانات الوصفية
تساعد البيانات الوصفية محركات البحث على فهم محتوىك بشكل أفضل (مما قد يؤدي إلى تحسين تحسين محركات البحث)، وتتيح لك تخصيص طريقة عرض المحتوى الخاص بك على وسائل التواصل الاجتماعي، مما يساعدك على إنشاء تجربة مستخدم أكثر جاذبية واتساقًا عبر منصات مختلفة.
تتيح لك واجهة برمجة التطبيقات للبيانات الوصفية في Next.js تعديل عنصر <head> للصفحة. يمكنك تكوين البيانات الوصفية بطريقتين:
- البيانات الوصفية المعتمدة على التكوين: قم بتصدير كائن
metadataثابت أو دالةgenerateMetadataديناميكية في ملفlayout.jsأوpage.js. - البيانات الوصفية المعتمدة على الملفات: أضف ملفات خاصة ثابتة أو تم إنشاؤها ديناميكيًا إلى مقاطع المسار.
بالإضافة إلى ذلك، يمكنك إنشاء صور Open Graph ديناميكية باستخدام JSX وCSS مع مُنشئ imageResponse.
الأصول الثابتة
يمكن استخدام مجلد /public في Next.js لخدمة الأصول الثابتة مثل الصور والخطوط والملفات الأخرى. يمكن أيضًا تخزين الملفات داخل /public مؤقتًا بواسطة موفري CDN حتى يتم تسليمها بكفاءة.
التحليلات والمراقبة
بالنسبة للتطبيقات الكبيرة، يتكامل Next.js مع أدوات التحليلات والمراقبة الشائعة لمساعدتك في فهم أداء تطبيقك. تعلم المزيد في أدلة التحليلات OpenTelemetry وأدوات القياس (Instrumentation).