پیش‌نیازها و آماده‌سازی محیط توسعه

قبل از ساخت اولین پروژه‌ی Next.js باید دو چیز را آماده کنیم: دانش پایه‌ای که برای فهم درس‌ها لازم است و ابزارهایی که روی سیستم شما نصب می‌شوند. در این درس هر دو را مرور می‌کنیم و در پایان مطمئن می‌شویم که سیستم شما برای ساخت پروژه در درس بعد (ساخت پروژه با create-next-app) آماده است.

پیش‌نیاز

  • درس‌های CH01-S01 و CH01-S02
  • دسترسی به یک سیستم‌عامل Windows، macOS یا Linux و اتصال به اینترنت برای دانلود ابزارها و بسته‌ها

پیش‌نیازهای دانشی

این دوره ادامه‌ی دوره‌های HTML5، CSS3، JavaScript و React است. برای اینکه درس‌ها را راحت دنبال کنید، باید با این مفاهیم آشنا باشید:

حوزه آنچه باید بدانید
HTML و CSS تگ‌های معنایی، فرم‌ها، Flexbox و Grid در حد پایه، و آشنایی با راست‌چین‌سازی
JavaScript توابع، آرایه‌ها و آبجکت‌ها، ماژول‌های ES (import و export)، Promise و async/await
React کامپوننت، JSX، Props، State و Hookهای پایه مانند useState
ترمینال باز کردن خط فرمان، جابه‌جایی بین پوشه‌ها و اجرای دستورات ساده

تجربه‌ی قبلی با TypeScript الزامی نیست. کدهای دوره با TypeScript نوشته می‌شوند، اما هر جا لازم باشد، نوع‌ها به زبان ساده توضیح داده می‌شوند.

ابزارهای موردنیاز

برای کار با Next.js 16 به این ابزارها نیاز دارید:

  1. Node.js: Next.js برای اجرای سرور توسعه، Build و اجرای برنامه از Node.js استفاده می‌کند.
  2. مدیر بسته (Package Manager): ابزاری برای نصب و مدیریت کتابخانه‌ها. همراه Node.js، ابزار npm نصب می‌شود و ما در این دوره از همان استفاده می‌کنیم.
  3. ویرایشگر کد: پیشنهاد این دوره Visual Studio Code است، اما هر ویرایشگری که از TypeScript پشتیبانی کند قابل استفاده است.
  4. مرورگر مدرن: برای دیدن نتیجه و بررسی برنامه.
  5. Git (توصیه‌شده): برای نسخه‌بندی کد. برای دنبال‌کردن درس‌ها الزامی نیست، اما در پروژه‌ی واقعی و در فصل استقرار بسیار مفید است.

حداقل نسخه‌های موردنیاز در Next.js 16

بر اساس مستندات رسمی Next.js، نسخه‌ی ۱۶ این حداقل‌ها را می‌خواهد:

مورد حداقل نسخه توضیح
Node.js 20.9.0 نسخه‌ی LTS؛ Node.js 18 دیگر پشتیبانی نمی‌شود
TypeScript 5.1.0 در پروژه‌ی ساخته‌شده به‌عنوان وابستگی نصب می‌شود و نیازی به نصب سراسری ندارد
Chrome و Edge 111 برای اجرای برنامه‌ی ساخته‌شده
Firefox 111 برای اجرای برنامه‌ی ساخته‌شده
Safari 16.4 برای اجرای برنامه‌ی ساخته‌شده

توصیه می‌شود به‌جای حداقل نسخه، آخرین نسخه‌ی LTS پایدار Node.js را نصب کنید. نسخه‌های LTS برای استفاده در پروژه‌های واقعی طراحی شده‌اند و پشتیبانی بلندمدت دارند.

گام ۱: نصب Node.js

ساده‌ترین روش، دانلود نصب‌کننده‌ی نسخه‌ی LTS از وب‌سایت رسمی Node.js (nodejs.org) و اجرای آن است. نصب‌کننده Node.js و npm را با هم نصب می‌کند.

اگر قصد دارید روی چند پروژه با نسخه‌های مختلف Node.js کار کنید، می‌توانید از یک مدیر نسخه مثل nvm یا fnm استفاده کنید. این کار برای این دوره الزامی نیست و استفاده از نصب‌کننده‌ی رسمی کافی است.

گام ۲: بررسی نصب

یک ترمینال جدید باز کنید (در Windows می‌توانید از PowerShell یا ترمینال داخلی VS Code استفاده کنید) و این دستورات را اجرا کنید:

bash
node -v
npm -v

دستور اول نسخه‌ی Node.js و دستور دوم نسخه‌ی npm را نشان می‌دهد.

خروجی مورد انتظار

text
v22.12.0
10.9.0

شماره‌های دقیق در سیستم شما ممکن است فرق کند. شرط لازم این است که عدد نسخه‌ی Node.js برابر یا بزرگ‌تر از v20.9.0 باشد. اگر نسخه‌ی کمتری دیدید یا پیام «command not found» گرفتید، Node.js را دوباره نصب یا به‌روزرسانی کنید و ترمینال را کاملاً ببندید و دوباره باز کنید.

