دوره آموزشی تسلط بر Next.js با ساخت اپلیکیشنهای مقیاسپذیر با مسیریابی، پایگاه داده و بهینهسازی عملکرد
13 ساعت 46 دقیقهمتوسط2026-02-23
مدرسین

Packt Publishing
جزئیات دوره
در دنیای توسعه وب مدرن، ساخت برنامههایی که هم سریع، مقیاسپذیر و بهینه باشند و هم تجربه کاربری حرفهای ارائه دهند، به یکی از مهمترین مهارتهای توسعهدهندگان Front-End تبدیل شده است. Next.js (نکست جیاس) بهعنوان یک فریمورک قدرتمند مبتنی بر React (ریاکت)، امکانات پیشرفتهای مانند رندر سمت سرور، مسیریابی مدرن، بهینهسازی عملکرد و توسعه Full-Stack را در اختیار برنامهنویسان قرار میدهد.
این دوره یک مسیر جامع برای ورود به دنیای Next.js ارائه میدهد و شما را از مفاهیم پایه این فریمورک تا ساخت یک پروژه واقعی تجارت الکترونیک (Ecommerce Application) همراهی میکند. در طول دوره، تفاوتهای کلیدی Next.js و React، ساختار پروژهها، معماری برنامه و روشهای توسعه اپلیکیشنهای مدرن را یاد خواهید گرفت.
در بخش ابتدایی دوره، با مفاهیم اصلی Next.js و نحوه راهاندازی پروژه آشنا میشوید. شما یاد میگیرید Next.js چگونه قابلیتهای React را گسترش میدهد و چه تفاوتهایی در زمینه رندرینگ، مدیریت مسیرها و ساختار برنامه نسبت به React خام دارد.
سپس با سیستمهای مسیریابی مختلف Next.js شامل App Router (اپ روتِر) و Pages Router (پیجس روتِر) کار خواهید کرد. در این بخش، نحوه ایجاد مسیرهای استاتیک و پویا (Dynamic Routing)، مدیریت APIها، طراحی Layoutهای سراسری (Global Layouts) و کنترل فرآیند رندرینگ برای افزایش سرعت برنامه آموزش داده میشود.
یکی از بخشهای مهم دوره، بهینهسازی عملکرد برنامههای Next.js است. در این قسمت با تکنیکهایی مانند Image Optimization (بهینهسازی تصاویر)، CSS Modules (ماژولهای CSS)، مدیریت Cache (Caching) و روشهای مختلف رندرینگ آشنا میشوید تا بتوانید برنامههایی سریع و کارآمد ایجاد کنید.
در ادامه، وارد مباحث توسعه Full-Stack میشوید و یاد میگیرید چگونه Next.js را به پایگاه داده متصل کنید. در این بخش، استفاده از SQLite (اسکیوالایت) و Prisma ORM (پریسما ORM) برای مدیریت دادهها، طراحی مدلها و ایجاد ارتباط میان بخشهای مختلف برنامه آموزش داده میشود.
امنیت برنامه نیز یکی از محورهای اصلی دوره است. شما با پیادهسازی سیستم احراز هویت (Authentication) با استفاده از JWT (JSON Web Token)، Cookieها و Secure Middleware (میانافزارهای امن) آشنا خواهید شد و یاد میگیرید چگونه دسترسی کاربران را در برنامههای واقعی مدیریت کنید.
در بخش پروژه عملی، یک پلتفرم فروشگاه اینترنتی کامل ایجاد میکنید که شامل قابلیتهایی مانند نمایش محصولات، فیلتر کردن کالاها، سبد خرید (Shopping Cart) و پرداخت آنلاین با استفاده از Stripe (استرایپ) است. این پروژه به شما کمک میکند تمام مفاهیم یادگرفتهشده را در یک سناریوی واقعی توسعه نرمافزار به کار بگیرید.
در پایان دوره، با فرآیند آمادهسازی برنامه برای محیط Production آشنا میشوید و تکنیکهای حرفهای مانند CI/CD Pipeline (خطوط یکپارچهسازی و استقرار مداوم)، مهاجرت پایگاه داده به MySQL (مایاسکیوال) و Deployment روی Vercel (ورسِل) را یاد میگیرید.
این دوره برای توسعهدهندگان React که قصد مهاجرت به Next.js دارند، مهندسان Junior و Mid-Level و برنامهنویسان باتجربهای که میخواهند مهارتهای خود را در زمینه Performance Optimization، Authentication و Deployment ارتقا دهند، طراحی شده است.
پس از پایان این دوره، توانایی طراحی و توسعه برنامههای مدرن مبتنی بر Next.js با معماری مقیاسپذیر، امنیت مناسب، مدیریت داده، پرداخت آنلاین و فرآیند استقرار حرفهای را خواهید داشت.
🎯 اهداف یادگیری
ساخت برنامههای مقیاسپذیر با استفاده از Next.js App Router و Pages Router
پیادهسازی سیستم احراز هویت امن با استفاده از JWT، Cookie و Middleware
توسعه Shopping Cart با قابلیت مدیریت محصولات، فیلتر کردن و فرآیند Checkout
بهینهسازی عملکرد برنامهها با استفاده از Caching، Server-Side Rendering و APIها
اتصال برنامههای Next.js به پایگاه داده با استفاده از SQLite و Prisma ORM
توسعه APIهای کاربردی برای مدیریت دادهها و تعامل میان بخشهای مختلف برنامه
طراحی و پیادهسازی یک Ecommerce Application کامل با قابلیت پرداخت آنلاین
مدیریت Routing، Layoutها و ساختار پروژه برای ایجاد برنامههای قابل توسعه
اجرای فرآیندهای CI/CD و آمادهسازی برنامه برای محیط Production
استقرار برنامههای Next.js روی Vercel و مدیریت Migration پایگاه داده MySQL
این دوره یک مسیر جامع برای ورود به دنیای Next.js ارائه میدهد و شما را از مفاهیم پایه این فریمورک تا ساخت یک پروژه واقعی تجارت الکترونیک (Ecommerce Application) همراهی میکند. در طول دوره، تفاوتهای کلیدی Next.js و React، ساختار پروژهها، معماری برنامه و روشهای توسعه اپلیکیشنهای مدرن را یاد خواهید گرفت.
در بخش ابتدایی دوره، با مفاهیم اصلی Next.js و نحوه راهاندازی پروژه آشنا میشوید. شما یاد میگیرید Next.js چگونه قابلیتهای React را گسترش میدهد و چه تفاوتهایی در زمینه رندرینگ، مدیریت مسیرها و ساختار برنامه نسبت به React خام دارد.
سپس با سیستمهای مسیریابی مختلف Next.js شامل App Router (اپ روتِر) و Pages Router (پیجس روتِر) کار خواهید کرد. در این بخش، نحوه ایجاد مسیرهای استاتیک و پویا (Dynamic Routing)، مدیریت APIها، طراحی Layoutهای سراسری (Global Layouts) و کنترل فرآیند رندرینگ برای افزایش سرعت برنامه آموزش داده میشود.
یکی از بخشهای مهم دوره، بهینهسازی عملکرد برنامههای Next.js است. در این قسمت با تکنیکهایی مانند Image Optimization (بهینهسازی تصاویر)، CSS Modules (ماژولهای CSS)، مدیریت Cache (Caching) و روشهای مختلف رندرینگ آشنا میشوید تا بتوانید برنامههایی سریع و کارآمد ایجاد کنید.
در ادامه، وارد مباحث توسعه Full-Stack میشوید و یاد میگیرید چگونه Next.js را به پایگاه داده متصل کنید. در این بخش، استفاده از SQLite (اسکیوالایت) و Prisma ORM (پریسما ORM) برای مدیریت دادهها، طراحی مدلها و ایجاد ارتباط میان بخشهای مختلف برنامه آموزش داده میشود.
امنیت برنامه نیز یکی از محورهای اصلی دوره است. شما با پیادهسازی سیستم احراز هویت (Authentication) با استفاده از JWT (JSON Web Token)، Cookieها و Secure Middleware (میانافزارهای امن) آشنا خواهید شد و یاد میگیرید چگونه دسترسی کاربران را در برنامههای واقعی مدیریت کنید.
در بخش پروژه عملی، یک پلتفرم فروشگاه اینترنتی کامل ایجاد میکنید که شامل قابلیتهایی مانند نمایش محصولات، فیلتر کردن کالاها، سبد خرید (Shopping Cart) و پرداخت آنلاین با استفاده از Stripe (استرایپ) است. این پروژه به شما کمک میکند تمام مفاهیم یادگرفتهشده را در یک سناریوی واقعی توسعه نرمافزار به کار بگیرید.
در پایان دوره، با فرآیند آمادهسازی برنامه برای محیط Production آشنا میشوید و تکنیکهای حرفهای مانند CI/CD Pipeline (خطوط یکپارچهسازی و استقرار مداوم)، مهاجرت پایگاه داده به MySQL (مایاسکیوال) و Deployment روی Vercel (ورسِل) را یاد میگیرید.
این دوره برای توسعهدهندگان React که قصد مهاجرت به Next.js دارند، مهندسان Junior و Mid-Level و برنامهنویسان باتجربهای که میخواهند مهارتهای خود را در زمینه Performance Optimization، Authentication و Deployment ارتقا دهند، طراحی شده است.
پس از پایان این دوره، توانایی طراحی و توسعه برنامههای مدرن مبتنی بر Next.js با معماری مقیاسپذیر، امنیت مناسب، مدیریت داده، پرداخت آنلاین و فرآیند استقرار حرفهای را خواهید داشت.
🎯 اهداف یادگیری
ساخت برنامههای مقیاسپذیر با استفاده از Next.js App Router و Pages Router
پیادهسازی سیستم احراز هویت امن با استفاده از JWT، Cookie و Middleware
توسعه Shopping Cart با قابلیت مدیریت محصولات، فیلتر کردن و فرآیند Checkout
بهینهسازی عملکرد برنامهها با استفاده از Caching، Server-Side Rendering و APIها
اتصال برنامههای Next.js به پایگاه داده با استفاده از SQLite و Prisma ORM
توسعه APIهای کاربردی برای مدیریت دادهها و تعامل میان بخشهای مختلف برنامه
طراحی و پیادهسازی یک Ecommerce Application کامل با قابلیت پرداخت آنلاین
مدیریت Routing، Layoutها و ساختار پروژه برای ایجاد برنامههای قابل توسعه
اجرای فرآیندهای CI/CD و آمادهسازی برنامه برای محیط Production
استقرار برنامههای Next.js روی Vercel و مدیریت Migration پایگاه داده MySQL
سرفصل ها
مقدمه
- مقدمه
- Next.js علیرغم React
- RQ - Next.js علیرغم React
- ایجاد اولین پروژه
- RQ - ایجاد اولین پروژه
- ساختار پروژه
- پرسش و پاسخ - ساختار پروژه
- Pages Router در مقابل App Router
- RQ - Pages Router در مقابل App Router
- React (سمت کلاینت) در مقابل Next.js (سمت سرور)
مبانی Next.js با App Router
- تعریف مسیرها
- مسیرهای تو در تو
- لینک کردن صفحات
- درک طرحبندی سراسری
- ایجاد کامپوننت هدر سراسری
- نام مستعار واردات
- پیکربندی فاوآیکون با استفاده از فایلهای تصویری
- پیکربندی فاویکون با استفاده از کد
- اصول اولیه قطعات
- کامپوننت - ویژگی بهینهسازی خودکار
- RQ - قابلیت بهینهسازی خودکار کامپوننت
- استایلدهی - CSS سراسری و ماژولهای CSS
- RQ - استایلدهی CSS سراسری و ماژولهای CSS
- کامپوننت سرور React در مقابل کامپوننت کلاینت
- RQ - کامپوننت سرور React در مقابل کامپوننت کلاینت
- صفحه خطا
- صفحه یافت نشد
- مسیرهای پویا و پارامترهای مسیر
- فراخوانی API در Next.js
- اجزای سرور ناهمزمان
- RQ - اجزای سرور ناهمزمان
- پیادهسازی کامپوننت بارگذاری
مبانی SQLite
- مقدمهای بر SQLite
- انواع داده در SQLite
- ایجاد پایگاه داده SQLite
Next.js با SQLite
- مقدمه
- راهاندازی پایگاه داده با better-sqlite3
- ایجاد جدول و اضافه کردن دادهها
- رندر کردن دادهها در برنامه بعدی
- پیکربندی مسیرهای پویا برای محصولات
- اصلاح ساختار کد
- پیکربندی دستی Tailwind CSS
- ایجاد رابط افزودن محصول
- مدیریت ارسال فرم با استفاده از اکشن سرور
- اجرای کوئری و تغییر مسیر با استفاده از redirect()
- ایجاد رابط شبکهای محصولات
- RQ - ایجاد رابط شبکهای محصولات
- پیادهسازی ویژگی حذف محصول
- پیادهسازی قابلیت ویرایش
ذخیرهسازی در Next.js
- آشنایی با ذخیره سازی در Next.js
- RQ - درک ذخیرهسازی در Next.js
- رفتار غیرمنتظره در ساخت پروژه
- RQ - رفتار غیرمنتظره در ساخت پروژه
- ایستا به پویا - کنترل حافظه پنهان
- RQ - کنترل حافظه پنهان ایستا به پویا
- کنترل حافظه پنهان مبتنی بر زمان
- RQ - کنترل حافظه پنهان مبتنی بر زمان
- اعتبارسنجی مجدد مبتنی بر مسیر
- RQ - اعتبارسنجی مجدد مبتنی بر مسیر
- اعتبارسنجی مجدد با revalidateTag()
- RQ - اعتبارسنجی مجدد با revalidateTag()
روتر صفحات
- مقدمهای بر صفحات روتر
- RQ - مقدمهای بر Pages Router
- مسیریابی با Pages Router
- استخراج اسلاگ از مسیر پویا
- گرفتن همه بخشها در Pages Router
- RQ - گرفتن همه بخشها در Pages Router
- افزودن رابط سراسری
- پیوند و ناوبری
پریسما با SQLite
- مقدمهای بر پریسما
- RQ - مقدمهای بر Prisma
- راهاندازی پریسما
- ایجاد کلاینت Prisma
- درج دادهها با استفاده از create()
- درج دادهها با استفاده از createMany()
- تمام احتمالات حذف رکورد - delete() و deleteMany()
- واکشی دادهها با Prisma
- بهروزرسانی رکوردها با Prisma
- متد upsert()
فروشگاه من - بخش مدیریت
- مقدمه
- ایجاد پروژه
- ایجاد کامپوننت سایدبار
- کار روی نوار کناری
- ترکیب کلاسهای کاربردی با @apply
- RQ - ترکیب @layer و @apply کلاسهای کاربردی
- استایلدهی به نوار کناری
- افزودن آیکونها به نوار کناری
- ایجاد صفحه کاربران
- ایجاد فرم افزودن کاربران
- پیادهسازی معماری مبتنی بر مؤلفه
- ایجاد دکمه و کامپوننتهای ورودی
- اصلاح ساختار کد
- ایجاد پایگاه داده
- افزودن کاربران با اقدام سرور
- پیادهسازی هشینگ
- RQ - پیادهسازی هشینگ
- اعتبارسنجی ایجاد کاربر
- نمایش کاربران در جدول
- ایجاد صفحه ویرایش کاربر
- مقادیر پیشفرض پویا برای ویرایش
- بهروزرسانی دادههای کاربر
- حذف کاربر
- ایجاد پنجره تایید حذف
- فعال کردن پنجرهی تأیید
- حذف کاربر با پنجره تأیید
- ایجاد صفحه نوع محصول
- ایجاد صفحه افزودن نوع محصول
- افزودن انواع محصول و مدلهای محصول به طرحواره
- RQ - افزودن مدلها در طرحواره نوع محصول و محصول
- افزودن نوع محصول با استفاده از اکشن سرور
- نمایش انواع محصولات در جدول
- ایجاد صفحه ویرایش نوع محصول
- مقادیر پیشفرض پویا برای نوع محصول
- بهروزرسانی نوع محصول با اقدام سرور
- حذف نوع محصول با اقدام سرور
- ایجاد صفحه محصولات
- ایجاد رابط کاربری محصولات برای فهرستبندی
- ایجاد صفحه افزودن محصول
- تکمیل فرم افزودن محصولات
- ایجاد کامپوننت سوئیچ
- ایجاد کامپوننت ورودی فایل
- رندر کردن دادههای انواع محصولات پویا در صفحه افزودن محصول
- ایجاد اکشن سرور برای افزودن محصولات
- پیادهسازی قابلیت ذخیرهسازی تصویر
- تکمیل قابلیت افزودن محصول
- رندر کردن دادههای پویا در جدول محصولات
- ایجاد صفحه ویرایش محصول
- مقادیر پیشفرض پویا برای محصول
- مقادیر پیشفرض را در ورودی سوئیچ و فایل رندر کنید
- بهروزرسانی محصول با اقدام سرور
- RQ - بهروزرسانی محصول با اقدام سرور
- حذف محصول با استفاده از اکشن سرور
فروشگاه من - بخش مشتری
- راهاندازی بخش مشتری
- ایجاد کامپوننت هدر
- پیادهسازی نوار جستجو
- پیوستن به کلاسهای Tailwind با رویکرد ایدهآل
- RQ - پیوستن به کلاسهای Tailwind با رویکرد ایدهآل
- افزودن منوی کشویی پروفایل
- قلاب useRef()
- بستن منوی کشویی پروفایل با کلیک خارجی
- RQ - بستن منوی کشویی پروفایل با کلیک خارجی
- ایجاد کامپوننت ورودی
- ایجاد صفحه اصلی
- ایجاد بخش فیلترها
- ایجاد کامپوننت آکاردئونی سفارشی
- RQ - ایجاد کامپوننت آکاردئونی سفارشی
- تکمیل کامپوننت آکاردئون سفارشی
- ادامه در بخش فیلتر
- ایجاد کامپوننت اسلایدر محدوده قیمت
- ایجاد کامپوننت کارت محصول
- تکمیل جزء کارت محصول
- ایجاد کامپوننت دکمه
- ایجاد API برای فهرستبندی محصولات
- رندر پویای محصول با استفاده از اکشن سرور
- ایجاد API برای دریافت انواع محصولات
- رندر نوع محصول پویا با استفاده از API
- مقادیر فیلتر را در پارامترهای جستجو تنظیم کنید
- اصلاح API محصولات برای اعمال فیلترها
- قابلیت فیلتر در سمت کلاینت
- قابلیت فیلتر جستجو
- ایجاد صفحه محصول
- تکمیل صفحه محصول
- ایجاد API برای دریافت یک محصول با استفاده از شناسه آن
- رندر جزئیات پویای محصول با استفاده از API
- ارائه محصولات بر اساس وضعیت
- ایجاد صفحه سبد خرید
- نمایش کارت آیتم سبد خرید
- تکمیل رابط کاربری سبد خرید
- ایجاد زمینه برای مدیریت محصولات
- RQ - ایجاد زمینه برای مدیریت محصولات
- پیادهسازی قابلیتهای سبد خرید
- پویا کردن صفحه سبد خرید
- فعال کردن انتخاب کمیت
- تکمیل صفحه سبد خرید پویا
فروشگاه من - احراز هویت
- ایجاد صفحه ورود
- معرفی JOSE و JWT
- راهاندازی جریان احراز هویت با استفاده از JOSE و JWT
- ایجاد اکشن سرور برای ورود به سیستم
- احراز هویت مبتنی بر کوکی
- RQ - احراز هویت مبتنی بر کوکی
- مدیریت مسیرهای خصوصی و عمومی با استفاده از میانافزار
- دریافت دادههای کاربر احراز هویت شده
- پیادهسازی خروج از سیستم با استفاده از اکشن سرور
- تمام اقدامات سرور بخش مدیریت را تأیید کنید
- ایجاد مسیرهای احراز هویت در بخش کلاینت
- ایجاد رابط برای مسیرهای احراز هویت
- ایجاد جدول خریدار در پایگاه داده
- ایجاد API ثبت نام
- تست API ثبت نام با استفاده از Postman
- ایجاد API ورود به سیستم
- تست API ورود به سیستم با استفاده از Postman
- پیادهسازی قابلیت ثبتنام در بخش کلاینت
- پیادهسازی قابلیت ورود مشتری
- API برای دریافت دادههای منحصر به فرد مشتری
- دریافت دادههای مشتری با استفاده از API در بخش کلاینت
- قابلیت خروج از سیستم در بخش کلاینت
MyStore - درگاه پرداخت و فروش
- مقدمه
- آر کیو - مقدمه
- تنظیمات اولیه Stripe
- رندر کردن فرم پرداخت تعبیهشدهی Stripe
- ایجاد جلسه پرداخت به صورت پویا
- ایجاد صفحه وضعیت پرداخت
- ایجاد جدول فروش و تراکنش در پایگاه داده
- API برای بهروزرسانی پایگاه داده پس از پرداخت موفقیتآمیز
- تست API پرداخت با استفاده از Postman
- ادغام API پرداخت در بخش کلاینت
- ایجاد بخش اصلی خریدار
- دریافت لیست خریداران با استفاده از اکشن سرور
فروشگاه من - گزارشها و تحلیلها (نمودارها)
- مقدمه
- تهیه گزارش مشتریان و خریداران
- ارائه گزارش مشتریان و خریداران
- تهیه گزارش کل درآمد
- تهیه گزارش سفارش اخیر
- ایجاد ماژول محصولات خریداری شده
- دریافت محصولات خریداری شده در مودال
- نمایش محصولات در جدول محصولات خریداری شده
- پیادهسازی نمودار با استفاده از Recharts
- تهیه گزارش فروش با استفاده از نمودار
- رندر کردن نمودار فروش با مقادیر پویا
- تهیه گزارش مشتریان با استفاده از نمودار
- ایجاد کامپوننت بخش نمودار
فروشگاه من - استقرار
- مقدمه
- آر کیو - مقدمه
- مقدمهای بر CI CD
- RQ - مقدمهای بر CI CD
- ادغام گیتهاب
- RQ - ادغام با گیتهاب
- مهاجرت پایگاه داده از SQLite به MySQL
- پایگاه داده MySQL را به برنامه مدیریت متصل کنید
- استقرار برنامه مدیریت در Vercel
- استقرار برنامه کلاینت روی Vercel