آموزش تسلط کامل بر Next.js 15 - ساخت و استقرار پروژه فروشگاهی - آخرین آپدیت

سرفصل ها و درس ها

خوش‌آمدگویی! Welcome!

• خوش‌آمدگویی به دوره! Welcome in the Course!

• دموی پروژه The Project Demo

• چرا این دوره؟ توضیح مفهوم «راهنمای گمشده» Why This Course? The "Missing Guide" Explained

• تکنولوژی‌های مورد استفاده و پیش‌نیازها Tech Stack & Prerequisites

راه‌اندازی محیط توسعه Environment Setup

• معرفی بخش و اهداف Section Intro & Objectives

• ایجاد پروژه Project Creation

• آشنایی سریع با Docker و Docker Compose Quick Into to Docker & Docker Compose

• VSCode و GitHub Copilot (اختیاری) VSCode & GitHub Copilot (OPTIONAL)

• اجرای Postgres با استفاده از Docker Running Postgres Using Docker

• راه‌اندازی Prisma Setting Up Prisma

• جمع‌بندی و عیب‌یابی Summary & Troubleshooting

پیاده‌سازی قابلیت لیست محصولات Product Listing Feature

• سیستم مسیردهی مبتنی بر فایل در App Router File-Based Routing in App Router

• صفحه اصلی و Server Components در Next.js Home Page and Server Components in Next.js

• امنیت تایپ و داده‌های آزمایشی (Mock Data) Type Safety and Mock Data

• نمایش محصولات در حالت گرید Display Products in a Grid

• کامپوننت قدرتمند Image Powerful Image Component

• تصاویر ریسپانسیو Responsive Images

• افزودن محصولات بیشتر، گرید ریسپانسیو و Lazy Loading More Products, Responsive Grid, Lazy Loading

• فرمت‌بندی قیمت Format the Price

• جمع‌بندی Summary

دیتابیس و داده‌های محصول Database & Product Data

• معرفی بخش و اهداف Section Intro & Objectives

• مدل محصول و میگریشن Product Model and Migration

• محصولات و دسته‌بندی‌ها: روابط دیتابیس Product & Categories: Relations

• ایجاد و اجرای اسکریپت Seeding Creating and Running a Seeding Script

• Seeding: کلاینت Prisma، حذف داده‌ها و درج دسته‌بندی‌ها Seeding: Prisma Client, Deleting Data & Inserting Categories

• Seeding: افزودن محصولات Seeding: Adding Products

• نکته خاص کلاینت Prisma در Next.js Next.js Prisma Client Quirk

• دریافت محصولات در Server Component Fetching Products in Server Component

• جمع‌بندی Summary

افزودن shadcn/ui، Suspense و صفحه‌بندی Adding shadcn/ui, Suspense, Pagination

• shadcn/ui چیست؟ What is shadcn/ui?

• راه‌اندازی و درک مفاهیم پایه shadcn/ui Setting Up & Understanding shadcn/ui Basics

• بهبود کارت محصول Enhancing the Product Card

• Loading UI چیست؟ What's Loading UI?

• ایجاد Loading UI برای محصولات Creating the Loading UI for Products

• افزودن Loading Skeleton برای محصولات Adding Loading Skeleton for Products

• صفحه‌بندی محصولات Paginating Products

• افزودن لینک‌های صفحه‌بندی Adding Pagination Links

• پارامترهای جستجو و APIهای پویا Search Params & Dynamic APIs

• استفاده از Suspense با searchParams Using Suspense with searchParams

• جمع‌بندی Summary

صفحه محصول و مسیرهای پویا Product Page & Dynamic Routes

• استفاده و درک Server Actions Using and Understanding Server Actions

• مسیرهای پویا: صفحه محصول Dynamic Routes - Product Page

• صفحه سفارشی 404 404 Custom Page

• لودینگ دسته‌بندی و بهبود UI صفحه محصول Loading Category & Improving Product Page UI

• وضعیت لودینگ برای محصول Loading State for Product

• افزودن متادیتا و بهینه‌سازی سئو Adding Metadata and SEO Optimization

• صفحه محصول به همراه تصاویر Product Page with Images

• افزودن موجودی محصول Adding Product Inventory

• بهبود UI موجودی محصول و اصلاح تصاویر Product Inventory UI and Image Fix

