دوره آموزشی تجارت الکترونیک با Next.js: ساخت یک پلتفرم فروشگاهی از صفر
20 ساعت 42 دقیقهمتوسط2026-02-24
مدرسین

Packt Publishing
جزئیات دوره
اگر میخوای مهارتهای Next.js خودت رو به سطح حرفهای برسونی و یک پروژه واقعی و قابل استفاده در بازار کار بسازی، این دوره دقیقاً برای همین طراحی شده. در این آموزش قدمبهقدم یاد میگیری چطور یک فروشگاه اینترنتی کامل (Ecommerce Platform) از صفر تا سطح Production بسازی.
در ابتدای دوره با راهاندازی پروژه، تنظیم محیط توسعه و طراحی رابط کاربری ریسپانسیو شروع میکنی. یاد میگیری چطور یک UI مدرن و کاربردی طراحی کنی که شامل بخشهایی مثل هدر، فوتر، کارت محصول و صفحات داینامیک باشه.
در ادامه وارد بخش فرانتاند پیشرفته میشی و با مدیریت Themeها، Layoutهای پویا و ساختار کامپوننتی در Next.js کار میکنی تا یک تجربه کاربری روان و حرفهای بسازی.
یکی از بخشهای مهم دوره، توسعه بکاند با PostgreSQL و Prisma هست. اینجا یاد میگیری چطور یک دیتابیس قدرتمند و مقیاسپذیر طراحی کنی و دادههای فروشگاه رو به شکل اصولی مدیریت کنی.
در بخش احراز هویت، با NextAuth کار میکنی و یاد میگیری چطور سیستم Login و Signup امن و واقعی برای کاربران پیادهسازی کنی تا مدیریت کاربران در سطح حرفهای انجام بشه.
سپس وارد بخشهای کلیدی فروشگاه میشی مثل سبد خرید (Shopping Cart)، فرمهای ارسال (Shipping Forms) و فرآیند کامل Checkout. این بخشها هسته اصلی هر Ecommerce واقعی هستند و بهت کمک میکنن تجربه خرید کامل بسازی.
برای اطمینان از صحت دادهها، از Zod Validation استفاده میکنی تا ورودیها کنترل بشن و خطاهای احتمالی کاهش پیدا کنن. همچنین یاد میگیری چطور از Serverless Environment برای مقیاسپذیری بهتر استفاده کنی.
در نهایت، مهمترین بخش دوره یعنی اتصال درگاههای پرداخت مثل Stripe و PayPal رو یاد میگیری تا کاربران بتونن خرید واقعی انجام بدن و تراکنشها بهصورت امن پردازش بشن.
اهداف یادگیری
طراحی پلتفرمهای فروشگاهی مقیاسپذیر با Next.js
ساخت رابط کاربری ریسپانسیو و کامپوننتمحور
مدیریت دیتابیس با PostgreSQL و Prisma
پیادهسازی سیستم احراز هویت با NextAuth
ساخت سبد خرید و فرآیند Checkout
طراحی فرمهای ارسال سفارش و مدیریت سفارشها
استفاده از Zod برای اعتبارسنجی دادهها
اتصال درگاههای پرداخت Stripe و PayPal
پیادهسازی پروژههای Production-ready
استقرار اپلیکیشنهای فروشگاهی واقعی
در ابتدای دوره با راهاندازی پروژه، تنظیم محیط توسعه و طراحی رابط کاربری ریسپانسیو شروع میکنی. یاد میگیری چطور یک UI مدرن و کاربردی طراحی کنی که شامل بخشهایی مثل هدر، فوتر، کارت محصول و صفحات داینامیک باشه.
در ادامه وارد بخش فرانتاند پیشرفته میشی و با مدیریت Themeها، Layoutهای پویا و ساختار کامپوننتی در Next.js کار میکنی تا یک تجربه کاربری روان و حرفهای بسازی.
یکی از بخشهای مهم دوره، توسعه بکاند با PostgreSQL و Prisma هست. اینجا یاد میگیری چطور یک دیتابیس قدرتمند و مقیاسپذیر طراحی کنی و دادههای فروشگاه رو به شکل اصولی مدیریت کنی.
در بخش احراز هویت، با NextAuth کار میکنی و یاد میگیری چطور سیستم Login و Signup امن و واقعی برای کاربران پیادهسازی کنی تا مدیریت کاربران در سطح حرفهای انجام بشه.
سپس وارد بخشهای کلیدی فروشگاه میشی مثل سبد خرید (Shopping Cart)، فرمهای ارسال (Shipping Forms) و فرآیند کامل Checkout. این بخشها هسته اصلی هر Ecommerce واقعی هستند و بهت کمک میکنن تجربه خرید کامل بسازی.
برای اطمینان از صحت دادهها، از Zod Validation استفاده میکنی تا ورودیها کنترل بشن و خطاهای احتمالی کاهش پیدا کنن. همچنین یاد میگیری چطور از Serverless Environment برای مقیاسپذیری بهتر استفاده کنی.
در نهایت، مهمترین بخش دوره یعنی اتصال درگاههای پرداخت مثل Stripe و PayPal رو یاد میگیری تا کاربران بتونن خرید واقعی انجام بدن و تراکنشها بهصورت امن پردازش بشن.
اهداف یادگیری
طراحی پلتفرمهای فروشگاهی مقیاسپذیر با Next.js
ساخت رابط کاربری ریسپانسیو و کامپوننتمحور
مدیریت دیتابیس با PostgreSQL و Prisma
پیادهسازی سیستم احراز هویت با NextAuth
ساخت سبد خرید و فرآیند Checkout
طراحی فرمهای ارسال سفارش و مدیریت سفارشها
استفاده از Zod برای اعتبارسنجی دادهها
اتصال درگاههای پرداخت Stripe و PayPal
پیادهسازی پروژههای Production-ready
استقرار اپلیکیشنهای فروشگاهی واقعی
سرفصل ها
مقدمه
- به دوره خوش آمدید
- پشته
- پروژه
- محیط زیست
- اسناد پریمیوم
ایجاد برنامه و طرحبندی اولیه
- مقدمه بخش
- ایجاد برنامه و داراییهای بعدی
- تنظیمات رابط کاربری ShadCN
- طرح ریشه و ثابتها
- اجزای سربرگ و پاصفحه
- تغییر حالت تم
- بارگیری و صفحات یافت نشد
- منوی برگه واکنشگرا
- نمونه محصولات و لیست محصولات
- جزء کارت محصول
- جزء قیمت محصول
پایگاه داده، پریسما و نمایش محصول
- مقدمه بخش
- تنظیمات PostgreSQL و Prisma
- مدلها و مهاجرتهای Prisma
- دادههای نمونه اولیه
- بارگذاری محصولات از پایگاه داده
- اعتبارسنجی Zod و استنتاج نوع
- پیکربندی محیط بدون سرور
- صفحه جزئیات محصول
- کامپوننت تصاویر محصول
- استقرار اولیه
- یادداشتی در مورد خطاهای ESLint
احراز هویت با NextAuth
- مقدمه بخش
- مدلهای مرتبط با کاربر Prisma
- دادههای کاربر را بازیابی کنید
- تنظیمات NextAuth
- NextAuth تمام مسیرهای API را دریافت میکند
- اقدامات ورود و خروج به سرور
- طرحبندی احراز هویت و صفحه ورود
- فرم ورود به سیستم اعتبارنامهها
- فرم ورود به سیستم را وصل کنید
- تغییر مسیر URL مربوط به فراخوانی مجدد
- دکمه کاربر و خروج از سیستم
- طرحواره و اقدام Zod ثبت نام
- صفحه و فرم ثبت نام
- مدیریت خطای ثبت نام
- سفارشیسازی توکن با فراخوانی JWT
افزودن به سبد خرید
- مقدمه بخش
- طرحواره سبد خرید Zod و مدل Prisma
- کامپوننت افزودن به سبد خرید
- شناسه سبد خرید جلسه
- دریافت کالا برای سبد خرید
- محاسبه قیمت سبد خرید
- مدیریت تعداد و محصولات متعدد
- اقدام حذف سبد خرید
- دکمه سبد خرید پویا
- رابط کاربری روان با useTransition
صفحات سبد خرید و ارسال
- مقدمه بخش
- صفحه سبد خرید
- جدول رابط کاربری ShadCN
- جمع جزئی سبد خرید
- طرح و صفحه آدرس ارسال Zod
- فرم آدرس حمل و نقل
- بهروزرسانی آدرس کاربر
- کامپوننت مراحل پرداخت
- سبد خرید جلسه Persist
- محافظت از مسیرها
صفحات روش پرداخت و سفارش
- مقدمه بخش
- روش پرداخت و طرحهای Zod
- صفحه روش پرداخت
- فرم روش پرداخت و بهروزرسانی
- مدلهای Order و OrderItem Prisma
- طرحوارهها و انواع سفارش Zod
- صفحه ثبت سفارش
- ایجاد اکشن سفارش
- فرم سفارش ثبت نام
- صفحه سفارش و اقدام
- توابع کاربردی قالببندی
- جدول جزئیات سفارش
پرداختهای پیپال
- مقدمه بخش
- تنظیمات سندباکس پیپال
- ایجاد توکن دسترسی
- تست Jest برای توکن دسترسی
- ایجاد سفارش و دریافت درخواستهای API
- تست Jest برای سفارش و پرداخت
- ایجاد اکشن سفارش پیپال
- تأیید و بهروزرسانی سفارش
- پیادهسازی دکمهی PayPal
تاریخچه سفارشات و پروفایل کاربر
- مقدمه بخش
- طرحبندی و منوی کاربری
- دستورهای من را دریافت کنید
- صفحه سفارشات
- صفحهبندی سفارشات
- بهروزرسانی عملکرد نمایه
- بهروزرسانی فرم مشخصات
- ارسال فرم مشخصات
نمای کلی و دستورات مدیریتی
- مقدمه بخش
- طرحبندی و منوی مدیریت
- دریافت خلاصه سفارش
- نمایش دادههای نمای کلی مدیر
- نمودار فروش ماهانه
- صفحه و عملیات مربوط به سفارشات مدیر
- حذف سفارشات
- بهروزرسانی اقدامات سفارش (COD)
- دکمههای بهروزرسانی سفارش (COD)
محصولات مدیریتی و آپلود تصاویر
- مقدمه بخش
- دریافت محصولات برای صفحه مدیریت
- نمایش محصولات
- حذف محصولات
- ایجاد و بهروزرسانی اقدامات
- ایجاد صفحه محصول و فرم
- فیلدهای فرم و slugify
- ایجاد فرم ارسال محصول
- پیکربندی آپلودتینگ
- اضافه کردن آپلود تصویر
- پاکسازی محصول
- بنر ویژه
- فرم بهروزرسانی محصول
کاربران مدیر و جستجو
- مقدمه بخش
- دریافت و نمایش کاربران
- حذف کاربران
- صفحه ویرایش کاربر
- بهروزرسانی فرم کاربر
- بهروزرسانی اقدام کاربر
- فرم جستجوی مدیر
- جستجوی دستورات مدیریتی
- جستجوی کاربران مدیر
فیلتر کردن جستجو، کشو و چرخ فلک
- مقدمه بخش
- کشوی دستهبندی
- چرخ فلک محصولات ویژه
- جستجوی کامپوننت
- صفحه جستجو
- فیلترهای جستجو
- تابع فیلتر کردن آدرس اینترنتی (URL) را دریافت کنید
- فیلترهای رابط کاربری دستهبندی و قیمت
- فیلتر رتبهبندی و نمایش فیلتر
- مرتبسازی محصولات
- فراداده پویا
رتبهبندیها و نظرات
- مقدمه بخش
- بررسی مدل پریسما، زود و تایپ
- کامپوننت لیست بررسی
- پنجرهی محاورهای بررسی فرم
- ایجاد و بهروزرسانی اقدام بررسی
- فرم بررسی را به اقدام وصل کنید
- دریافت نظرات
- نقد و بررسیهای نمایش
- بهروزرسانی و بارگذاری مجدد نقدها
پرداختهای استرایپ
- مقدمه بخش
- تنظیمات نواری
- فرم سفارش با هدف پرداخت
- کامپوننت پرداخت Stripe
- صفحه موفقیت پرداخت Stripe
- وبهوک برای علامتگذاری سفارش به عنوان پرداختشده
رسیدهای خرید را از طریق ایمیل ارسال کنید
- مقدمه بخش
- کلید API را دوباره ارسال و نصب کنید
- ارسال مجدد تابع اصلی
- الگوی ایمیل رسید خرید
- پیشنمایش ایمیل در مرورگر
- ارسال ایمیل
اجزای صفحه اصلی و جمعبندی
- مقدمه بخش
- کامپوننت جعبههای آیکون
- جزء شمارش معکوس معامله
- جمعبندی
دوره های مرتبط
- دوره آموزشی یادگیری Next.js
- دوره آموزشی ایجاد و میزبانی یک سایت فول استک با Next.js
- دوره آموزشی مجموعه فریلنسری: پروژه واقعی با Next.js و Strapi
- دوره آموزشی یادگیری Next.js آپدیت (2022)
- دوره آموزشی Rust برای توسعه دهندگان جاوا اسکریپت
- دوره آموزشی نمونهسازی اپلیکیشن با Vercel v0 Agentic Builder
- دوره آموزشی توسعه اپلیکیشنهای RAG با LlamaIndex و Next.js
- دوره آموزشی ساخت یک سیستم مدیریت محتوای Headless سبک و کامل با استفاده از Next.js، Contentful و GraphQL