Next.js چیست؟ راهنمای ساده برای سازندگان اپ
Next.js یک فریم‌ورک برای ساختن وب‌سایت‌ها و اپ‌های وب با React است. React بلوک‌های سازنده رابط را می‌دهد: دکمه، فرم، فهرست. Next.js بقیه وب‌سایت را دور آن‌ها اضافه می‌کند: صفحه‌ها و URLها، رندر صفحه‌ها در سرور تا آماده خواندن برسند، بارگذاری داده، و اجرای کد بک‌اند در همان پروژه. این فریم‌ورک متن‌باز است، توسط شرکت Vercel ساخته شده و یکی از پرکاربردترین راه‌ها برای ساخت سایت‌های React است.
چرا Next.js وقتی با هوش مصنوعی می‌سازید اهمیت دارد
وقتی اپی را برای یک ابزار ساخت با هوش مصنوعی توصیف می‌کنید، آن ابزار باید یک پایه فنی انتخاب کند. این انتخاب بر چیزهایی که بعداً برایتان مهم است اثر می‌گذارد:
- دیده شدن در جستجو. یک سایت عمومی که باید در گوگل رتبه بگیرد از ارسال HTML واقعی سود می‌برد، و Next.js این کار را خوب انجام می‌دهد.
- جای بک‌اند. Next.js اجازه می‌دهد صفحه‌های فرانت‌اند و کد سرور (مثل «این فرم را ذخیره کن» یا «API پرداخت را صدا بزن») در یک پروژه باشند.
- میزبانی. یک اپ Next.js با امکانات سرور به سروری برای اجرا نیاز دارد، در حالی که یک اپ ساده Vite را می‌توان به‌صورت فایل‌های استاتیک ارائه داد.
Mythex به‌طور پیش‌فرض پروژه‌های جدید را با Vite + React + TypeScript + Tailwind شروع می‌کند و وقتی شما بخواهید از Next.js استفاده می‌کند؛ گفتن «از Next.js استفاده کن» در اولین پرامپت کافی است (نحوه انتخاب فناوری). پس دانستن اینکه کی ارزش دارد آن را درخواست کنید، مفید است.
یک مثال روزمره
اگر React یک جعبه آجرهای لگوی باکیفیت باشد، Next.js مثل یک مجموعه لگو است که دفترچه راهنما، صفحه پایه و قطعات درب و لوله‌کشی از قبل در آن هست.
می‌توانید همان خانه را از آجرهای جدا بسازید، فقط باید خودتان تصمیم بگیرید اتاق‌ها چطور به هم وصل شوند، در ورودی کجا باشد و آب از کجا بیاید. Next.js این تصمیم‌ها را به شکل استاندارد برای شما می‌گیرد، پس هر پروژه Next.js چیدمان مشابهی دارد و یک توسعه‌دهنده تازه (یا یک هوش مصنوعی) سریع راهش را پیدا می‌کند.
آنچه Next.js به React اضافه می‌کند
| امکان | معنی برای شما |
|---|---|
| مسیریابی مبتنی بر فایل | هر صفحه یک فایل است. فایل app/pricing/page.tsx می‌شود صفحه /pricing. بدون تنظیم اضافی. |
| رندر در سرور | صفحات می‌توانند برای هر درخواست در سرور به HTML تبدیل شوند، تا سریع نمایش داده شوند و موتورهای جستجو بتوانند بخوانندشان. |
| تولید استاتیک | صفحه‌هایی که به‌ندرت تغییر می‌کنند می‌توانند از قبل یک بار ساخته شوند و خیلی سریع ارائه شوند. |
| Server Components | بخش‌هایی از صفحه می‌توانند فقط در سرور اجرا شوند؛ داده را مستقیم از پایگاه داده بخوانند و HTML آماده بفرستند، نه کد، به مرورگر. |
| Route handlers و server actions | کد بک‌اند، مثل یک endpoint API یا هندلر فرم، در همان پروژه صفحه‌ها زندگی می‌کند. |
| بهینه‌سازی‌های داخلی | تغییر اندازه تصاویر، بارگذاری فونت‌ها و تقسیم کد به‌صورت خودکار انجام می‌شود. |
Next.js دو روش برای سازماندهی صفحه‌ها دارد. App Router (پوشه app/) روش جدیدتر است و از Server Components پشتیبانی می‌کند. Pages Router (پوشه pages/) روش اولیه است و هنوز پشتیبانی می‌شود. پروژه‌های جدید معمولاً از App Router استفاده می‌کنند. اگر کد ابزار ساختتان یا یک آموزش برایتان ناآشنا بود، این اغلب دلیلش است.
یک مثال کامل: دایرکتوری عمومی کافه‌های محلی
فرض کنید می‌خواهید سایتی بسازید که کافه‌های شهرتان را فهرست می‌کند، با یک صفحه برای هر کافه، و می‌خواهید در نتایج جستجو دیده شود.
یک صفحه Next.js برای یک کافه تقریباً این شکل را دارد:
// app/cafes/[slug]/page.tsx → /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
const { slug } = await params;
const cafe = await db.cafe.findUnique({ where: { slug } });
return (
<main>
<h1>{cafe.name}</h1>
<p>{cafe.address}</p>
</main>
);
}
آنچه وقتی کسی (یا گوگل) به /cafes/blue-door می‌رود اتفاق می‌افتد:
- Next.js آدرس را با آن فایل تطبیق می‌دهد. پوشه
[slug]یعنی «هر کافه». - کامپوننت روی سرور اجرا می‌شود، کافه را از پایگاه داده می‌خواند و HTML را می‌سازد.
- مرورگر یک صفحه کامل دریافت می‌کند که نام و آدرس کافه از قبل در آن است، بدون منتظر ماندن برای اجرای جاوااسکریپت برای گرفتن داده.
در مقابل، با یک اپ ساده React سمت کلاینت، مرورگر ابتدا یک صفحه تقریباً خالی می‌گیرد، سپس جاوااسکریپت را دانلود می‌کند، بعد کافه را می‌گیرد و در نهایت نشان می‌دهد. موتورهای جستجو اغلب می‌توانند این را مدیریت کنند، اما یک صفحه کاملاً ساخته‌شده مطمئن‌تر است. ببینید SEO برای سایت‌های ساخته‌شده با هوش مصنوعی.
در مقابل، یک داشبورد داخلی پشت ورود را در نظر بگیرید: موتورهای جستجو اصلاً نمی‌توانند آن را ببینند، پس رندر سمت سرور فایده کمتری دارد و یک اپ ساده‌تر Vite اغلب گزینه بهتری است.
اصطلاحات کلیدی
| اصطلاح | معنی |
|---|---|
| Framework (فریم‌ورک) | ساختاری با قواعد که تعیین می‌کند اپ چطور سازماندهی شود. Next.js یک فریم‌ورک است؛ React یک کتابخانه است. |
| SSR (رندر سمت سرور) | ساختن HTML یک صفحه در سرور برای هر بازدید. |
| SSG (تولید استاتیک سایت) | ساختن صفحه‌ها به HTML از پیش، در زمان استقرار. |
| CSR (رندر سمت کلاینت) | مرورگر صفحه را بعد از بارگذاری با جاوااسکریپت می‌سازد. یک اپ معمولی Vite + React به این شکل کار می‌کند. |
| SPA (اپ تک‌صفحه‌ای) | اپی که یک بار بارگذاری می‌شود و نماها را در مرورگر بدون بارگذاری کامل صفحه عوض می‌کند. |
| Hydration | مرورگر HTML ارسال‌شده از سرور را «بیدار» می‌کند تا دکمه‌ها و فرم‌ها تعاملی شوند. |
| Route (مسیر) | یک مسیر URL مثل /pricing و کدی که به آن پاسخ می‌دهد. |
تصورات غلط رایج
- «Next.js جای React را می‌گیرد.» نه، از React استفاده می‌کند. کامپوننت‌های شما هنوز کامپوننت‌های React هستند.
- «Next.js همیشه انتخاب بهتری است.» قدرتمندتر است، و در عین حال چیزهای بیشتری برای فهمیدن دارد. رندر سرور، کش‌کردن و تفاوت کد سرور و کلاینت منابع رایج باگ‌های گیج‌کننده‌اند. برای اپی که بیشتر پشت ورود است، یک اپ ساده React اغلب ساده‌تر است.
- «Next.js فقط روی Vercel اجرا می‌شود.» متن‌باز است و می‌تواند روی هر سرور Node.js یا در کانتینر Docker اجرا شود. اگر از امکانات سرور استفاده نکنید، خروجی کاملاً استاتیک هم ممکن است.
- «استفاده از Next.js SEO خوب را تضمین می‌کند.» صفحه‌های قابل‌خواندن را آسان‌تر می‌کند. رتبه‌ها هنوز به عنوان‌ها، محتوا، سرعت و لینک‌ها بستگی دارند.
- «کد سرور در Next.js به‌طور خودکار خصوصی است.» کدی که برای کلاینت علامت‌گذاری شده در مرورگر می‌رود. رمزها باید در کد فقط سرور و متغیرهای محیطی بمانند.
از ابزار ساخت با هوش مصنوعی‌تان چه بخواهید
- «از Next.js با App Router استفاده کن» — در اولین پرامپت، اگر این را می‌خواهید.
- «کدام صفحه‌ها در سرور رندر می‌شوند، کدام استاتیک‌اند و کدام در مرورگر اجرا می‌شوند — و چرا؟»
- «صفحه‌های عمومی بازاریابی و فهرست را رندرشده در سرور یا استاتیک بساز، با عنوان و توضیحات مناسب.»
- «کلیدهای API را در کد فقط سرور و متغیرهای محیطی نگه دار. نشانم بده هر کدام کجا خوانده می‌شود.»
- «آیا این اپ به Next.js نیاز دارد، یا برای کاری که می‌سازیم یک اپ Vite + React ساده‌تر است؟»
Next.js در Mythex
Mythex به‌طور پیش‌فرض از Vite + React + TypeScript + Tailwind استفاده می‌کند و وقتی در پرامپتتان بخواهید به Next.js می‌رود؛ نام بردنش از ابتدا نسبت به تغییر بعداً اعتبار کمتری مصرف می‌کند. اپ را در Preview زنده می‌بینید و با Publish بدون راه‌اندازی میزبانی خودتان روی یک آدرس زنده منتشر می‌شود. مستندات Mythex یادآوری می‌کند که اپ‌های تک‌صفحه‌ای رندرشده در کلاینت SEO ضعیف‌تری نسبت به HTML رندرشده در سرور یا استاتیک دارند، پس برای یک سایت بازاریابی که جستجو در آن مهم است، بهتر است از همان ابتدا این را بگویید (SEO برای اپتان).
پرسش‌ها
Next.js به زبان ساده چیست؟
Next.js فریم‌ورکی است که روی React ساخته شده. React بخش‌های رابط کاربری را می‌سازد؛ Next.js بقیه وب‌سایت را دور آن‌ها اضافه می‌کند، یعنی صفحه‌ها و URLها، رندر در سرور، بارگذاری داده و کد بک‌اند، تا بتوانید یک اپ کامل وب را در یک پروژه بسازید.
تفاوت React و Next.js چیست؟
React کتابخانه‌ای برای ساختن کامپوننت‌های رابط است. Next.js فریم‌ورکی است که از React استفاده می‌کند و مسیریابی، رندر در سرور، صفحات استاتیک و کد سمت سرور اضافه می‌کند. هر اپ Next.js یک اپ React است، اما هر اپ React از Next.js استفاده نمی‌کند.
آیا Next.js برای SEO بهتر است؟
می‌تواند باشد. Next.js می‌تواند HTML کامل را از سرور یا از صفحات استاتیک از پیش ساخته‌شده به موتورهای جستجو و بازدیدکنندگان بفرستد، در حالی که یک اپ React ساده سمت کلاینت صفحه تقریباً خالی می‌فرستد که جاوااسکریپت بعداً آن را پر می‌کند. عنوان‌ها، توضیحات و محتوای خوب هنوز از فریم‌ورک مهم‌ترند.
برای استفاده از Next.js به Vercel نیاز دارم؟
نه. Next.js متن‌باز است و توسط Vercel ساخته شده، اما می‌تواند روی هر سروری که Node.js اجرا می‌کند، در کانتینر Docker، یا به‌صورت خروجی استاتیک برای سایت‌هایی که امکانات سرور نمی‌خواهند اجرا شود. بعضی امکانات روی Vercel راحت‌تر راه‌اندازی می‌شوند.
برای اپ من Next.js بهتر است یا Vite؟
برای یک اپ با ورود مثل داشبورد یا ابزار داخلی، یک اپ Vite + React ساده‌تر است و خوب کار می‌کند. Next.js وقتی ارزش دارد که به محتوایی نیاز دارید که موتورهای جستجو راحت بخوانند، صفحات عمومی زیادی دارید، یا صفحات رندرشده در سرور را کنار کد بک‌اندتان در همان پروژه می‌خواهید.