Next.js چیست؟

Next.js یک فریم‌ورک متن‌باز و مبتنی بر React است که توسط شرکت Vercel (قبلاً ZEIT) توسعه داده شده است. این فریم‌ورک برای ساخت اپلیکیشن‌های وب مدرن با قابلیت‌های سرور-ساید رندرینگ (SSR) و تولید سایت استاتیک (SSG) طراحی شده است.

ویژگی‌های اصلی Next.js

۱. رندرینگ سمت سرور (SSR)

Next.js به طور پیش‌فرض از رندرینگ سمت سرور پشتیبانی می‌کند. این قابلیت به بهبود SEO و زمان نمایش اولیه صفحه کمک می‌کند.

۲. تولید سایت استاتیک (SSG)

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

۳. مسیریابی خودکار

Next.js دارای سیستم مسیریابی مبتنی بر فایل است که به طور خودکار مسیرهای اپلیکیشن شما را بر اساس ساختار فایل‌های موجود در پوشه pages یا app ایجاد می‌کند.

۴. بهینه‌سازی تصاویر

کامپوننت Image در Next.js امکان بهینه‌سازی خودکار تصاویر را فراهم می‌کند، که شامل تغییر اندازه، بهینه‌سازی و ارائه تصاویر در فرمت‌های مدرن است.

۵. پشتیبانی از API Routes

Next.js به شما امکان می‌دهد تا API endpoints را مستقیماً در پروژه خود ایجاد کنید، بدون نیاز به راه‌اندازی یک سرور جداگانه.

شروع کار با Next.js

برای شروع کار با Next.js، می‌توانید از دستور زیر استفاده کنید:

npx create-next-app@latest my-next-app

این دستور یک پروژه جدید Next.js با تنظیمات پیش‌فرض ایجاد می‌کند.

ساختار پروژه Next.js

یک پروژه Next.js معمولاً شامل فایل‌ها و پوشه‌های زیر است:

• pages/ یا app/: حاوی صفحات و مسیرهای اپلیکیشن
• public/: فایل‌های استاتیک مانند تصاویر و فونت‌ها
• styles/: فایل‌های CSS
• components/: کامپوننت‌های React قابل استفاده مجدد
• next.config.js: فایل پیکربندی Next.js

ایجاد صفحات در Next.js

در Next.js، هر فایل JavaScript یا TypeScript در پوشه pages/ یا app/ به یک مسیر در اپلیکیشن تبدیل می‌شود.

برای مثال:

// pages/index.js - مسیر /
export default function Home() {
  return 
صفحه اصلی
;
}

// pages/about.js - مسیر /about
export default function About() {
  return 
درباره ما
;
}

استفاده از App Router در Next.js 13+

از نسخه 13 به بعد، Next.js از یک سیستم مسیریابی جدید به نام App Router پشتیبانی می‌کند که قابلیت‌های بیشتری مانند Layout‌های تو در تو و کامپوننت‌های سرور را ارائه می‌دهد.

// app/page.js - مسیر /
export default function Home() {
  return 
صفحه اصلی
;
}

// app/about/page.js - مسیر /about
export default function About() {
  return 
درباره ما
;
}

نتیجه‌گیری

Next.js یک فریم‌ورک قدرتمند برای توسعه اپلیکیشن‌های React است که با ارائه قابلیت‌های مختلف مانند SSR، SSG و API Routes، تجربه توسعه را بهبود می‌بخشد و به شما کمک می‌کند تا اپلیکیشن‌های وب سریع‌تر و بهینه‌تر بسازید.