آموزش جامع NextJS – آمادگی برای مصاحبه شغلی و پروژه تجارت الکترونیک - آخرین آپدیت

مقدمه Introduction

• مقدمه Introduction

• تفاوت NEXT JS با ReactJS NEXT JS in spite of ReactJS

• سوال و پاسخ: تفاوت NEXT JS با ReactJS RQ - NEXT JS in spite of ReactJS

• ایجاد اولین پروژه Creating First Project

• سوال و پاسخ: ایجاد اولین پروژه RQ - Creating First Project

• ساختار پروژه Project Structure

• سوال و پاسخ: ساختار پروژه RQ - Project Structure

• مقایسه Pages Router در مقابل App Router Pages Router Vs App Router

• سوال و پاسخ: مقایسه Pages Router در مقابل App Router RQ - Pages Router Vs App Router

• مقایسه ReactJS (سمت کلاینت) در مقابل NextJS (سمت سرور) ReactJS (Client side) Vs NextJS (Server side)

مبانی NextJS با App Router NextJS Basics with App Router

• تعریف مسیرها (Routes) Defining Routes

• مسیرهای تو در تو (Nested Routes) Nested Routes

• لینک کردن صفحات با Linking Pages with

• درک چیدمان سراسری (Global Layout) Understanding Global Layout

• ساخت کامپوننت هدر سراسری Creating Global Header Component

• استفاده از Import Alias The Import Alias

• تنظیم favicon با استفاده از فایل‌های تصویری Configuring favicon using Image Files

• تنظیم favicon با استفاده از کد Configuring favicon using Code

• مبانی کامپوننت‌ها Component Basics

• قابلیت بهینه‌سازی خودکار کامپوننت‌ها Component - Auto Optimization Feature

• سوال و پاسخ: قابلیت بهینه‌سازی خودکار کامپوننت‌ها RQ - Component - Auto Optimization Feature

• استایل‌دهی با Global CSS و CSS Modules Styling - Global CSS and CSS Modules

• سوال و پاسخ: استایل‌دهی با Global CSS و CSS Modules RQ - Styling - Global CSS and CSS Modules

• مقایسه React Server Component در مقابل Client Component React Server Component Vs Client Component

• سوال و پاسخ: مقایسه React Server Component در مقابل Client Component RQ - React Server Component Vs Client Component

• صفحه خطا (Error Page) Error Page

• صفحه یافت نشد (Not Found) Not Found Page

• مسیرهای پویا و پارامترهای مسیر Dynamic Routes and Route Params

• انجام فراخوانی‌های API در NextJS Making API calls in NextJS

• کامپوننت‌های سروری ناهمگام (Asynchronous) Asynchronous Server Components

• سوال و پاسخ: کامپوننت‌های سروری ناهمگام RQ - Asynchronous Server Components

• پیاده‌سازی کامپوننت Loading Implementing Loading Component

مبانی SQLite SQLite Basics

• آشنایی با SQLite Introduction to SQLite

• انواع داده در SQLite Data Types in SQLite

• ایجاد پایگاه داده SQLite Creating SQLite Database

NextJS همراه با SQLite NextJS with SQLite

• مقدمه Introduction

• راه‌اندازی پایگاه داده با better sqlite3 Setting up Database with better-sqlite3

• ایجاد جدول و افزودن داده‌ها Table Creation and Adding Data

• نمایش داده‌ها در اپلیکیشن Next Rendering Data in Next App

• تنظیم مسیرهای پویا برای محصولات Configuring Dynamic Routes for Products

• بازنویسی ساختار کد (Refactoring) Refactoring the Code Structure

• تنظیم دستی Tailwind CSS Manually Configuring Tailwind CSS

• ساخت رابط کاربری افزودن محصول Creating Add Product Interface

• مدیریت ارسال فرم با Server Action Handling Form Submission with Server Action

• اجرای کوئری و تغییر مسیر با redirect() Executing Query & Redirecting with redirect()

