Next.js چیست و چه مسئله‌ای را حل می‌کند؟

Next.js چیست و چه مسئله‌ای را حل می‌کند؟

اگر با React کار کرده باشید، می‌دانید که ساخت رابط کاربری با کامپوننت‌ها کار راحتی است. اما ساخت یک وب‌سایت یا برنامه‌ی وب کامل فقط به کامپوننت محدود نمی‌شود. باید مسیرها (Routing) را مدیریت کنید، داده را از سرور بگیرید، صفحه را برای موتورهای جست‌وجو آماده کنید، سرعت بارگذاری را بهینه کنید و در نهایت پروژه را روی یک سرور منتشر کنید. Next.js چارچوبی است که این کارها را در کنار React، در یک ساختار منسجم، در اختیار شما می‌گذارد.

در این درس فقط به این پرسش پاسخ می‌دهیم که Next.js چیست و چرا به آن نیاز پیدا می‌کنیم. مقایسه‌ی دقیق‌تر با React در درس بعد (تفاوت React و Next.js) انجام می‌شود.

پیش‌نیاز

• آشنایی با HTML، CSS و JavaScript
• آشنایی پایه با React: کامپوننت، JSX، Props و State

توضیح شهودی: React یک موتور است، Next.js یک خودرو

React مثل یک موتور قدرتمند است: خوب کار می‌کند، اما برای رفتن از نقطه‌ای به نقطه‌ی دیگر به شاسی، فرمان، چرخ و بقیه‌ی قطعات هم نیاز دارید. اگر فقط با React شروع کنید، باید خودتان کتابخانه‌ی مسیریابی، روش دریافت داده، ابزار Build، راهکار رندر سمت سرور و بقیه‌ی قطعات را انتخاب و به هم وصل کنید. Next.js این قطعات را از قبل انتخاب و یکپارچه کرده است تا بتوانید روی ساختن محصول تمرکز کنید.

این تشبیه فقط برای فهم اولیه است. از نظر فنی، Next.js یک فریم‌ورک فول‌استک مبتنی بر React است: هم بخش رابط کاربری را پوشش می‌دهد و هم بخشی از منطق سمت سرور را.

توضیح فنی: Next.js دقیقاً چه چیزی به شما می‌دهد؟

Next.js یک فریم‌ورک متن‌باز برای ساخت برنامه‌های وب با React است. در نسخه‌ی ۱۶ و با App Router (روش مسیریابی مدرن آن)، این قابلیت‌ها را در کنار هم دارد:

• مسیریابی مبتنی بر فایل‌سیستم: ساختار پوشه‌ها و فایل‌ها مسیرهای سایت را تعیین می‌کند و نیازی به نوشتن جدول مسیرها نیست.
• Layoutهای مشترک: بخش‌های تکراری مثل هدر و فوتر یک‌بار تعریف می‌شوند و بین صفحات به اشتراک گذاشته می‌شوند.
• Server Components: کامپوننت‌هایی که روی سرور اجرا می‌شوند و کدشان به مرورگر فرستاده نمی‌شود. بررسی کامل آن‌ها در فصل ۴ است.
• دریافت داده در سمت سرور: امکان خواندن داده از پایگاه داده یا API مستقیماً داخل کامپوننت‌ها.
• مدل‌های مختلف رندر: صفحه می‌تواند از قبل (در زمان Build) یا در زمان درخواست تولید شود. جزئیات در فصل ۵.
• سیستم کش و بازاعتبارسنجی: ابزارهایی برای نگه‌داشتن نتیجه‌ی کارهای پرهزینه و به‌روزرسانی آن‌ها. موضوع فصل ۷.
• Server Actions و Route Handlers: نوشتن منطق سمت سرور (مثل ثبت فرم یا ساخت API) در همان پروژه.
• بهینه‌سازی‌های آماده: برای تصویر، فونت و Metadata.
• ابزار توسعه و Build: در نسخه‌ی ۱۶، Turbopack به‌صورت پیش‌فرض برای پروژه‌های جدید استفاده می‌شود.

چه مسئله‌ای حل می‌شود؟

برای فهم ارزش Next.js بهتر است مشکلات یک برنامه‌ی React که فقط در مرورگر اجرا می‌شود (Client-side Rendering) را ببینیم. در این الگو، سرور معمولاً یک صفحه‌ی HTML تقریباً خالی و یک بسته‌ی بزرگ JavaScript می‌فرستد و مرورگر باید همه‌چیز را بسازد.

مثال واقعی: DevNotes

در طول این دوره، یک پروژه‌ی واقعی به نام DevNotes می‌سازیم؛ یک وب‌سایت فارسی برای انتشار و مدیریت نوشته‌های فنی، همراه با داشبورد مدیریت. به نیازهای این پروژه نگاه کنید:

