فریمورک Next.js چیست و چه فرقی با بقیه فریم‌ورک‌ها دارد؟

Next.js چیست؟

Next.js یک فریم‌ورک فول‌استک مبتنی بر React است که شرکت Vercel آن را نگهداری می‌کند. برای ساخت اپ وب با رندر سرور، تولید ایستا و بک‌اند سبک روی همان پروژه به کار می‌رود.

این جمله را می‌توان مستقل نقل کرد. همان کار را در مستندات رسمی هم می‌بینید: fullstack React framework for the web.

«فول‌استک» اینجا یعنی لازم نیست برای هر API یک سرور Express جدا از صفر بچینید. می‌توانید Route Handler، Server Action و رندر HTML را در یک ریپو داشته باشید. معنایش این نیست که Next.js جای تمام بک‌اندهای بزرگ را می‌گیرد.

React کتابخانه UI است. Next.js تصمیم‌های محصول را دور React می‌چیند: مسیر فایل‌محور، رندر، کش، تصویر، فونت، و استقرار.

در ۲۰۲۶ مسیر پیشنهادی برای پروژه تازه، App Router است. Pages Router هنوز برای کد قدیمی کار می‌کند. ویژگی‌های جدید روی App Router متمرکزند.

Next.js چه مشکلی را حل می‌کند؟

React خالص به‌صورت پیش‌فرض CSR است. Client-Side Rendering یعنی HTML معنی‌دار بعد از اجرای جاوااسکریپت ساخته می‌شود.

این مدل برای داشبورد پشت ورود می‌تواند کافی باشد. برای فروشگاه، مجله، یا صفحه فرود، سه درد می‌سازد:

• SEO: خزنده باید JS را اجرا کند. گاهی می‌کند. گاهی ناقص. شما کنترل کمتری دارید.

• زمان اولین محتوا: کاربر تا دانلود باندل صبر می‌کند.

• بار کلاینت: موبایل ضعیف بهای Virtual DOM و هیدریشن را می‌دهد.

Next.js HTML را روی سرور یا در زمان بیلد می‌سازد. مرورگر متن واقعی را زودتر می‌بیند. سپس فقط بخش‌های تعاملی هیدریت می‌شوند. با Server Components، بخشی از درخت UI اصلاً به کلاینت جاوااسکریپت نمی‌فرستد.

مشکل دومی هم بود: هر تیم React مسیر، باندل و SSR را خودش اختراع می‌کرد. Next.js یک قرارداد مشترک شد. استخدام، مثال، و ابزار دور همین قرارداد جمع شدند.

قابلیت‌های کلیدی Next.js چیست؟

نام‌ها را ثابت نگه می‌داریم. همین نام‌ها را در مستندات هم می‌بینید.

SSR چیست و چه وقت استفاده شود؟

SSR یا Server-Side Rendering یعنی HTML هر درخواست روی سرور ساخته شود. برای داده تازه و شخصی‌سازی مناسب است. هزینه: کار سرور در هر درخواست.

مثال: داشبورد کاربری با موجودی لحظه‌ای.

SSG چیست؟

SSG یا Static Site Generation یعنی HTML در زمان بیلد ساخته شود. برای مستندات، بلاگ و صفحه بازاریابی عالی است. سریع و ارزان سرو می‌شود. اگر محتوا عوض شود، باید دوباره بیلد کنید یا سراغ ISR بروید.

ISR چیست؟

ISR یا Incremental Static Regeneration یعنی صفحه ایستا بماند، اما بعد از یک بازه دوباره ساخته شود. در App Router این فکر اغلب با revalidate روی fetch یا با Cache Components بیان می‌شود.

مثال: صفحه محصول که قیمت‌اش هر ساعت کافی است تازه شود. نه هر میلی‌ثانیه.

App Router چیست؟

App Router سیستم مسیریابی پوشه‌محور در پوشه app است.

• app/page.tsx → مسیر /

• app/blog/[slug]/page.tsx → مسیر پویا

• layout.tsx لایه مشترک

• loading.tsx و error.tsx مرز UI برای انتظار و خطا

قرارداد فایل، مسیریابی را از تنظیمات طولانی جدا می‌کند. هزینه: باید قرارداد را یاد بگیرید.

React Server Components چیست؟