• جایگاه (Placeholder) دکمه افزودن به سبد خرید Add to Cart Placeholder

• جمع‌بندی Summary

بهبودهای لایوت ناوبری Navigation Layout Enhancements

• حالت تاریک و روشن: Next Themes Dark and Light Mode: Next Themes

• پیاده‌سازی تغییر دهنده تم (Theme Toggle) Implementing Theme Toggle

• افزودن نوار ناوبری (Navbar) Adding Navigation Bar

• افزودن آیکون‌ها به نوار ناوبری Adding Icons to Navigation Bar

• توضیح منوی ناوبری مخصوص موبایل Mobile Only Navigation Menu - Explained

• ایجاد ناوبری موبایل با استفاده از Sheet Creating the Mobile Navigation using Sheet

• محتوای ناوبری موبایل Mobile Navigation Content

• افزودن فوتر و رفع مشکلات لایوت Adding Footer and Fixing Layout Issues

• بهبود ناوبری با Breadcrumbs Improving Navigation with Breadcrumbs

• رفع مشکلات لایوت و افزودن اسکلتون Breadcrumbs Fixing Layout Issues & Adding Breadcrumbs Skeleton

• جمع‌بندی Summary

قابلیت جستجو Search Feature

• سیستم جستجو چگونه کار می‌کند؟ How Search will Work?

• ایجاد و جایگذاری ورودی جستجو Creating and Placing a Search Input

• منطق ورودی جستجو Search Input Logic

• ایجاد صفحه نتایج جستجوی آزمایشی Creating a Dummy Search Results Page

• پیاده‌سازی قابلیت جستجوی واقعی Working Search Feature

• رفع مشکلات UI/UX Fixing UI/UX Issues

دسته‌بندی‌ها و شناسایی محصولات Categories & Product Discovery

• معرفی بخش و اهداف Section Intro & Objectives

• صفحه محصولات بر اساس دسته‌بندی Products by Category Page

• افزودن قابلیت مرتب‌سازی پایه به لیست محصولات Adding Basic Sorting Feature to Product List

• سایدبار لیست دسته‌بندی‌ها (با استفاده از Suspense) Category List Sidebar (using Suspense)

• لایوت تو در تو با دسته‌بندی‌ها و مرتب‌سازی Nested Layout with Categories and Sorting

• دلیلی برای استفاده از Wrapper کلاینت/سرور A Case for Server/Client Wrapper

• سرور Wrapper برای CategorySidebar Server Wrapper for CategorySidebar

• کنترل‌های مرتب‌سازی در لایوت Sorting Controls in Layout

• کارکرد مرتب‌سازی در صفحه جستجو Sorting Working on Search Page

• دلیلی برای استخراج کدهای مشترک A Case for Extracting Common Code

• کامپوننت مشترک ProductList و Server Action مربوط به getProducts Common ProductList and getProducts Server Action

• بازنویسی صفحات برای استفاده از getProducts Refactoring Pages to use getProducts

قابلیت سبد خرید Cart Feature

• طراحی و میگریشن اسکیمای دیتابیس سبد خرید Designing & Migrating the Cart Database Schema

• استراتژی قابلیت سبد خرید: مدیریت کاربران ناشناس و کوکی‌ها Cart Feature Strategy: Handling Anonymous Users & Cookies

• چرا تایپ‌های سفارشی؟ تایپ دادن به سبد خرید با GetPayload در Prisma Why Custom Types? Typing Our Cart with Prisma's GetPayload

• پیدا کردن سبد خرید مناسب: خواندن کوکی‌ها با ابزار getCart Finding the Right Cart: Reading Cookies with the getCart Utility

• شروع تازه: ابزار دیتابیسی getOrCreateCart Starting Fresh: The getOrCreateCart Database Utility

• افزودن و به‌روزرسانی آیتم‌ها: منطق اصلی addToCart Adding & Updating Items: The Core addToCart Logic

• ترکیب همه موارد: کامپوننت AddToCartButton Putting it Together: AddToCartButton

• پیاده‌سازی شمارنده سبد خرید در Navbar Implementing the Navbar Cart Counter

• درک Data Cache و Revalidation Understanding Data Cache and Revalidation

