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