Server Components پیش‌فرض App Router هستند. روی سرور اجرا می‌شوند. به دیتابیس یا فایل می‌توانند مستقیم حرف بزنند. JS خود را به مرورگر نمی‌فرستند.

وقتی تعامل لازم است — کلیک، useState، رویداد — فایل را با 'use client' Client Component می‌کنید.

این مرز، قدرت اصلی و درد اصلی Next.js در ۲۰۲۶ است. قدرت: کمتر JS برای محتوا. درد: باید مدام بپرسید «این قطعه سرور است یا کلاینت؟».

Route Handlers چیست؟

فایل route.ts یک endpoint HTTP است. GET، POST و بقیه متدها را می‌نویسید. برای webhook، دانلود فایل، یا API سبک مناسب است.

جای NestJS بزرگ را در دامنه پیچیده پر نمی‌کند. برای BFF (Backend for Frontend) اغلب کافی است.

بهینه‌سازی تصویر و فونت چه می‌کند؟

next/image اندازه، فرمت مدرن و Lazy Load را مدیریت می‌کند. next/font فونت را در بیلد خودمیزبان می‌کند. درخواست اضافه به گوگل در مرورگر کاربر لازم نیست. CLS کمتر می‌شود.

این‌ها جزئی به نظر می‌رسند. در امتیاز عملکرد واقعی، جزئی نیستند.

تفاوت Next.js با React خالص چیست؟

React خالص UI می‌سازد. مسیریابی رسمی محصول‌محور ندارد. SSR رسمی محصول‌محور ندارد. شما React Router، Vite، و یک سرور جدا می‌چینید.

Next.js این چینش را پیش‌فرض می‌کند. در عوض آزادی کمتری در «هر طور خواستی ببند» دارید.

اگر فقط یک ویجت داخل صفحه وردپرس می‌خواهید، React خالص سبک‌تر است. اگر یک اپ با مسیرهای زیاد و SEO می‌خواهید، Next.js مسیر کوتاه‌تری است.

Next.js در برابر بقیه فریم‌ورک‌ها چه فرقی دارد؟

جدول زیر برای انتخاب اولیه است. «بهتر» مطلق وجود ندارد. تناسب با تیم و مسئله وجود دارد.

توضیح کوتاه هر رقیب:

• Nuxt: اگر تیم Vue است، Nuxt جواب متناظر است. اجبار به Next.js یعنی عوض کردن کل مهارت UI.

• React Router (ادامه مسیر Remix): مدل ذهنی ساده: loader برای خواندن، action برای نوشتن. اگر RSC برایتان مرکزی است، Next.js بالغ‌تر است.

• Astro: اول HTML. JS فقط برای جزیره‌های تعاملی. برای مجله و داکیومنت اغلب انتخاب بهتری است.

• SvelteKit: باندل کوچک و DX تمیز. اکوسیستم کتابخانه و استخدام React را ندارد.

«بهترین فریم‌ورک جاوااسکریپت» بدون صورت‌مسئله، شعار است. سؤال درست این است: تیم چه بلدی دارد و صفحه چقدر تعاملی است.

مثال کد: یک صفحه ساده با Server Component

این فایل را در app/posts/page.tsx بگذارید. پیش‌فرض Server Component است. 'use client' ندارد.

React

type Post = { id: string; title: string };

