آموزش تسلط بر Next.js با ساخت اپلیکیشن‌های مقیاس‌پذیر، مسیریابی، دیتابیس و بهینه‌سازی - آخرین آپدیت

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

مقدمه Introduction

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

• مقایسه Pages Router و App Router Pages Router vs. App Router

• مقایسه React (سمت کلاینت) و Next.js (سمت سرور) React (client side) vs. Next.js (server side)

• پرسش: Next.js در مقابل React RQ: Next.js in spite of React

• ساخت اولین پروژه Creating first project

• مقدمه Introduction

• پرسش: Pages Router در مقابل App Router RQ: Pages Router vs. App Router

• پرسش: ساختار پروژه RQ: Project structure

• Next.js در مقابل React Next.js in spite of React

• پرسش: ساخت اولین پروژه RQ: Creating first project

1. مبانی Next.js با App Router 1. Next.js Basics with App Router

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

• برقرار کردن فراخوانی‌های API در Next.js Making API calls in Next.js

• ساخت کامپوننت هدر سراسری Creating global header component

• پرسش: استایل‌دهی—CSS سراسری و CSS Modules RQ: Styling—global CSS and CSS modules

• مقایسه Server Component و Client Component در React React server component vs. client component

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

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

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

• پرسش: کامپوننت—ویژگی بهینه‌سازی خودکار RQ: Component—autooptimization feature

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

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

• پرسش: Server Component در مقابل Client Component RQ: React server component vs. client component

• صفحه یافت نشد (Not found) Not found page

• درک لایوت سراسری (Global Layout) Understanding global layout

• مسیرهای پویا و پارامترهای مسیر Dynamic routes and route params

• کامپوننت: ویژگی بهینه‌سازی خودکار Component: Autooptimization feature

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

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

• پرسش: کامپوننت‌های سرور ناهمگام RQ: Asynchronous server components

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

• لینک دادن صفحات Linking pages

• تعریف مسیرها Defining routes

2. مبانی SQLite 2. SQLite Basics

• ساخت دیتابیس SQLite Creating SQLite database

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

• انواع داده‌ها در SQLite Data types in SQLite

3. ترکیب Next.js با SQLite 3. Next.js with SQLite

• ساخت رابط کاربری شبکه محصولات (Grid) Creating products grid interface

• بازسازی (Refactoring) ساختار کد Refactoring the code structure

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

• تنظیم مسیرهای پویا برای محصولات Configuring dynamic routes for products

• پرسش: ساخت رابط کاربری شبکه محصولات RQ: Creating products grid interface

• رندر کردن داده‌ها در اپلیکیشن Next Rendering data in next app

• مقدمه Introduction

• راه‌اندازی دیتابیس با better-sqlite3 Setting up database with better-sqlite3

• ساخت رابط کاربری افزودن محصول Creating add product interface

• مدیریت ارسال فرم با Server Action Handling form submission with server action

• اجرای کوئری و انتقال کاربر با redirect() Executing query and redirecting with redirect()

• پیاده‌سازی قابلیت حذف محصول Implementing delete product feature

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

• ساخت جدول و افزودن داده‌ها Table creation and adding data

4. کشینگ در Next.js 4. Caching in Next.js

• درک مفهوم کشینگ در Next.js Understanding caching in Next.js

• به‌روزرسانی داده‌ها با revalidateTag() Revalidating with revalidateTag()

• پرسش: رفتار غیرمنتظره در بیلد پروژه RQ: Unexpected behaviour in project build

• رفتارهای غیرمنتظره در بیلد پروژه Unexpected behaviour in project build

• کنترل کش بر اساس زمان (Time-based) Time-based cache control

• پرسش: به‌روزرسانی بر اساس مسیر (Path-based) RQ: Path-based revalidation

• پرسش: کنترل کش بر اساس زمان RQ: Time-based cache control

• به‌روزرسانی بر اساس مسیر Path-based revalidation

• پرسش: درک کشینگ در Next.js RQ: Understanding caching in Next.js

