در این مقاله، به معرفی Next.js می‌پردازیم و نحوه راه‌اندازی اولین پروژه با این فریم‌ورک قدرتمند را به شما آموزش می‌دهیم. پس از پایان این آموزش، یک پروژه آماده و پایه‌ای برای شروع توسعه خواهید داشت.

پیش‌نیازها

پیش از آغاز، مطمئن شوید که ابزارهای زیر روی سیستم شما نصب شده باشند:

• Node.js
  اطمینان حاصل کنید که نسخه‌ای به‌روز از Node.js نصب شده باشد. اگر نصب ندارید، می‌توانید آن را از وب‌سایت رسمی دانلود کنید.
• Visual Studio Code (VS Code)
  یک ویرایشگر کد محبوب و کاربرپسند برای مدیریت و ویرایش پروژه‌ها.
• Git Bash (اختیاری)
  یک ترمینال کمکی برای اجرای دستورات Git (الزامی نیست، اما می‌تواند مفید باشد).

راه‌اندازی پروژه Next.js

برای راه‌اندازی اولین پروژه Next.js مراحل زیر را دنبال کنید:

1. باز کردن ترمینال یا Command Prompt
   ابتدا ترمینال سیستم خود را باز کنید.

2. ایجاد اپلیکیشن جدید
   دستور زیر را اجرا کنید:

    

   npx create-next-app@latest

3. وارد پوشه پروژه شوید
   دستور زیر را وارد کنید:

    

   cd your-project-name

4. باز کردن پروژه در VS Code
   با استفاده از دستور زیر، پروژه را در VS Code باز کنید:

    

   code .

5. اجرای سرور توسعه
   دستور زیر را اجرا کنید:

    

   npm run dev

6. مشاهده اپلیکیشن در مرورگر
   مرورگر خود را باز کرده و آدرس زیر را وارد کنید تا پروژه خود را مشاهده کنید:

   http://localhost:3000

Next.js چیست؟

Next.js یک فریم‌ورک قدرتمند مبتنی بر React است که به توسعه‌دهندگان کمک می‌کند اپلیکیشن‌های سریع، مقیاس‌پذیر و بهینه وب بسازند. این فریم‌ورک با ارائه ابزارهای پیشرفته، فرآیند توسعه را ساده‌تر کرده و ویژگی‌های زیر را فراهم می‌کند:

• مسیر‌یابی مبتنی بر فایل: به‌طور خودکار مسیر‌ها را بر اساس ساختار فایل‌ها ایجاد می‌کند.
• رندر سمت سرور (SSR): امکان رندر داینامیک صفحات روی سرور را فراهم می‌کند.
• تولید سایت استاتیک (SSG): صفحات را به‌صورت استاتیک برای افزایش سرعت تولید می‌کند.
• مسیرهای API: قابلیت ایجاد API سمت سرور به‌صورت داخلی در پروژه.
• ابزارهای بهینه‌سازی عملکرد: مانند بهینه‌سازی تصاویر و جداسازی کدها.

برای اطلاعات بیشتر، می‌توانید به مستندات رسمی Next.js مراجعه کنید.

Youtube Video here

مراحل بعدی

در این آموزش، با Next.js آشنا شدید و اولین پروژه خود را راه‌اندازی کردید. در جلسه بعدی، موضوعات زیر را بررسی خواهیم کرد:

1. ساختار پیش‌فرض پروژه را مرور می‌کنیم.
2. فایل‌های اضافی و غیرضروری را حذف می‌کنیم.
3. نحوه کار با پوشه pages را برای ایجاد اولین کامپوننت‌ها و مسیرها یاد می‌گیریم.

نتیجه‌گیری:
در این درس، یک پروژه تمیز و آماده توسعه ایجاد کردید. با این پروژه، آماده شروع مسیر یادگیری عمیق‌تر با Next.js هستید!

https://www.youtube.com/watch?v=d1v3bugP8jI&t=1s