• یک صفحه‌ی اصلی و یک فهرست از نوشته‌ها (مهم برای جست‌وجوی گوگل)
• یک صفحه برای هر نوشته با آدرس اختصاصی
• صفحه‌ی ورود و داشبورد خصوصی
• ذخیره‌ی نوشته‌ها در پایگاه داده

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

یک نگاه اجمالی به کد

هنوز پروژه‌ای نساخته‌ایم و ساخت آن در درس ساخت پروژه با create-next-app انجام می‌شود. اما برای حس‌گرفتن از طرز کار Next.js، دو فایل ساده را ببینید. توجه کنید که فقط محل فایل‌ها مسیر صفحه را تعیین می‌کند.

فایل app/page.tsx (صفحه‌ی اصلی، مسیر /)

export default function HomePage() {
  return (
    <main>
      <h1>DevNotes</h1>
      <p>نوشته‌های فنی، ساده و مرتب.</p>
    </main>
  );
}

فایل app/about/page.tsx (صفحه‌ی درباره‌ی ما، مسیر /about)

export default function AboutPage() {
  return (
    <main>
      <h1>درباره‌ی DevNotes</h1>
      <p>این پروژه‌ی آموزشی دوره‌ی Next.js 16 است.</p>
    </main>
  );
}

توضیح کد

• هر فایل با نام page.tsx یک صفحه تعریف می‌کند و باید یک کامپوننت را به‌صورت export default صادر کند.
• مسیر صفحه از مسیر پوشه ساخته می‌شود: فایل داخل app مسیر / و فایل داخل app/about مسیر /about را می‌سازد.
• در این مثال هیچ کتابخانه‌ی مسیریابی نصب یا پیکربندی نشده است.
• این کامپوننت‌ها به‌صورت پیش‌فرض Server Component هستند، یعنی روی سرور اجرا می‌شوند. در فصل ۴ دقیق‌تر بررسی می‌شود.

رفتار مورد انتظار

پس از ساخت و اجرای پروژه، مرورگر در آدرس / عنوان «DevNotes» و در آدرس /about عنوان «درباره‌ی DevNotes» را نشان می‌دهد. HTML این صفحات از سمت سرور آماده می‌شود، نه اینکه مرورگر ابتدا یک صفحه‌ی خالی بگیرد و بعد آن را با JavaScript بسازد.

Next.js چه چیزی نیست؟

• زبان یا جایگزین React نیست: کامپوننت‌ها همچنان با React و JSX نوشته می‌شوند و Next.js بر پایه‌ی React ساخته شده است.
• فقط ابزار ساخت سایت استاتیک نیست: می‌تواند صفحات استاتیک و پویا و همچنین منطق سمت سرور را پوشش دهد.
• پلتفرم میزبانی نیست: Next.js فریم‌ورک است و می‌توان آن را روی Vercel یا روی سرور خودتان با Node.js و Docker اجرا کرد. موضوع فصل ۱۶.
• راه‌حل همه‌ی پروژه‌ها نیست: برای یک صفحه‌ی ساده‌ی کاملاً سمت مرورگر یا یک ابزار کوچک، گاهی React ساده یا ابزار سبک‌تر کافی است.

اشتباهات رایج

• فکر کردن اینکه Next.js و React دو رقیب‌اند. Next.js از React استفاده می‌کند و آن را کامل می‌کند.
• تصور اینکه Next.js فقط برای SEO است. SEO یکی از مزایاست، اما مسیریابی، دریافت داده، Server Actions و ساختار پروژه نیز بخش مهمی از ارزش آن هستند.
• یادگیری از آموزش‌های قدیمی. بسیاری از آموزش‌های آنلاین برای Pages Router یا نسخه‌های قدیمی‌تر نوشته شده‌اند. در این دوره فقط App Router و Next.js 16 را یاد می‌گیریم.
• تصور اینکه همه‌ی کدها در مرورگر اجرا می‌شوند. در Next.js بخشی از کد روی سرور اجرا می‌شود و این تفاوت در فصل‌های بعد اهمیت زیادی پیدا می‌کند.

جمع‌بندی

• Next.js یک فریم‌ورک فول‌استک مبتنی بر React است که مسیریابی، رندر، دریافت داده، کش، منطق سرور و بهینه‌سازی را در یک ساختار منسجم ارائه می‌دهد.
• مسائلی مثل صفحه‌ی خالی اولیه، تنظیمات پراکنده‌ی ابزارها، حجم زیاد JavaScript سمت کلاینت و نیاز به سرور جداگانه را کاهش می‌دهد.
• در این دوره با ساخت پروژه‌ی DevNotes و روی نسخه‌ی ۱۶ و App Router، این قابلیت‌ها را به‌صورت عملی یاد می‌گیریم.
• در درس بعد (CH01-S02) تفاوت دقیق React و Next.js را بررسی می‌کنیم.