• شمارنده سبد خرید به‌روز نمی‌شود؟ Revalidate Tags Cart Counter not Updating? Revalidate Tags

• استفاده از Suspense برای نشانگر سبد خرید Suspending Cart Indicator

صفحه سبد خرید The Cart Page

• ایجاد صفحه سبد خرید Creating the Cart Page

• ایجاد رابط کاربری کامپوننت CartEntry Creating the CartEntry Component UI

• CartEntry: رفع مشکلات UI CartEntry: UI Fixes

• Server Action: متد setProductQuantity Server Action: setProductQuantity

• افزایش و کاهش تعداد آیتم‌های سبد خرید Increasing and Decreasing the Cart Item Quantity

• حذف آیتم‌ها از سبد خرید Removing Items from the Basket

• کامپوننت خلاصه سبد خرید Cart Summary Component

• افزودن Loading UI برای تمام بخش‌های مربوط به سبد خرید Adding Loading UI for All Things Cart Related

مدیریت سفارشات و ادغام Stripe برای پرداخت Order Management and Stripe Integration for Checkout

• معرفی بخش و اهداف Section Intro & Objectives

• اسکیمای Prisma برای Order و OrderItem Order & OrderItem Prisma Schema

• پیکربندی Stripe Configuring Stripe

• چرا ابتدا به یک سفارش نیاز داریم؟ Why We Need an Order First

• Server Action مربوط به createOrder createOrder Server Action

• شروع کار با Stripe Checkout Session Stripe Checkout Session - Getting Started

• پیاده‌سازی createCheckoutSession Implementing createCheckoutSession

• انتقال به فرآیند کامل پرداخت (Checkout) Moving to Complete Checkout Process

• پیاده‌سازی فرآیند پرداخت Implementing Checkout Process

• مدیریت خطاهای پرداخت Handling Checkout Errors

نهایی کردن پرداخت، مدیریت پرداخت‌ها و وب‌هوک‌های Stripe Finalizing Checkout, Handling Payments, and Stripe Webhooks

• ساخت فرم پرداخت Making the Checkout Form

• انجام یک پرداخت آزمایشی با Stripe Making a Test Payment using Stripe

• توضیح وضعیت سفارش و ریدایرکت‌های Stripe Order State & Stripe Redirects Explained

• مدیریت مسیر لغو پرداخت Payment Cancelled Route Handler

• مدیریت مسیر موفقیت پرداخت Payment Sucess Route Handler

• صفحه وضعیت سفارش Order Status Page

• بهبود UI صفحه سفارش Improving Order Page UI

• Stripe Webhook چیست؟ What is a Stripe Webhook?

• پیاده‌سازی Route Handler برای وب‌هوک Stripe Implementing Stripe Webook Route Handler

• نصب و اجرای Stripe CLI Installing and Running Stripe CLI

• تست وب‌هوک Stripe با استفاده از Stripe CLI Testing the Stripe Webhook with Stripe CLI

احراز هویت کاربران با Auth.js و Next.js User Authentication with Auth.js and Next.js

• درباره احراز هویت (Authentication) About Authentication

• راه‌اندازی مدل دیتابیس کاربر (User) Setting Up the User Database Model

• نصب Auth.js و تنظیمات اولیه Installing Auth.js and Basic Setup

• هش کردن رمز عبور Hashing Passwords

• درج کاربران آزمایشی Seeding Test Users

• رابط کاربری اولیه صفحه ورود (Sign In) Sign In Page - UI Shell

• صفحات Auth.js: صفحه ورود Auth.js Pages - Login Page

• تنظیم Zod و اسکیمای ورود Setting Up Zod and Sign-in Schema

• تنظیم React Hook Form و فرم ورود Setting Up React Hook Form & Sign-in Form

• ترکیب shadcn/ui با React Hook Form Mixing shadcn/ui with React Hook Form

• منطق Credentials Provider Credentials Provider Logic

• درک دلیل استفاده: React Hook Form در مقابل فرم‌های ساده Understanding the Why: React Hook Form vs Simple Forms

• اتصال فرم ورود به سیستم Connecting Sign-In Form

گسترش احراز هویت: ثبت‌نام، مدیریت سشن و کنترل دسترسی Expanding Authentication: Sign-Up, Session Management, and Access Control

• مدیریت خطاهای ورود Sign-In Error Handling