export default async function PostsPage() {
  const posts: Post[] = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 },
  }).then((res) => {
    if (!res.ok) throw new Error("Failed to load posts");
    return res.json();
  });

  return (
    <main>
      <h1>آخرین نوشته‌ها</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

توضیح خط‌به‌خط کوتاه:

• async function: در Server Component مجاز است. روی سرور await می‌کنید.

• fetch روی سرور اجرا می‌شود. مرورگر این درخواست را نمی‌بیند.

• next: { revalidate: 3600 }: رفتار ISRگونه. حداکثر یک ساعت یک‌بار تازه می‌شود.

• پرتاب خطا: error.tsx می‌تواند UI خطا را نشان دهد.

• خروجی HTML واقعی با عنوان پست‌هاست. برای SEO همین مهم است.

اگر دکمه «پسندیدن» بخواهید، آن دکمه را یک Client Component کوچک کنید. کل صفحه را کلاینت نکنید. این الگوی درست App Router است.

چه زمانی Next.js انتخاب درستی است؟

انتخاب درست است اگر بیشتر این‌ها صادق باشد:

• تیم React بلد است و نمی‌خواهد Vue یا Svelte یاد بگیرد.

• صفحه عمومی دارید و SEO مهم است.

• می‌خواهید UI و BFF در یک ریپو بمانند.

• به بهینه‌سازی تصویر، فونت و مسیریابی فایل‌محور نیاز دارید.

• محصول ترکیبی از محتوا و تعامل است: فروشگاه، SaaS با وبلاگ، پنل + سایت بازاریابی.

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

چه زمانی Next.js انتخاب درستی نیست؟

معایب را جدی بگیرید. این بخش تبلیغ نیست.

پیچیدگی مرز سرور و کلاینت

'use client' را اشتباه بگذارید، باندل باد می‌کند. داده سرور را به کلاینت پاس اشتباه بدهید، خطای سریالایز می‌گیرید. کش را غلط بفهمید، کاربر داده کهنه یا بیش‌ازحد تازه می‌بیند.

مدل‌های زبانی هم در همین مرز زیاد خطا می‌کنند. ریویو انسانی لازم است.

هزینه میزبانی و قفل حس‌شده Vercel

Next.js متن‌باز است. استقرار روی Vercel صفر‌تنظیم و راحت است. در مقیاس ترافیک و اجرای تابع، صورتحساب می‌تواند تند بالا برود.

جایگزین: Docker روی VPS، یا AWS با OpenNext. OpenNext لایه ترجمه بیلد Next.js به زیرساخت AWS است. در ۲۰۲۵ و ۲۰۲۶ بالغ‌تر شده است. هنوز پلتفرم مدیریت‌شده نیست. وقتی Next.js داخلی را می‌شکند، آداپتور ممکن است با تأخیر برسد.

اگر تیم کوچکی هستید و کسی AWS را نگه نمی‌دارد، OpenNext «رایگان» نیست. زمان مهندس می‌گیرد.

سنگینی برای مسئله کوچک

یک لندینگ سه بخشی با فرم ایمیل، Astro یا حتی HTML کافی است. Next.js اینجا شبیه کامیون برای خرید نان است.

وابستگی به اکوسیستم React

اگر از Virtual DOM و قوانین Hooks خسته‌اید، Next.js شما را نجات نمی‌دهد. همان React است با سرور بیشتر.

ISR و کش در استقرار خودمیزبان

بعضی رفتارهای کش و توزیع لبه روی Vercel صاف‌تر کار می‌کنند. خودمیزبان یعنی خودتان CDN، ذخیره ISR و تصویر را ببندید. مستندات Vercel این محدودیت را صریح می‌گوید.

چطور Next.js را قدم‌به‌قدم شروع کنیم؟

1. Node.js نسخه پشتیبانی‌شده را نصب کنید.

2. با دستور رسمی پروژه بسازید: npx create-next-app@latest.

3. App Router و TypeScript را از اول روشن کنید.

4. یک مسیر app/page.tsx را Server Component نگه دارید.

5. فقط دکمه تعاملی را Client Component کنید.

6. یک route.ts برای یک API کوچک بنویسید.

7. تصویر را با next/image بگذارید.

8. قبل از تولید، next build را محلی اجرا کنید. خطای مرز سرور/کلاینت آنجا معلوم می‌شود.

این لیست شما را مهندس Next.js نمی‌کند. از «نمونه مقابل» جدا می‌کند.

اشتباهات رایج در Next.js

• کل پروژه را 'use client' کردن و از دست دادن فایده RSC.

• useEffect برای واکشی داده در صفحه‌ای که می‌تواند سرور باشد.

• فراموش کردن حالت خطا و بارگذاری.

• بهینه‌نکردن تصویر و افت Core Web Vitals.

• ساختن بک‌اند دامنه پیچیده فقط با Route Handler، بدون مرز مشخص.

• فرض اینکه SEO جادویی است؛ عنوان، متا و محتوای HTML هنوز کار شماست.

• ارتقای نسخه بدون خواندن تغییرات کش و params ناهمگام.

هشدار: نسخه و API کش در سال‌های اخیر چند بار عوض شده است. قبل از کپی کردن آموزش ۲۰۲۳، تاریخ نوشته را ببینید. Pages Router و App Router را در یک آموزش قاطی نکنید.

جمع‌بندی

Next.js چیست؟ فریم‌ورک فول‌استک React ساخت Vercel برای وب. مشکل HTML دیرهنگام و SEO ضعیف CSR را با SSR، SSG، ISR و Server Components هدف گرفته است.

تفاوت با بقیه فریم‌ورک‌ها در اکوسیستم React، بلوغ RSC، و یکپارچگی با مسیر فایل‌محور است. Nuxt برای Vue، Astro برای محتوا، SvelteKit برای سبکی، و React Router برای مدل HTTP صریح رقیب‌اند.

اگر تیم React و محصول ترکیبی دارید، Next.js انتخابی قوی است. اگر مسئله‌تان یک سایت کم‌تعامل است، اول گزینه‌های ساده‌تر را جدی بگیرید.

یک صفحه واقعی با App Router بسازید. فقط یک جزیره کلاینت بگذارید. همان تمرین، بیشتر از ده مقایسه توییتری به شما جواب می‌دهد.

سؤالات متداول (FAQ)

Next.js چیست؟

Next.js فریم‌ورک فول‌استک مبتنی بر React است که Vercel آن را نگهداری می‌کند. مسیریابی، رندر سرور، تولید ایستا، API و بهینه‌سازی تصویر را دور React می‌چیند. هدفش ساخت اپ وب با HTML اولیه قوی و SEO بهتر از React خالص است. در ۲۰۲۶ مسیر اصلی آن App Router است.

تفاوت Next.js و React چیست؟

React کتابخانه ساخت رابط کاربری است. Next.js فریم‌ورکی روی React است که رندر سرور، مسیریابی فایل‌محور، Route Handler و ابزار عملکرد را اضافه می‌کند. با React خالص بیشتر CSR دارید. با Next.js می‌توانید SSR، SSG و ISR را بدون بستن کل پشته از صفر داشته باشید.

Next.js بهتر است یا Nuxt؟

اگر تیم React دارد، Next.js طبیعی است. اگر تیم Vue دارد، Nuxt طبیعی است. هر دو SSR و SSG می‌دهند. جابه‌جایی فقط به‌خاطر محبوبیت، هزینه آموزش UI را بی‌دلیل بالا می‌برد. معیار را مهارت تیم و اکوسیستم کتابخانه بگذارید، نه شعار «بهترین فریم‌ورک».

SSR و SSG و ISR چه فرقی دارند؟

SSR HTML را هر درخواست روی سرور می‌سازد. SSG HTML را در بیلد می‌سازد و خیلی سریع سرو می‌کند. ISR صفحه ایستا را دوره‌ای تازه می‌کند. برای داده شخصی SSR مناسب‌تر است. برای مقاله SSG یا ISR مناسب‌تر است. انتخاب غلط یعنی یا هزینه سرور زیاد، یا محتوای کهنه.

آیا همیشه باید از Next.js استفاده کنیم؟

خیر. برای لندینگ ساده، مستندات و مجله کم‌تعامل، Astro اغلب ساده‌تر و کم‌JSتر است. برای SPA داخلی پشت ورود، Vite + React هم کافی است. Next.js وقتی می‌درخشد که React، SEO و منطق فول‌استک هم‌زمان لازم باشند. پیچیدگی و هزینه میزبانی را در تصمیم حساب کنید.

App Router و Server Components چه هستند؟

App Router مسیریابی پوشه‌محور در پوشه app است. Server Components پیش‌فرض آن‌اند و روی سرور اجرا می‌شوند. جاوااسکریپت خود را به کلاینت نمی‌فرستند. بخش تعاملی باید Client Component شود. این مدل باندل را کوچک می‌کند اما مرز سرور و کلاینت را به مسئله اصلی طراحی تبدیل می‌کند.

OpenNext چیست و چرا مهم است؟

OpenNext آداپتوری است که خروجی Next.js را برای اجرا روی AWS و محیط‌های غیر Vercel آماده می‌کند. وقتی صورتحساب Vercel یا نیاز به ابر خودتان مطرح شود، وارد بحث می‌شود. محصول مدیریت‌شده نیست. تأخیر همگام‌شدن با نسخه‌های جدید Next.js را باید در عملیات در نظر بگیرید.