آموزش تسلط بر 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

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

• پرسش و پاسخ: CSS سراسری و CSS Modules RQ - Styling - Global CSS and CSS Modules

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

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

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

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

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

• برقراری ارتباط با API در NextJS Making API calls in NextJS

• کامپوننت‌های سرور ناهمگام (Asynchronous Server Components) 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

کشینگ در NextJS Caching in NextJS

• درک مفاهیم کشینگ در NextJS Understanding Caching in NextJS

• پرسش و پاسخ: درک مفاهیم کشینگ در NextJS RQ - Understanding Caching in NextJS

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

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

• کنترل کش: تغییر از استاتیک به دینامیک Static to Dynamic - Cache Control

• پرسش و پاسخ: تغییر از استاتیک به دینامیک RQ - Static to Dynamic - Cache Control

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

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

• بازبینی مسیر بر اساس Path Path-Based Revalidation

• پرسش و پاسخ: بازبینی مسیر بر اساس Path 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

• مسیریابی (Routing) با 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

• لینک‌دهی و ناوبری 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 - بخش مدیریت MyStore - Admin Section

• مقدمه Introduction

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

• ساخت کامپوننت سایدبار Creating Sidebar Component

• کار بر روی سایدبار Working on Sidebar

• ترکیب کلاس‌های Utility با @apply Combining Utility Classes with @apply

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

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

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

• ساخت صفحه کاربران (Users) 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

• پرسش و پاسخ: پیاده‌سازی هشینگ 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 - بخش کاربر MyStore - Client Section

• شروع بخش کاربر (Client Section) Initiating Client Section

• ساخت کامپوننت هدر 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

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

• پرسش و پاسخ: ساخت کامپوننت Accordion RQ - Creating Custom Accordion Component

• تکمیل کامپوننت Accordion 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

• نمایش محصولات بر اساس وضعیت (Status) 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

• ساخت صفحه ورود (Login) 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-Based Authentication

• پرسش و پاسخ: احراز هویت مبتنی بر کوکی 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 ثبت‌نام (Sign Up) Creating Sign-Up API

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

• ساخت API ورود (Login) 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

• رندر کردن فرم پرداخت داخلی (Embedded Checkout) استرایپ Rendering Stripe's Embedded Checkout Form

• ساخت پویا برای 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

• ساخت بخش مدیریت خریداران (Buyer Master) 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

پروژه 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