• ساخت رابط کاربری لیست محصولات (Grid) Creating Products Grid Interface

• سوال و پاسخ: ساخت رابط کاربری لیست محصولات RQ - Creating Products Grid Interface

• پیاده‌سازی قابلیت حذف محصول Implementing Delete Product Feature

• پیاده‌سازی قابلیت ویرایش Implementing Edit Functionality

کشینگ (Caching) در NextJS Caching in NextJS

• درک مفهوم Caching در NextJS Understanding Caching in NextJS

• سوال و پاسخ: درک مفهوم Caching در NextJS RQ - Understanding Caching in NextJS

• رفتار غیرمنتظره در Build پروژه Unexpected Behaviour in Project Build

• سوال و پاسخ: رفتار غیرمنتظره در Build پروژه RQ - Unexpected Behaviour in Project Build

• کنترل کش از حالت Static به Dynamic Static to Dynamic - Cache Control

• سوال و پاسخ: کنترل کش از حالت Static به Dynamic RQ - Static to Dynamic - Cache Control

• کنترل کش بر اساس زمان Time-Based Cache Control

• سوال و پاسخ: کنترل کش بر اساس زمان RQ - Time-Based Cache Control

• اعتبارسنجی مجدد بر اساس مسیر (Path Based Revalidation) Path-Based Revalidation

• سوال و پاسخ: اعتبارسنجی مجدد بر اساس مسیر RQ - Path-Based Revalidation

• اعتبارسنجی مجدد با revalidateTag() Revalidating with revalidateTag()

• سوال و پاسخ: اعتبارسنجی مجدد با revalidateTag() RQ - Revalidating with revalidateTag()

Pages Router Pages Router

• آشنایی با Pages Router Introduction to Pages Router

• سوال و پاسخ: آشنایی با Pages Router RQ - Introduction to Pages Router

• مسیریابی با Pages Router Routing With Pages Router

• استخراج Slug از مسیر پویا Extracting the Slug from Dynamic Path

• استفاده از Catch All Segments در Pages Router Catch-All Segments in Pages Router

• سوال و پاسخ: Catch All Segments در Pages Router RQ - Catch-All Segments in Pages Router

• افزودن رابط کاربری سراسری Adding Global Interface

• لینک‌دهی و ناوبری (Navigation) Linking and Navigation

استفاده از Prisma با SQLite Prisma with SQLite

• آشنایی با Prisma Introduction to Prisma

• سوال و پاسخ: آشنایی با Prisma RQ - Introduction to Prisma

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

• ایجاد Prisma Client Creating Prisma Client

• درج داده با استفاده از create() Inserting Data Using create()

• درج داده با استفاده از createMany() Inserting Data Using createMany()

• انواع حذف رکورد: delete() و deleteMany() All Possibilities of Record Deletion - delete() & deleteMany()

• فراخوانی داده‌ها با Prisma Fetching Data with Prisma

• به‌روزرسانی رکوردها با Prisma Updating Records with Prisma

• استفاده از متد upsert() The upsert() Method

بخش مدیریت فروشگاه (MyStore Admin) MyStore - Admin Section

• مقدمه Introduction

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

• ساخت کامپوننت Sidebar Creating Sidebar Component

• کار روی Sidebar Working on Sidebar

• ترکیب Utility Classes با @apply Combining Utility Classes with @apply

• سوال و پاسخ: ترکیب کلاس‌های کاربردی با @layer و @apply RQ - @layer & @apply - Combining Utility Classes

• استایل‌دهی به Sidebar Styling the Sidebar

• افزودن آیکون به Sidebar Adding Icons to the Sidebar

• ساخت صفحه کاربران Creating 'Users' Page

• ساخت فرم افزودن کاربر Creating 'Add Users' Form

• پیاده‌سازی معماری مبتنی بر کامپوننت Implementing Component-Based Architecture

• ساخت کامپوننت‌های Button و Input Creating Button & Input Components

• بازنویسی ساختار کد Refactoring Code Structure

• ایجاد پایگاه داده Database Creation

