آموزش جامع نکست‌جی‌اس، سوالات مصاحبه، و پروژه فروشگاه اینترنتی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• NEXT JS در مقابل ReactJS NEXT JS in spite of ReactJS

• RQ - NEXT JS در مقابل ReactJS RQ - NEXT JS in spite of ReactJS

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

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

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

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

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

• RQ - 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

• تعریف Route ها Defining Routes

• Nested Routes Nested Routes

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

• درک Layout کلی Understanding Global Layout

• ایجاد کامپوننت Header کلی Creating Global Header Component

• نام مستعار Import The Import Alias

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

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

• مبانی کامپوننت <Image/> <Image/> Component Basics

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

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

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

• RQ - استایل‌دهی - CSS کلی و ماژول‌های CSS RQ - Styling - Global CSS and CSS Modules

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

• RQ - React Server Component در مقابل Client Component RQ - React Server Component Vs Client Component

• صفحه خطا Error Page

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

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

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

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

• RQ - کامپوننت‌های سرور ناهمزمان RQ - Asynchronous Server Components

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

مبانی SQLite SQLite Basics

• مقدمه‌ای بر SQLite Introduction to SQLite

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

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

Next با SQLite Next 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 the Code Structure

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

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

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

• اجرای Query و Redirect با redirect() Executing Query & Redirecting with redirect()

• ایجاد رابط کاربری گرید محصولات Creating Products Grid Interface

• RQ - ایجاد رابط کاربری گرید محصولات RQ - Creating Products Grid Interface

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

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

Caching در NextJS Caching in NextJS

• درک Caching در Next Understanding Caching in Next

• RQ - درک Caching در Next RQ - Understanding Caching in Next

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

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

• RQ - Static به Dynamic - کنترل کش RQ - Static to Dynamice - Cache Control

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

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

• اعتبار سنجی مبتنی بر مسیر Path Based Revalidation

• RQ - اعتبار سنجی مبتنی بر مسیر RQ - Path Based Revalidation

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

• RQ - اعتبار سنجی با revalidateTag() RQ - Revalidating with revalidateTag()

Pages Router Pages Router

• مقدمه‌ای بر Pages Router Introduction to Pages Router

• RQ - مقدمه‌ای بر 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

• RQ - Catch-All Segments در Pages Router RQ - Catch-All Segments in Pages Router

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

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

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

Prisma با SQLite Prisma with SQLite

• مقدمه‌ای بر Prisma Introduction to Prisma

• RQ - مقدمه‌ای بر Prisma RQ - Introduction to Prisma

• تنظیم Prisma Setting Up Prisma

• ایجاد کلاینت Prisma 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

• ایجاد کامپوننت Sidebar Creating Sidebar Component

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

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

• RQ - @layer & @apply - ترکیب کلاس‌های Utility 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

• RQ - پیاده‌سازی 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

• ایجاد صفحه نوع محصول Creating Product Type Page

• ایجاد صفحه افزودن نوع محصول Creating Add Product Type Page

• افزودن مدل‌های نوع محصول و محصول به اسکیما Adding Product Types and Products models into the schema

• RQ - افزودن مدل‌ها در اسکیما - نوع محصول و محصول 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

• رندر مقادیر پیش‌فرض در سوئیچ و ورودی فایل Render Default values in Switch and File Input

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

• RQ - به‌روزرسانی محصول با server action RQ - Updating Product with server action

• حذف محصول با server action Deleting Product with server action

Mystore - بخش کلاینت Mystore - Client Section

• راه‌اندازی بخش کلاینت Initiating Client Section

• ایجاد کامپوننت Header Creating Header Component

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

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

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

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

• هوک useRef() useRef() Hook

• بستن منوی کشویی پروفایل با کلیک خارج Close Profile Dropdown menu on outside click

• RQ-بستن منوی کشویی پروفایل با کلیک خارج RQ-Close Profile Dropdown menu on outside click

• ایجاد کامپوننت ورودی Creating Input component

• ایجاد صفحه اصلی Creating Home Page

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

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

• RQ-ایجاد کامپوننت آکاردئون سفارشی 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

• تنظیم مقادیر فیلتر در پارامترهای جستجو 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 برای دریافت محصول بر اساس شناسه آن 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

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

• RQ - ایجاد کانتکست برای مدیریت محصولات RQ - Creating Context for Handling Products

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

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

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

• تکمیل صفحه پویا سبد خرید Finishing Dynamic Cart Page

Mystore - احراز هویت Mystore - Authenitcation

• ایجاد صفحه ورود Creating Login Page

• معرفی JOSE + JWT Introduction of JOSE + JWT

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

• ایجاد سرور اکشن برای ورود Create Server action for Login

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

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

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

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

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

• احراز هویت تمام Server Actions بخش مدیریت 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 Signup API using Postman

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

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

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

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

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

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

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

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

• مقدمه Introduction

• RQ - مقدمه RQ - Introduction

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

• رندر کردن فرم پرداخت تعبیه شده Stripe Rendering Stripe's Embedded Checkout Form

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

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

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

• API برای به‌روزرسانی پایگاه داده پس از پرداخت موفق API to Update Database after the 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

MyStore - استقرار MyStore - Deployment

• مقدمه Introduction

• RQ - مقدمه RQ - Introduction

• مقدمه‌ای بر CI/CD Introduction to CI/CD

• RQ - مقدمه‌ای بر CI/CD RQ - Introduction to CI/CD

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

• RQ - یکپارچه‌سازی 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