بررسی مقدماتی NextJs

مقدمه‌ای بر Next.js 15 – چرا این فریمورک ارزش یادگیری داره؟

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

اما قبل از اینکه وارد جزئیات بشیم، بیاید یه نگاه کلی بندازیم به مهم‌ترین ویژگی‌ها و دلایلی که باعث محبوبیت و قدرت این فریمورک شده.

1. سیستم مسیر‌یابی مدرن (Routing System)

از نسخه 13 به بعد، Next.js از سیستم مسیر‌یابی جدیدی به نام App Router استفاده می‌کنه که در نسخه 15 هم به بلوغ بهتری رسیده.
در این مدل، ساختار پوشه‌ها (app/) تبدیل به اصلی‌ترین روش برای تعریف صفحات، لایه‌ها، و عملکردهای مختلف شده.

کافیه برای ساخت هر مسیر، فقط یک فولدر با اسم مناسب داخل پوشه app/ ایجاد کنیم، و فایل‌هایی مثل:

• page.tsx برای نمایش صفحه

• layout.tsx برای طراحی مشترک بین صفحات

• loading.tsx برای نمایش وضعیت لودینگ

• error.tsx برای هندل ارورها

رو در همون مسیر بذاریم. این ساختار هم ساده‌تره، هم خواناتر، و هم قدرت مانور بیشتری به ما می‌ده.
از نسخه 15، پشتیبانی از route handlers هم بهتر شده که امکان پیاده‌سازی API های سمت سرور (مثل GET, POST, ...) مستقیماً در مسیرهای دلخواه فراهم شده.

2. کامپوننت‌های سمت سرور (Server Components)

یکی از ویژگی‌های بسیار مهم React 18 و Next.js 13+، معرفی Server Components هست؛ و در Next.js 15، پشتیبانی کامل و یکپارچه‌ای از اون داریم.

ولی اصلاً Server Component یعنی چی؟
فرض کنید یک صفحه سایت داریم که بخشی از اون فقط نمایش اطلاعاته (بدون تعامل کاربر مثل کلیک یا تایپ). این بخش‌ها می‌تونن کاملاً در سمت سرور رندر بشن، بدون اینکه نیاز باشه به مرورگر JS تحویل بدیم.

✅ مزایای Server Components:

• کاهش حجم JavaScript سمت کلاینت

• افزایش سرعت بارگذاری صفحات

• قابلیت کش کردن در سطح سرور (Server Cache)

• عملکرد بهتر در SEO

درواقع با Server Components فقط بخش‌های تعاملی وارد کلاینت می‌شن و بقیه مستقیماً روی سرور پردازش و رندر می‌شن.

3. واکشی داده‌ها (Data Fetching)

Next.js در نسخه‌های جدید، مدل یکپارچه‌تری برای واکشی داده‌ها ارائه داده که با استفاده از async کامپوننت‌ها به راحتی می‌تونید از سرور دیتا بگیرید.

مدل‌های رایج واکشی داده در Next.js:

• Server Side Rendering (SSR): هر بار که صفحه درخواست داده می‌شه، داده از سرور گرفته می‌شه.

• Static Site Generation (SSG): یک بار در زمان build یا طبق زمان‌بندی دلخواه، داده‌ها گرفته و صفحه تولید می‌شه.

• Incremental Static Regeneration (ISR): به صورت خودکار، صفحات استاتیک بعد از زمان مشخصی دوباره ساخته می‌شن (مثلاً هر ۱۲ ساعت).

در App Router جدید، می‌تونید از تابع fetch یا prisma یا حتی مستقیم از دیتابیس داخل Server Component استفاده کنید؛ و چون همه چیز async-first طراحی شده، خیلی روان و مدرن کار می‌کنه.

✨ مثال ساده:

// app/products/page.tsx
import { getProducts } from '@/lib/data';

export default async function ProductsPage() {
  const products = await getProducts();
  return <ProductList items={products} />;
}

4. بهبود عملکرد و بهینه‌سازی پیش‌فرض‌ها (Performance)

Next.js از ابتدا روی عملکرد تمرکز داشته، اما از نسخه‌های 13 به بعد و حالا در نسخه 15، بسیاری از قابلیت‌های بهینه‌سازی به صورت پیش‌فرض فعال هستن:

• استفاده از کامپوننت Image بهینه‌شده که تصاویر رو lazy load و فشرده می‌کنه

• فونت‌های بهینه با next/font (مثل Google Fonts یا Local Fonts)

• پیش‌بارگذاری خودکار صفحات (Prefetching)

• تقسیم‌بندی خودکار کد (Code Splitting)

• کش کردن سمت سرور و edge

این یعنی بدون تلاش اضافه، صفحات سریع‌تر، سبک‌تر و برای موتورهای جست‌وجو مناسب‌تر خواهند بود.