• افزودن کاربر با Server Action Adding Users with Server Action

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

• سوال و پاسخ: پیاده‌سازی Hashing RQ - Implementing Hashing

• اعتبارسنجی ایجاد کاربر Validating User Creation

• نمایش کاربران در جدول Rendering Users in the Table

• ساخت صفحه ویرایش کاربر Creating Edit User Page

• مقادیر پیش‌فرض پویا برای ویرایش Dynamic Default Values for Edit

• به‌روزرسانی اطلاعات کاربر Updating User Data

• حذف کاربر Deleting User

• ساخت پاپ‌آپ تایید حذف Creating Delete Confirmation Popup

• فعال‌سازی پاپ‌آپ تایید Enabling Confirmation Popup

• حذف کاربر از طریق پاپ‌آپ تایید Deleting User by Confirmation Popup

• ساخت صفحه انواع محصول (Product Type) Creating Product Type Page

• ساخت صفحه افزودن نوع محصول Creating Add Product Type Page

• افزودن مدل‌های انواع محصول و محصول به Schema Adding Product Types and Products Models into the Schema

• سوال و پاسخ: افزودن مدل‌های Product Type و Product به Schema RQ - Adding Models in the Schema - Product Type & Product

• افزودن نوع محصول با استفاده از Server Action Adding Product Type using Server Action

• نمایش انواع محصولات در جدول Rendering Product Types into the Table

• ساخت صفحه ویرایش نوع محصول Creating Edit Product Type Page

• مقادیر پیش‌فرض پویا برای نوع محصول Dynamic Default Values for Product Type

• به‌روزرسانی نوع محصول با Server Action Updating Product Type with Server Action

• حذف نوع محصول با Server Action Deleting Product Type with Server Action

• ساخت صفحه محصولات Creating Products Page

• ساخت رابط کاربری لیست محصولات Creating Products Interface for Listing

• ساخت صفحه افزودن محصول Creating Add Product Page

• تکمیل فرم افزودن محصول Completing Add Products Form

• ساخت کامپوننت Switch Creating Switch Component

• ساخت کامپوننت File Input Creating File Input Component

• نمایش داده‌های پویا انواع محصولات در صفحه افزودن محصول Rendering Dynamic Product Types Data in Add Product Page

• ساخت Server Action برای افزودن محصولات Creating Server Action for Adding Products

• پیاده‌سازی قابلیت ذخیره‌سازی تصاویر Implementing Image Storage Functionality

• تکمیل قابلیت افزودن محصول Completing Add Product Functionality

• نمایش داده‌های پویا در جدول محصولات Rendering Dynamic Data in Products Table

• ساخت صفحه ویرایش محصول Creating Edit Product Page

• مقادیر پیش‌فرض پویا برای محصول Dynamic Default Values for Product

• نمایش مقادیر پیش‌فرض در Switch و File Input Render Default Values in Switch and File Input

• به‌روزرسانی محصول با Server Action Updating Product with Server Action

• سوال و پاسخ: به‌روزرسانی محصول با Server Action RQ - Updating Product with Server Action

• حذف محصول با Server Action Deleting Product with Server Action

بخش مشتری فروشگاه (MyStore Client) MyStore - Client Section

• شروع بخش کلاینت Initiating Client Section

• ساخت کامپوننت Header Creating Header Component

• پیاده‌سازی نوار جستجو Implementing Search Bar

• ترکیب کلاس‌های Tailwind با رویکرد ایده‌آل Joining Tailwind Classes with Ideal Approach

• سوال و پاسخ: ترکیب کلاس‌های Tailwind با رویکرد ایده‌آل RQ - Joining Tailwind Classes with Ideal Approach

• افزودن منوی کشویی پروفایل Adding Profile Dropdown

• استفاده از هوک useRef() useRef() Hook

• بستن منوی پروفایل با کلیک در خارج از آن Close Profile Dropdown Menu on Outside Click

