Next.js چیست؟
فریمورکی روی React که Routing، رندر سمت سرور (SSR)، تولید استاتیک (SSG) و بهینهسازی را بهصورت آماده اضافه میکند.
چرا مهم است؟
React بهتنهایی فقط کتابخانه UI است و برای روتینگ، سئو و رندر سمت سرور باید دستی تنظیم شود؛ Next.js همه اینها را با یک ساختار پروژه استاندارد آماده میدهد.
تعریف
Next.js یک فریمورک React-محور است که روی React لایههای Routing مبتنیبر فایل، رندر سمت سرور، تولید ایستا (Static Generation) و بهینهسازی تصویر/فونت را اضافه میکند.
مدلهای رندر
| مدل | زمان رندر | مناسب برای |
|---|---|---|
| SSR (Server-Side Rendering) | هر درخواست، روی سرور | دادهای که مدام تغییر میکند |
| SSG (Static Site Generation) | زمان Build | صفحاتی که کمتر تغییر میکنند (وبلاگ، مستندات) |
| CSR (Client-Side Rendering) | در مرورگر کاربر | داشبورد پس از لاگین |
مثال Routing مبتنیبر فایل (App Router)
app/
page.tsx → صفحه اصلی "/"
blog/[slug]/page.tsx → صفحه پویا "/blog/my-post"
چرا مهم است
SSR/SSG باعث میشود موتورهای جستوجو محتوای کامل HTML صفحه را همان لحظه اول ببینند — چیزی که یک اپ React خالص با CSR معمولاً در آن ضعیف است.
اشتباه رایج
❌ استفاده از "use client" روی کل درخت کامپوننتها فقط برای یک تعامل کوچک — مزیت رندر سمت سرور را از بین میبرد؛ فقط کوچکترین کامپوننت تعاملی را Client کنید.
منبع و مطالعه بیشتر
خلاصه
Next.js با Routing مبتنیبر فایل و رندر سمت سرور/استاتیک، ضعف سئو و بار اولیه React خالص را جبران میکند. "use client" را فقط روی کوچکترین کامپوننت تعاملی بگذارید. مرجع کامل: مستندات رسمی Next.js.