• پرسش: تغییر استاتیک به دینامیک—کنترل کش RQ: Static to dynamic—cache control

• تغییر استاتیک به دینامیک: کنترل کش Static to dynamic: Cache control

• پرسش: به‌روزرسانی با revalidateTag() RQ: Revalidating with revalidateTag()

5. Pages Router 5. Pages Router

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

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

• بخش‌های Catch-all در Pages Router Catch-all segments in Pages Router

• پرسش: بخش‌های Catch-all در Pages Router RQ: Catch-all segments in Pages Router

• افزودن رابط کاربری سراسری Adding global interface

• استخراج slug از مسیر پویا Extracting the slug from dynamic path

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

• پرسش: مقدمه‌ای بر Pages Router RQ: Introduction to Pages Router

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

• دریافت داده‌ها با Prisma Fetching data with Prisma

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

• متد upsert() The upsert() method

• تمام روش‌های حذف رکورد: delete() و deleteMany() All possibilities of record deletion - delete() and deleteMany()

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

• درج داده‌ها با استفاده از createMany() Inserting data using createMany()

• پرسش: مقدمه‌ای بر Prisma RQ: Introduction to Prisma

• درج داده‌ها با استفاده از create() Inserting data using create()

• ساخت Prisma Client Creating Prisma client

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

7. فروشگاه من: بخش مدیریت 7. MyStore: Admin Section

• مقادیر پیش‌فرض پویا برای ویرایش Dynamic default values for edit

• رندر کردن انواع محصولات در جدول Rendering product types into the table

• پیاده‌سازی هشینگ (Hashing) Implementing hashing

• افزودن مدل‌های انواع محصول و محصول به Schema Adding product types and products models into the schema

• مقادیر پیش‌فرض پویا برای محصول Dynamic default values for product

• ساخت کامپوننت سایدبار Creating sidebar component

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

• پیاده‌سازی معماری مبتنی بر کامپوننت Implementing component-based architecture

• بازسازی ساختار کد Refactoring code structure

• ساخت صفحه ویرایش محصول Creating edit product page

• ساخت رابط کاربری لیست محصولات Creating products interface for listing

• مقادیر پیش‌فرض پویا برای نوع محصول Dynamic default values for product type

• پرسش: افزودن مدل‌ها به Schema—نوع محصول و محصول RQ: Adding models in the schema—product type and product

• ساخت کامپوننت ورودی فایل (File Input) Creating file input component

• حذف نوع محصول با Server Action Deleting product type with server action

• پرسش: @layer و @apply—ترکیب کلاس‌های Utility RQ: @layer and @apply—combining utility classes

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

• پیاده‌سازی قابلیت ذخیره‌سازی تصاویر Implementing image storage functionality

• اعتبار‌سنجی ساخت کاربر Validating user creation

• فعال‌سازی پاپ‌آپ تایید Enabling confirmation popup

• ساخت صفحه افزودن نوع محصول Creating add product type page

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

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

• ساخت فرم افزودن کاربران Creating add users form

• ساخت صفحه نوع محصول Creating product type page

• حذف کاربر از طریق پاپ‌آپ تایید Deleting user by confirmation popup

• ساخت صفحه افزودن محصول Creating add product page

• ساخت صفحه ویرایش نوع محصول Creating edit product type page

• حذف محصول با Server Action Deleting product with server action

• ساخت کامپوننت‌های Button و Input Creating button and input components

• ساخت صفحه ویرایش کاربر Creating edit user page

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

• ساخت صفحه کاربران Creating users page

• ساخت دیتابیس Database creation

• رندر داده‌های پویا در صفحه افزودن محصول Rendering dynamic product types data in add product page

• ساخت صفحه محصولات Creating products page

• تکمیل قابلیت افزودن محصول Completing add product functionality

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

• پرسش: به‌روزرسانی محصول با Server Action RQ: Updating product with server action

• ساخت Server Action برای افزودن محصولات Creating server action for adding products

• به‌روزرسانی نوع محصول با Server Action Updating product type with server action