• سوال و پاسخ: بستن منوی پروفایل با کلیک در خارج از آن RQ - Close Profile Dropdown Menu on Outside Click

• ساخت کامپوننت Input Creating Input Component

• ساخت صفحه اصلی Creating Home Page

• ساخت بخش فیلترها Creating Filters Section

• ساخت کامپوننت آکاردئون سفارشی Creating Custom Accordion Component

• سوال و پاسخ: ساخت کامپوننت آکاردئون سفارشی RQ - Creating Custom Accordion Component

• تکمیل کامپوننت آکاردئون سفارشی Completing Custom Accordion Component

• ادامه بخش فیلترها Continue on Filter Section

• ساخت کامپوننت اسلایدر محدوده قیمت Creating Price Range Slider Component

• ساخت کامپوننت کارت محصول Creating Product Card Component

• تکمیل کامپوننت کارت محصول Completing Product Card Component

• ساخت کامپوننت Button Creating Button Component

• ایجاد API برای لیست محصولات API Creation for Product Listing

• نمایش پویا محصولات با استفاده از Server Action Dynamic Product Rendering using Server Action

• ایجاد API برای دریافت انواع محصولات API Creation for Fetching Product Types

• نمایش پویا انواع محصولات با استفاده از API Dynamic Product Type Rendering using API

• قرار دادن مقادیر فیلتر در Search Params Set Filter Values into the Search Params

• اصلاح API محصولات برای اعمال فیلترها Modifying Products API to Apply Filters

• قابلیت فیلتر در سمت کلاینت Filter Functionality on Client Side

• قابلیت فیلتر جستجو Search Filter Functionality

• ساخت صفحه محصول Creating Product Page

• تکمیل صفحه محصول Completing Product Page

• ایجاد API برای دریافت محصول بر اساس ID API Creation for Fetching a Product by its ID

• نمایش پویای جزئیات محصول با استفاده از API Dynamic Product Details Rendering using API

• نمایش محصولات بر اساس وضعیت Rendering Products Based on Status

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

• نمایش کارت آیتم‌های سبد خرید Rendering Cart Item Card

• تکمیل رابط کاربری سبد خرید Completing the Cart UI

• ساخت Context برای مدیریت محصولات Creating Context for Handling Products

• سوال و پاسخ: ساخت Context برای مدیریت محصولات RQ - Creating Context for Handling Products

• پیاده‌سازی قابلیت‌های سبد خرید Implement Cart Functionalities

• پویاسازی صفحه سبد خرید Making Cart Page Dynamic

• فعال‌سازی انتخاب تعداد محصول Enabling Quantity Selection

• پایان بخش صفحه سبد خرید پویا Finishing Dynamic Cart Page

احراز هویت در MyStore MyStore - Authentication

• ساخت صفحه ورود Creating Login Page

• آشنایی با JOSE + JWT Introduction of JOSE + JWT

• راه‌اندازی جریان احراز هویت با استفاده از JOSE + JWT Setup Authentication Flow using JOSE + JWT

• ساخت Server Action برای ورود Create Server Action for Login

• احراز هویت مبتنی بر Cookie Cookie-Based Authentication

• سوال و پاسخ: احراز هویت مبتنی بر Cookie RQ - Cookie-Based Authentication

• مدیریت مسیرهای خصوصی و عمومی با استفاده از Middleware Handling Private and Public Routes using Middleware

• دریافت داده‌های کاربر احراز هویت شده Fetching Authenticated User Data

• پیاده‌سازی خروج (Logout) با Server Action Implementing Logout with Server Action

• احراز هویت تمام Server Actionهای بخش مدیریت Authenticate All the Server Actions of Admin Section

• ایجاد مسیرهای احراز هویت در بخش کلاینت Creating the Authentication Routes on the Client Section

• ساخت رابط کاربری برای مسیرهای احراز هویت Creating Interface for Authentication Routes

• ایجاد جدول خریداران در پایگاه داده Creating Buyer Table in the Database

• ایجاد API ثبت‌نام Creating Sign-Up API

