تسلط به Next.js 15 - راهنمای جامع و کاربردی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت اپلیکیشنهای تجارت الکترونیک آماده تولید با استفاده از Next.js 15 App Router ،Server Components و الگوهای مدرن Full-Stack
- تسلط به Prisma ORM به همراه PostgreSQL برای عملیات پایگاهداده Type-safe، روابط پیچیده و کوئریهای بهینه
- پیادهسازی پردازش پرداخت Stripe، احراز هویت با NextAuth.js و مدیریت حساب کاربری با تاریخچه سفارشات
- استقرار اپلیکیشنهای Next.js 15 در محیط عملیاتی با بهینهسازی SEO، کشینگ ISR، مدیریت خطا و بهترین شیوه های عملکرد
پیش نیازهای دوره
- دانش اولیه React (کامپوننتها، هوکها، props)
- بدون نیاز به تجربه قبلی در Next.js – از مبانی App Router تا الگوهای پیشرفته، همه چیز را یاد خواهید گرفت.
توضیحات دوره
ساخت اپلیکیشنهای Next.js 15 آماده تولید با قابلیت مقیاسپذیری
مدرس توصیه میکند یادگیری Next.js را از طریق آموزشهای پراکنده متوقف کنید. او در این دوره به شما کمک میکند تا با ساخت یک پلتفرم تجارت الکترونیک جامع، به کل این فریمورک مسلط شوید و هر الگوی ضروری در Next.js 15 را عملاً مشاهده کنید.
آنچه خواهید ساخت
یک اپلیکیشن تجارت الکترونیک کامل با ویژگیهای زیر:
- کاتالوگ محصول با صفحهبندی سمت سرور و فیلتر دستهبندی
- صفحات محصول پویا با بهینهسازی SEO و تولید استاتیک
- سبد خرید با وضعیت ماندگار و Server Actions
- احراز هویت کاربر با استفاده از NextAuth.js
- مدیریت سفارش با ادغام درگاه پرداخت Stripe
- حسابهای کاربری محافظتشده با تاریخچه سفارشات
- طراحی واکنشگرا با کامپوننتهای مدرن UI
تسلط به ویژگیهای اصلی Next.js 15
App Router و الگوهای رندرینگ
- Server Components برای بارگذاری سریع اولیه و بهبود SEO
- Client Components برای عناصر تعاملی رابط کاربری
- Static Site Generation با استفاده از generateStaticParams
- Incremental Static Regeneration (ISR) برای بروزرسانی محتوای کششده
- Streaming با Suspense برای بارگذاری تدریجی محتوا
مدیریت پیشرفته داده
- Server Actions به عنوان جایگزین مسیرهای سنتی API
- Prisma ORM با روابط پیچیده پایگاهداده
- کوئریهای پایگاهداده Type-safe با ادغام کامل TypeScript
- استراتژیهای کشینگ بهینه با ابزارهای داخلی Next.js
ویژگیهای آماده تولید
- SEO پویا با generateMetadata و داده ساختارمند
- پردازش پرداخت با Stripe Checkout Sessions و Webhooks
- احراز هویت و تعیین سطح دسترسی با نقشهای کاربری
- مدیریت خطا و حالتهای بارگذاری
- استقرار در تولید روی پلتفرم Vercel با PostgreSQL
تکنولوژیهایی که به آنها مسلط خواهید شد.
- Next.js 15: شامل App Router ،Server Components ،Server Actions و ISR
- TypeScript: برای امنیت نوع داده از ابتدا تا انتها
- Prisma و PostgreSQL: لایه مدرن پایگاهداده با مدیریت روابط
- Stripe: پردازش پرداخت آماده برای محیط عملیاتی
- NextAuth.js: سیستم کامل احراز هویت
- Tailwind CSS + Shadcn/UI: کتابخانه مدرن برای کامپوننتهای رابط کاربری
- React Hook Form + Zod: مدیریت فرمها با امنیت نوع بالا
از توسعه تا استقرار نهایی
او چرخه کامل توسعه را به شما آموزش میدهد:
- طراحی پایگاهداده و انجام Migrationها با Prisma
- بهینهسازی عملکرد با کشینگ و ISR
- پیادهسازی SEO با متادیتا و Sitemaps
- استراتژیهای ساخت نسخه تولید و استقرار
- استفاده از Error Boundaries و مدیریت هوشمندانه خطاها
این دوره برای چه کسانی است؟
- توسعهدهندگانی که مبانی React را میدانند اما قصد تسلط به Next.js 15 را دارند.
- کسانی که از مثالهای کوچک خسته شدهاند و آماده یادگیری الگوهای واقعی تولید هستند.
- هر کسی که در حال ساخت اپلیکیشنهای تجارت الکترونیک، SaaS یا اپلیکیشن های دادهمحور است.
- توسعهدهندگانی که میخواهند معماری مدرن Full-Stack را درک کنند.
چه چیزی این دوره را متمایز میکند؟
یک پروژه جامع که همه چیز را به صورت متصل آموزش میدهد، نه ویژگیهای ایزوله. شما درک خواهید کرد که چگونه Server Components، کوئریهای دیتابیس، احراز هویت و پرداختها در یک اپلیکیشن واقعی با هم کار میکنند.
تمرکز بر محیط عملیاتی: هر الگویی که آموزش داده میشود، همان چیزی است که واقعاً در پروژههای حرفهای استفاده خواهید کرد.
Next.js 15 مدرن: این دوره اختصاصاً برای آخرین الگوهای App Router و Server Components طراحی شده است.
آیا آمادهاید اپلیکیشنهای Next.js را با اعتماد به نفس بسازید؟ مدرس از شما دعوت میکند تا به این دوره بپیوندید و از طریق تمرینهای عملی به این فریمورک مسلط شوید.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان React که آماده تسلط به Next.js 15 برای ساخت اپلیکیشنهای حرفهای Full-Stack مانند پلتفرمهای تجارت الکترونیک، محصولات SaaS یا سایتهای دادهمحور هستند
تسلط به Next.js 15 - راهنمای جامع و کاربردی
-
به دوره خوش آمدید! 00:58
-
دموی پروژه 05:50
-
معرفی بخش و اهداف 00:39
-
ایجاد پروژه 03:31
-
معرفی سریع Docker و Docker Compose 01:36
-
VSCode و GitHub Copilot (اختیاری) 01:22
-
اجرای Postgres با استفاده از Docker 08:00
-
راهاندازی Prisma 07:47
-
خلاصه و عیبیابی 04:02
-
مسیریابی مبتنی بر فایل در App Router 04:31
-
صفحه اصلی و Server Components در Next.js 03:53
-
امنیت نوع و داده آزمایشی 03:57
-
نمایش محصولات در شبکه 05:31
-
کامپوننت قدرتمند Image 08:44
-
تصاویر واکنشگرا 07:19
-
محصولات بیشتر، شبکه واکنشگرا و بارگذاری تنبل 03:50
-
فرمتدهی به قیمت 02:12
-
خلاصه 01:14
-
معرفی بخش و اهداف 01:15
-
مدل محصول و Migration 05:52
-
محصول و دستهبندیها: روابط 06:32
-
ایجاد و اجرای اسکریپت Seeding 02:58
-
عملیات Seeding: استفاده از Prisma Client، حذف داده و درج دستهبندیها 05:23
-
عملیات Seeding: افزودن محصولات 06:10
-
نکته فنی Prisma Client در Next.js 03:38
-
واکشی محصولات در Server Component 06:07
-
خلاصه 03:04
-
shadcn/ui چیست؟ 01:17
-
راهاندازی و درک مبانی shadcn/ui 06:20
-
بهبود کارت محصول 03:36
-
Loading UI چیست؟ 02:26
-
ایجاد Loading UI برای محصولات 07:02
-
افزودن اسکلت بارگذاری برای محصولات 07:05
-
صفحهبندی محصولات 04:30
-
افزودن لینکهای صفحهبندی 09:33
-
پارامترهای جستجو و APIهای پویا 02:38
-
استفاده از Suspense به همراه searchParams 10:42
-
خلاصه 02:11
-
استفاده و درک Server Actions 06:22
-
مسیرهای پویا - صفحه محصول 07:12
-
صفحه سفارشی 404 02:16
-
بارگذاری دستهبندی و بهبود رابط کاربری صفحه محصول 07:27
-
حالت بارگذاری برای محصول 04:42
-
افزودن متادیتا و بهینهسازی SEO 05:27
-
صفحه محصول به همراه تصاویر 06:47
-
افزودن موجودی انبار محصول 02:34
-
رابط کاربری موجودی محصول و اصلاح تصاویر 04:09
-
جایگزین افزودن به سبد خرید 02:46
-
خلاصه 01:30
-
حالت تیره و روشن: استفاده از Next Themes 05:59
-
پیادهسازی سوئیچ تغییر تم 02:37
-
افزودن نوار ناوبری 08:13
-
افزودن آیکونها به نوار ناوبری 05:33
-
توضیح منوی ناوبری مخصوص موبایل 03:16
-
ایجاد ناوبری موبایل با استفاده از کامپوننت Sheet 07:11
-
محتوای ناوبری موبایل 07:23
-
افزودن فوتر و رفع مشکلات طرح بندی 03:52
-
بهبود ناوبری با استفاده از Breadcrumbs 13:32
-
رفع مشکلات طرح بندی و افزودن اسکلت برای Breadcrumbs 06:19
-
خلاصه 02:02
-
سیستم جستجو چگونه کار خواهد کرد؟ 02:59
-
ایجاد و قراردهی ورودی جستجو 06:50
-
منطق ورودی جستجو 11:35
-
ایجاد یک صفحه نتایج جستجوی موقت 06:41
-
ویژگی جستجوی عملیاتی 11:30
-
رفع مشکلات UI/UX 05:23
-
معرفی بخش و اهداف 01:36
-
صفحه محصولات بر اساس دستهبندی 08:51
-
افزودن ویژگی مرتبسازی پایه به لیست محصولات 08:28
-
سایدبار لیست دستهبندیها (با استفاده از Suspense) 10:03
-
طرح بندی تو در تو به همراه دستهبندیها و مرتبسازی 08:04
-
بررسی موردی برای Wrapper سرور/کلاینت 05:43
-
استفاده از Server Wrapper برای سایدبار دستهبندی 04:10
-
کنترلهای مرتبسازی در طرح بندی 10:42
-
پیادهسازی مرتبسازی در صفحه جستجو 06:17
-
بررسی موردی برای استخراج کدهای مشترک 02:28
-
ProductList مشترک و Server Action برای getProducts 11:12
-
ریفکتورینگ صفحات برای استفاده از getProducts 09:43
-
طراحی و Migration طرح پایگاهداده سبد خرید 09:49
-
استراتژی سبد خرید: مدیریت کاربران ناشناس و کوکیها 03:52
-
چرا انواع سفارشی؟ تایپگذاری سبد خرید با GetPayload در Prisma 03:41
-
یافتن سبد خرید صحیح: خواندن کوکیها با ابزار getCart 06:19
-
شروع تازه: ابزار پایگاهداده getOrCreateCart 05:42
-
افزودن و بروزرسانی آیتمها: منطق اصلی addToCart 02:40
-
جمعبندی نهایی: کامپوننت AddToCartButton 08:02
-
پیادهسازی شمارنده سبد خرید در نوار ناوبری 06:14
-
درک Data Cache و بازتایید 05:27
-
شمارنده سبد خرید بروز نمیشود؟ استفاده از Revalidate Tags 09:29
-
استفاده از Suspense برای نشانگر سبد خرید 03:36
-
ایجاد صفحه سبد خرید 05:35
-
ایجاد رابط کاربری کامپوننت CartEntry 13:50
-
CartEntry: اصلاحات رابط کاربری 02:06
-
Server Action برای setProductQuantity 06:50
-
افزایش و کاهش تعداد آیتمهای سبد خرید 07:34
-
حذف آیتمها از سبد خرید 06:49
-
کامپوننت خلاصه سبد خرید 12:44
-
افزودن Loading UI برای تمامی موارد مرتبط با سبد خرید 02:18
-
معرفی بخش و اهداف 01:05
-
طرح مربوط به Order و OrderItem در Prisma 05:47
-
پیکربندی Stripe 07:16
-
چرا ابتدا به یک سفارش (Order) نیاز داریم؟ 05:43
-
Server Action برای createOrder 08:57
-
سشن پرداخت Stripe - شروع کار 04:21
-
پیادهسازی createCheckoutSession 07:29
-
حرکت به سمت تکمیل فرآیند پرداخت 03:26
-
پیادهسازی فرآیند پرداخت نهایی 04:38
-
مدیریت خطاهای فرآیند پرداخت 04:43
-
ساخت فرم پرداخت 09:19
-
انجام یک پرداخت تست با استفاده از Stripe 03:45
-
توضیح وضعیت سفارش و ریدایرکتهای Stripe 03:00
-
Route Handler برای لغو پرداخت 08:06
-
Route Handler برای موفقیت پرداخت 01:58
-
صفحه وضعیت سفارش 03:56
-
بهبود رابط کاربری صفحه سفارش 09:59
-
Webhook در Stripe چیست؟ 02:01
-
پیادهسازی Route Handler برای Webhook در Stripe 09:50
-
نصب و اجرای Stripe CLI 04:05
-
تست Webhook در Stripe با استفاده از Stripe CLI 10:07
-
درباره احراز هویت 01:31
-
راهاندازی مدل پایگاهداده کاربر 01:56
-
نصب Auth.js و تنظیمات اولیه 05:49
-
هشگذاری رمزهای عبور 02:45
-
عملیات Seeding برای کاربران آزمایشی 04:05
-
صفحه ورود - پوسته رابط کاربری 06:27
-
صفحات Auth.js - صفحه لاگین 00:57
-
راهاندازی Zod و Schema مربوط به ورود 05:21
-
راهاندازی React Hook Form و فرم ورود 07:14
-
ترکیب shadcn/ui با React Hook Form 08:22
-
منطق استفاده از Credentials Provider 06:54
-
درک علت استفاده: مقایسه React Hook Form در برابر فرمهای ساده 06:04
-
متصلکردن فرم ورود 06:20
-
مدیریت خطاهای ورود 04:48
-
توضیح مفاهیم سشن فعلی، کوکیها و JWT 07:14
-
استفاده از کالبکهای Session/JWT و ارتقای تایپهای TS 09:17
-
ورود و هدایت 02:18
-
رابط کاربری وضعیت احراز هویت و خروج از حساب 06:20
-
منوی کشویی کاربر 05:40
-
صفحه ثبتنام - رابط کاربری و اعتبارسنجی 08:45
-
اصلاح تایپ کاربر 01:53
-
Server Action برای ثبتنام 04:42
-
متصلکردن فرم ثبتنام و ورود خودکار 09:09
-
متصلکردن سفارش به کاربر 05:18
-
آزمایش فرآیند ایجاد سفارش 03:46
-
تعیین سطح دسترسی: نمایش سفارشات کاربر 12:18
-
بهبود صفحات سفارش و سفارشات من 07:39
-
ساخت نسخه تولید و رفع مشکلات 11:09
-
افزودن متادیتا برای SEO 05:17
-
افزودن JSON-LD (داده ساختارمند) 02:31
-
تولید نقشه سایت به صورت پویا 05:09
-
افزودن فایل robots.txt 01:41
-
مدیریت خطا و استفاده از Error Boundaries 12:13
-
پاکسازی: حذف لاگها و افزایش سرعت صفحات پویا 06:36
-
درک مفاهیم Incremental Static Regeneration (ISR) 06:55
-
کار عملی: پیادهسازی ISR در صفحه محصول 10:25
-
راهحل: استفاده از Partial Pre Rendering (PPR) یا واکشی سمت کلاینت (SWR)؟ 02:17
-
ایجاد مسیر API برای سبد خرید 02:35
-
استفاده از SWR و هوک سفارشی useCart 05:35
-
بروزرسانی نشانگر سبد خرید 05:41
-
بروزرسانی تغییرات سبد خرید 03:01
-
ترکیب ISR و SWR: جمعبندی نهایی 03:16
-
آموزش: بهینهسازی صفحات پویا 05:46
-
کلیدها و تگهای هوشمند کشینگ 04:53
-
بهینهسازی: تابع getProducts 05:15
-
بهینهسازی: افزودن کش برای تعداد محصولات 03:35
-
بهینهسازی: کشینگ دستهبندیها 04:15
-
کشینگ پایدار و یک تمرین کاربردی 01:53
-
استراتژی نامعتبرسازی کش 01:11
-
برنامه استقرار 02:45
-
اجرای Prisma Migrations در طول فرآیند Build 01:46
-
کشینگ پایدار و توصیههای عمومی کش (شامل مباحث هزینهها) 05:36
-
دوره فشرده Git و GitHub 04:56
-
Vercel: استقرار و مدیریت Postgres 08:48
-
Seeding پایگاهداده و استقرار مجدد 05:48
-
اتصال Stripe به Vercel و ایجاد سفارشات نهایی 07:17
مشخصات آموزش
تسلط به Next.js 15 - راهنمای جامع و کاربردی
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:همه سطوح
- تعداد درس:174
- مدت زمان :16:12:07
- حجم :6.1GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy