بهینهسازیها
Next.js با مجموعهای از بهینهسازیهای داخلی ارائه میشود که برای بهبود سرعت برنامه شما و Core Web Vitals (opens in a new tab) طراحی شدهاند. این راهنما بهینهسازیهایی را پوشش میدهد که میتوانید برای ارتقای تجربه کاربری خود از آنها استفاده کنید.
کامپوننتهای داخلی
کامپوننتهای داخلی پیچیدگی پیادهسازی بهینهسازیهای رایج رابط کاربری را از بین میبرند. این کامپوننتها عبارتند از:
- Images: تصاویر بر اساس المنت داخلی
<img>ساخته شده است. کامپوننت Image عملکرد تصاویر را با بارگذاری تنبل (lazy loading) و تغییر اندازه خودکار تصاویر بر اساس اندازه دستگاه بهینه میکند. - Link: لینک بر اساس تگهای داخلی
<a>ساخته شده است. کامپوننت Link صفحات را در پسزمینه برای انتقالهای سریعتر و روانتر صفحه، پیشبارگذاری میکند. - Scripts: Built on the native
<script>tags. The Script Component gives you control over loading and execution of third-party scripts. - Scripts: اسکریپت ها بر اساس تگهای داخلی
<script>ساخته شده است. کامپوننت Script به شما کنترل بر بارگذاری و اجرای اسکریپتهای شخص ثالث میدهد.
Metadata
فرا داده (Metadata) به موتورهای جستجو کمک میکند تا محتوای شما را بهتر درک کنند (که میتواند منجر به سئوی بهتر شود) و به شما امکان میدهد نحوه نمایش محتوای خود را در شبکههای اجتماعی سفارشی کنید و به ایجاد یک تجربه کاربری جذابتر و سازگار در پلتفرمهای مختلف کمک میکند.
API فرا داده (Metadata) در Next.js به شما امکان میدهد تا المنت <head> یک صفحه را اصلاح کنید. شما میتوانید Metadata را به دو روش پیکربندی کنید:
- Metadata مبتنی بر پیکربندی: اکسپورت یک شیء استاتیک
metadataیا یک تابع داینامیکgenerateMetadataدر یک فایلlayout.jsیاpage.js. - Metadata مبتنی بر فایل: فایلهای ویژه استاتیک یا تولید شده پویا را به بخشهای مسیر اضافه کنید.
علاوه بر این، میتوانید با استفاده از JSX و CSS با سازنده imageResponse تصاویر پویای Open Graph ایجاد کنید.
دارایی های استاتیک Static Assets
پوشه /public در Next.js برای ارائه داراییهای استاتیک مانند تصاویر، فونتها و سایر فایلها قابل استفاده است. فایلهای داخل /public همچنین میتوانند توسط ارائهدهندگان CDN کش شوند تا به طور موثری ارائه شوند.
آنالیتیکس و مانیتورینگ
برای برنامههای بزرگ، Next.js با ابزارهای محبوب آنالیتیکس و مانیتورینگ ادغام میشود تا به شما در درک عملکرد برنامهتان کمک کند. برای اطلاعات بیشتر به راهنماهای OpenTelemetry و Instrumentation مراجعه کنید.