• تست API ثبت‌نام با استفاده از Postman Testing Sign-Up API using Postman

• ایجاد API ورود Creating Login API

• تست API ورود با استفاده از Postman Testing the Login API Using Postman

• پیاده‌سازی قابلیت ثبت‌نام در بخش کلاینت Implementing Sign-Up Functionality in the Client Section

• پیاده‌سازی قابلیت ورود مشتری Implementing Customer Login Functionality

• API برای دریافت داده‌های منحصر به فرد مشتری API to Fetch Unique Customer Data

• دریافت داده‌های مشتری با API در بخش کلاینت Fetching Customer Data using API in the Client Section

• قابلیت خروج در بخش کلاینت Logout Functionality in the Client Section

درگاه پرداخت و فروش در MyStore MyStore - Payment Gateway & Sales

• مقدمه Introduction

• سوال و پاسخ: مقدمه RQ - Introduction

• تنظیمات اولیه Stripe Basic Configurations of Stripe

• نمایش فرم پرداخت داخلی Stripe Rendering Stripe's Embedded Checkout Form

• ایجاد پویا نشست‌های پرداخت (Checkout Session) Creating Checkout Session Dynamically

• ساخت صفحه وضعیت پرداخت Creating Payment Status Page

• ایجاد جدول فروش و تراکنش‌ها در پایگاه داده Creating Sales and Transaction Table in Database

• API برای به‌روزرسانی پایگاه داده پس از پرداخت موفق API to Update Database after Successful Checkout

• تست API پرداخت با استفاده از Postman Testing the Checkout API using Postman

• یکپارچه‌سازی API پرداخت در بخش کلاینت Integrating Checkout API in the Client Section

• ساخت بخش مدیریت خریداران Creating Buyer Master Section

• دریافت لیست خریداران با استفاده از Server Action Fetching Buyers List using Server Action

گزارش‌ها و تحلیل‌ها (نمودارها) در MyStore MyStore - Reports and Analysis (Charts)

• مقدمه Introduction

• آماده‌سازی گزارش مشتریان و خریداران Preparing Customers and Buyers Report

• نمایش گزارش مشتریان و خریداران Rendering Customers & Buyers Report

• آماده‌سازی گزارش کل درآمد Preparing Total Revenue Report

• آماده‌سازی گزارش آخرین سفارش‌ها Preparing Recent Order Report

• ساخت مدال محصولات خریداری شده Creating Purchased Products Modal

• دریافت محصولات خریداری شده در مدال Fetching Purchased Products in Modal

• نمایش محصولات در جدول محصولات خریداری شده Render Products in the Purchased Products Table

• پیاده‌سازی نمودار با استفاده از Recharts Implementing Chart Using Recharts

• آماده‌سازی گزارش فروش با استفاده از نمودار Preparing Sales Report Using Chart

• نمایش نمودار فروش با مقادیر پویا Rendering Sales Chart with Dynamic Values

• آماده‌سازی گزارش مشتریان با استفاده از نمودار Preparing Customers Report Using Chart

• ساخت کامپوننت بخش نمودارها Creating Chart Section Component

استقرار (Deployment) پروژه MyStore MyStore - Deployment

• مقدمه Introduction

• سوال و پاسخ: مقدمه RQ - Introduction

• آشنایی با CI/CD Introduction to CI/CD

• سوال و پاسخ: آشنایی با CI/CD RQ - Introduction to CI/CD

• یکپارچه‌سازی با GitHub GitHub Integration

• سوال و پاسخ: یکپارچه‌سازی با GitHub RQ - GitHub Integration

• مهاجرت پایگاه داده از SQLite به MySQL Database Migration from SQLite to MySQL

• اتصال پایگاه داده MySQL به اپلیکیشن مدیریت Link the MySQL Database to Admin Application

• استقرار اپلیکیشن مدیریت در Vercel Deploying Admin App on Vercel

• استقرار اپلیکیشن کلاینت در Vercel Deploying Client App on Vercel