• به‌روزرسانی داده‌های کاربر Updating user data

• ساخت پاپ‌آپ تایید حذف Creating delete confirmation popup

• افزودن کاربران با Server Action Adding users with server action

• حذف کاربر Deleting user

• رندر کاربران در جدول Rendering users in the table

• افزودن نوع محصول با Server Action Adding product type using server action

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

• پرسش: پیاده‌سازی هشینگ RQ: Implementing hashing

• مقدمه Introduction

• رندر مقادیر پیش‌فرض در Switch و ورودی فایل Render default values in switch and file input

• رندر داده‌های پویا در جدول محصولات Rendering dynamic data in products table

• تکمیل فرم افزودن محصولات Completing add products form

8. فروشگاه من: بخش کاربر 8. MyStore: Client Section

• رندر پویا جزئیات محصول با استفاده از API Dynamic product details rendering using API

• ساخت کامپوننت Accordion سفارشی Creating custom accordion component

• ساخت API برای دریافت محصول بر اساس ID API creation for fetching a product by its ID

• بهترین روش ترکیب کلاس‌های Tailwind Joining Tailwind classes with ideal approach

• پویا کردن صفحه سبد خرید Making cart page dynamic

• ساخت صفحه اصلی Creating home page

• تکمیل صفحه سبد خرید پویا Finishing dynamic cart page

• هوک ()useRef useRef() hook

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

• ساخت بخش فیلترها Creating filters section

• فعال‌سازی انتخاب تعداد Enabling quantity selection

• افزودن منوی کشویی پروفایل Adding profile drop-down

• پرسش: بهترین روش ترکیب کلاس‌های Tailwind RQ: Joining Tailwind classes with ideal approach

• ساخت Context برای مدیریت محصولات Creating context for handling products

• تنظیم مقادیر فیلتر در Search Params Set filter values into the search params

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

• آغاز بخش کلاینت Initiating client section

• ساخت کامپوننت اسلایدر محدوده قیمت Creating price range slider component

• رندر پویا انواع محصول با استفاده از API Dynamic product type rendering using API

• ساخت کامپوننت کارت محصول Creating product card component

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

• رندر محصولات بر اساس وضعیت Rendering products based on status

• رندر کارت آیتم سبد خرید Rendering cart item card

• پرسش: ساخت Context برای مدیریت محصولات RQ: Creating context for handling products

• ساخت صفحه محصول Creating product page

• ساخت API برای دریافت انواع محصولات API creation for fetching product types

• قابلیت فیلتر در سمت کلاینت Filter functionality on client side

• تکمیل کامپوننت کارت محصول Completing product card component

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

• ساخت کامپوننت هدر Creating header component

• رندر پویا محصولات با استفاده از Server Action Dynamic product rendering using server action

• پرسش: ساخت کامپوننت Accordion سفارشی RQ: Creating custom accordion component

• پرسش: بستن منوی پروفایل با کلیک در خارج از محدوده RQ: Close profile drop-down menu on outside click

• اصلاح API محصولات برای اعمال فیلترها Modifying products API to apply filters

• ادامه کار روی بخش فیلتر Continue on filter section

• ساخت API برای لیست محصولات API creation for product listing

• ساخت صفحه سبد خرید Creating cart page

• بستن منوی پروفایل با کلیک در خارج از محدوده Close profile drop-down menu on outside click

• قابلیت فیلتر جستجو Search filter functionality

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

• تکمیل صفحه محصول Completing product page

• تکمیل کامپوننت Accordion سفارشی Completing custom accordion component

9. فروشگاه من: احراز هویت 9. MyStore: Authentication

• ساخت API ورود (Login) Creating login API

• مدیریت مسیرهای خصوصی و عمومی با Middleware Handling private and public routes using middleware

• API برای دریافت داده‌های منحصر‌به‌فرد مشتری API to fetch unique customer data

• پیاده‌سازی قابلیت ثبت‌نام در بخش کلاینت Implementing sign-up functionality in the client section

