مهندسی محصول · DevOps · امنیتپاسخ‌گویی سریع به پروژه‌های جدی
← بازگشت به بلاگ
FrontendNext.jsSEO

چک‌لیست پرفورمنس Next.js برای محصول واقعی

از App Router تا کش، تصویر و Core Web Vitals — کارهایی که واقعاً سرعت و سئو را بالا می‌برد.

اگر محصول وب‌تان کند باشد، نه فقط کاربر می‌رود؛ گوگل هم امتیاز کمتری می‌دهد. در پروژه‌های Next.js، پرفورمنس معمولاً از چند نقطه مشخص می‌آید — نه از «جادوی فریم‌ورک».

۱) رندر درست انتخاب کنید

- صفحات لندینگ و بلاگ: SSR یا ISR با revalidate کوتاه
- داشبورد لاگین‌شده: ترجیحاً Client با داده از API
- داده‌های تقریباً ثابت: Static Generation

اشتباه رایج: همه چیز را Client Component کردن و از دست دادن SEO.

۲) تصاویر و فونت

- next/image با سایز مشخص و format مدرن
- فونت‌ها را با next/font self-host کنید (مثل Vazirmatn)
- از لود کردن چندین وزن غیرضروری پرهیز کنید

۳) جاوااسکریپت کمتر

Bundle Analyzer را در CI بگذارید. کتابخانه‌های سنگین UI را فقط جایی که لازم است import کنید. برای لیست‌های بلند، virtualization یا pagination بگذارید.

۴) کش و داده

- fetch با next: { revalidate }
- برای APIهای پرترافیک: CDN یا Redis جلوی origin
- از waterfall درخواست‌ها در layout جلوگیری کنید

۵) اندازه‌گیری

بدون Lighthouse، Web Vitals و RUM، بهینه‌سازی حدس است. قبل از لانچ، LCP، INP و CLS را روی موبایل واقعی چک کنید.

در PelatinCode این چک‌لیست بخشی از تحویل فرانت هر محصول است — نه یک «فاز اختیاری آخر کار».

چک‌لیست پرفورمنس Next.js | Frontend | PelatinCode