• توضیح سشن فعلی، کوکی‌ها و JWT Current Session, Cookies & JWT Explained

• کال‌بک‌های Session/JWT و گسترش تایپ‌های TS Session/JWT Callbacks & Augmenting TS Types

• ورود و ریدایرکت Sign-In and Redirect

• UI وضعیت احراز هویت و خروج از حساب (Logout) Auth Status UI & Logout

• منوی دراپ‌داون کاربر User Dropdown Menu

• صفحه ثبت‌نام: UI و اعتبارسنجی Sign Up Page - UI & Validation

• اصلاح تایپ User Fixing User Type

• Server Action مربوط به ثبت‌نام Sign Up Server Action

• اتصال فرم ثبت‌نام و ورود خودکار Connecting Sign Up Form & Auto-Login

• اتصال سفارشات به کاربر Connecting Order with the User

• تست ثبت سفارشات Testing Making Orders

• Authorization: نمایش سفارشات کاربر Authorization: Displaying User Orders

• بهبود صفحات سفارش و سفارشات من Improving Order & My Orders Pages

بیلد عملیاتی، متادیتا و سئو، مدیریت خطاها Production Build, Metadata and SEO, Error Handling

• بیلد عملیاتی و رفع مشکلات Production Build & Fixing Issues

• افزودن متادیتا برای سئو Adding Metadata for SEO

• افزودن JSON LD (داده‌های ساختاریافته) Adding JSON-LD (Structured Data)

• تولید سایت‌مپ به صورت پویا Generating Sitemap (Dynamically)

• افزودن robots.txt Adding robots.txt

• مدیریت خطاها و Error Boundaries Error Handling and Error Boundaries

• پاکسازی: حذف لاگ‌ها و افزایش سرعت صفحات پویا Cleanup: Removing Logs and Making Dynamic Page Fast

بهینه‌سازی: SSG/ISR و دریافت داده‌ها در سمت کلاینت Optimizing: SSG/ISR and Client Fetching

• درک بازسازی استاتیک افزایشی (ISR) Understanding Incremental Static Regeneration (ISR)

• پیاده‌سازی عملی ISR در صفحه محصول Practical: ISR on Product Page

• راهکار: Partial Pre Rendering (PPR) یا دریافت داده در سمت کلاینت (SWR)? Solution: Partial Pre Rendering (PPR) or Client Side Fetching (SWR)?

• ایجاد مسیر API برای سبد خرید Creating the Cart API Route

• SWR و هوک سفارشی useCart SWR and useCart Custom Hook

• به‌روزرسانی نشانگر سبد خرید Update the Cart Indicator

• به‌روزرسانی Mutationهای سبد خرید Update Cart Mutations

• ترکیب ISR و SWR: پیاده‌سازی نهایی ISR & SWR: Putting it All Together

بهینه‌سازی: صفحات پویا و استراتژی کشینگ Optimizing: Dynamic Pages and Cache Strategy

• روش بهینه‌سازی صفحات پویا How To: Optimizing Dynamic Pages

• کلیدها و تگ‌های کشینگ هوشمند Smart Caching Keys & Tags

• بهینه‌سازی تابع getProducts Optimize: getProducts Function

• بهینه‌سازی: کش برای تعداد محصولات Optimize: Add Product Count Cache

• بهینه‌سازی: کش دسته‌بندی‌ها Optimize: Category Cache

• کشینگ یکپارچه و تمرین عملی Consistent Caching and an Exercise

• استراتژی ابطال کش (Cache Invalidation) Cache Invalidation Strategy

استقرار زنده روی Vercel Live Deployment on Vercel

• برنامه استقرار (Deployment) The Deployment Plan

• میگریشن‌های Prisma در هنگام بیلد Prisma Migrations During Build

• کشینگ یکپارچه و توصیه‌های کلی برای کشینگ (شامل هزینه‌ها) Consistent Caching & Generic Caching Advice (incl. Billing)

• دوره سریع Git و GitHub Git & GitHub Crash Course

• Vercel: استقرار و PostgreSQL Vercel: Deployment & Postgres

• Seeding دیتابیس و استقرار مجدد Seeding DB & Redeployment

• اتصال Stripe به Vercel و ثبت سفارشات Pointing Stripe to Vercel and Making Orders