• تست API ورود با Postman Testing the login API using Postman

• دریافت داده‌های مشتری از طریق API در بخش کلاینت Fetching customer data using API in the client section

• راه‌اندازی جریان احراز هویت با JOSE و JWT Setup authentication flow using JOSE and JWT

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

• ساخت جدول خریداران در دیتابیس Creating buyer table in the database

• احراز هویت تمامی Server Actionهای بخش مدیریت Authenticate all the server actions of admin section

• ساخت API ثبت‌نام Creating sign-up API

• قابلیت خروج در بخش کلاینت Logout functionality in the client section

• تست API ثبت‌نام با Postman Testing sign-up API using Postman

• ساخت مسیرهای احراز هویت در بخش کلاینت Creating the authentication routes on the client section

• دریافت داده‌های کاربر احراز شده Fetching authenticated user data

• ساخت صفحه ورود Creating login page

• مقدمه‌ای بر JOSE و JWT Introduction of JOSE and JWT

• ساخت رابط کاربری برای مسیرهای احراز هویت Creating interface for authentication routes

• پرسش: احراز هویت مبتنی بر کوکی RQ: Cookie-based authentication

• ساخت Server Action برای ورود Create server action for login

• احراز هویت مبتنی بر کوکی Cookie-based authentication

• پیاده‌سازی قابلیت ورود مشتری Implementing customer login functionality

10. فروشگاه من: درگاه پرداخت و فروش 10. MyStore: Payment Gateway and Sales

• تست API تسویه حساب (Checkout) با Postman Testing the checkout API using Postman

• ساخت پویا جلسه تسویه حساب Creating checkout session dynamically

• ساخت جداول فروش و تراکنش در دیتابیس Creating sales and transaction table in database

• مقدمه Introduction

• ساخت بخش مدیریت خریداران Creating buyer master section

• یکپارچه‌سازی API تسویه حساب در بخش کلاینت Integrating checkout API in the client section

• رندر فرم تسویه حساب داخلی Stripe Rendering Stripe's embedded checkout form

• API برای به‌روزرسانی دیتابیس پس از تسویه حساب موفق API to update database after successful checkout

• دریافت لیست خریداران با Server Action Fetching buyers list using server action

• پرسش: مقدمه RQ: Introduction

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

• ساخت صفحه وضعیت پرداخت Creating payment status page

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

• پیاده‌سازی نمودار با Recharts Implementing chart using Recharts

• رندر محصولات در جدول محصولات خریداری شده Render products in the purchased products table

• ساخت کامپوننت بخش نمودار Creating chart section component

• تهیه گزارش کل درآمد Preparing total revenue report

• رندر گزارش مشتریان و خریداران Rendering customers and buyers report

• تهیه گزارش سفارشات اخیر Preparing recent order report

• تهیه گزارش مشتریان و خریداران Preparing customers and buyers report

• ساخت مودال محصولات خریداری شده Creating purchased products modal

• تهیه گزارش مشتریان با استفاده از نمودار Preparing customers report using chart

• تهیه گزارش فروش با استفاده از نمودار Preparing sales report using chart

• دریافت محصولات خریداری شده در مودال Fetching purchased products in modal

• رندر نمودار فروش با مقادیر پویا Rendering sales chart with dynamic values

• مقدمه Introduction

12. فروشگاه من: استقرار (Deployment) 12. MyStore: Deployment

• استقرار اپلیکیشن کلاینت روی Vercel Deploying client app on Vercel

• اتصال دیتابیس MySQL به اپلیکیشن مدیریت Link the MySQL database to admin application

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

• پرسش: یکپارچه‌سازی با GitHub RQ: GitHub integration

• استقرار اپلیکیشن مدیریت روی Vercel Deploying admin app on Vercel

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

• مقدمه Introduction

• پرسش: مقدمه RQ: Introduction

• پرسش: مقدمه‌ای بر CI/CD RQ: Introduction to CI/CD

• مهاجرت دیتابیس از SQLite به MySQL Database migration from SQLite to MySQL