گام ۳: یک آزمون سریع برای Node.js

برای اطمینان از اینکه Node.js واقعاً کد JavaScript را اجرا می‌کند، این دستور را بزنید:

bash
node -e "console.log('Node.js is ready')"

اگر همه‌چیز درست باشد، متن Node.js is ready در ترمینال چاپ می‌شود. گزینه‌ی -e به Node.js می‌گوید کد داخل نقل‌قول را مستقیماً اجرا کند.

گام ۴: آماده‌سازی ویرایشگر کد

اگر از Visual Studio Code استفاده می‌کنید، این موارد کار شما را راحت‌تر می‌کنند:

  • پشتیبانی از TypeScript: به‌صورت داخلی در VS Code وجود دارد و نیازی به افزونه‌ی جدا ندارد. Next.js هم یک افزونه‌ی TypeScript برای تکمیل خودکار و بررسی نوع‌ها ارائه می‌کند.
  • افزونه‌ی ESLint: خطاها و هشدارهای کیفیت کد را همان لحظه در ویرایشگر نشان می‌دهد. در پروژه‌های ساخته‌شده با create-next-app، ESLint پیکربندی می‌شود.
  • افزونه‌ی Tailwind CSS IntelliSense (اختیاری): اگر در پروژه از Tailwind استفاده کنید، تکمیل خودکار کلاس‌ها را فعال می‌کند. در فصل ۱۱ با Tailwind کار می‌کنیم.
  • افزونه‌ی Prettier (اختیاری): برای قالب‌بندی یکدست کد.

نمایش درست متن فارسی و راست‌چین در ویرایشگر، بخشی از تنظیمات صفحه‌ی وب (dir="rtl") است و در درس‌های فصل ۲ انجام می‌شود، نه تنظیمات ویرایشگر.

گام ۵: نصب Git (توصیه‌شده)

با دستور زیر بررسی کنید که Git روی سیستم شما نصب است یا نه:

bash
git --version

اگر نسخه‌ای نمایش داده شد، آماده‌اید. اگر نه، Git را از وب‌سایت رسمی آن نصب کنید. هنگام ساخت پروژه، create-next-app می‌تواند خودش یک مخزن Git اولیه بسازد، بنابراین داشتن Git کار بعدی را ساده‌تر می‌کند.

گام ۶: آشنایی با npm در حد لازم

npm همراه Node.js نصب می‌شود. در این دوره با سه کاربرد آن سروکار داریم:

دستور کاربرد
npm install نصب همه‌ی وابستگی‌های تعریف‌شده در package.json
npm install نام-بسته اضافه‌کردن یک کتابخانه‌ی جدید به پروژه
npm run نام-اسکریپت اجرای یکی از اسکریپت‌های تعریف‌شده در package.json، مثل npm run dev

اگر ترجیح می‌دهید از pnpm، yarn یا bun استفاده کنید، Next.js از آن‌ها هم پشتیبانی می‌کند. دستورهای این دوره با npm نوشته می‌شوند تا همه‌چیز یکدست بماند.

پروژه‌ی DevNotes و آمادگی شما

در درس بعد، پروژه‌ی DevNotes را با create-next-app می‌سازیم. این ابزار از طریق npm اجرا می‌شود و بسته‌های موردنیاز را از اینترنت دریافت می‌کند، پس هم Node.js و هم اتصال اینترنت لازم است. در فصل ۱۲ هم پایگاه داده‌ی SQLite با Prisma به پروژه اضافه می‌شود؛ چیزی که برای آن لازم است در همان فصل توضیح داده می‌شود و در این مرحله نیازی به نصب جداگانه ندارد.

چک‌لیست آمادگی

  • دستور node -v نسخه‌ای برابر یا بزرگ‌تر از v20.9.0 نشان می‌دهد.
  • دستور npm -v بدون خطا اجرا می‌شود.
  • یک ویرایشگر کد (ترجیحاً VS Code) نصب است.
  • یکی از مرورگرهای Chrome، Edge، Firefox یا Safari با نسخه‌ی پشتیبانی‌شده در اختیار دارید.
  • (توصیه‌شده) دستور git --version اجرا می‌شود.
  • با باز کردن ترمینال و جابه‌جایی بین پوشه‌ها راحت هستید.

جمع‌بندی

  • برای دنبال‌کردن دوره به آشنایی با HTML، CSS، JavaScript و مفاهیم پایه‌ی React نیاز دارید؛ تجربه‌ی TypeScript الزامی نیست.
  • Next.js 16 حداقل به Node.js نسخه‌ی 20.9 و TypeScript نسخه‌ی 5.1 نیاز دارد. Node.js 18 دیگر پشتیبانی نمی‌شود.
  • ابزارهای اصلی ما Node.js (همراه npm)، یک ویرایشگر کد، یک مرورگر مدرن و در صورت امکان Git هستند.
  • با دستورهای node -v و npm -v می‌توانید آمادگی سیستم را بررسی کنید.
  • در درس بعد (CH01-S04) اولین پروژه‌ی Next.js را با create-next-app می‌سازیم.