آموزش سمت سرور با React 18 و Next JS (نسخه 2022)

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

معرفی Introduction

• معرفی Introduction

• نصب Node JS Installing Node JS

• IDE IDE

• بررسی اجمالی پروژه Project overviews

• بعدی چیه ؟ What is Next ?

مبانی Basics

• ایجاد یک پروژه جدید Creating a new project

• مسیرهای ایستا و تو در تو Static and nested routes

• مسیرهای پویا Dynamic routes

• همه را بگیر Catch all

• جهت یابی Navigation

• اجزاء Components

• سبک ها Styles

• The Head Comp The Head comp

• سند The _document

• فایل های استاتیک Static files

پیش رندر Pre-Rendering

• معرفی Introduction

• تولید استاتیک Static generation

• لوازم ثابت را دریافت کنید Get static props

• ISR ISR

• یافت نشد و تغییر مسیر دهید Not found and Redirect

• مسیرهای ثابت را دریافت کنید Get static paths

• لوازم جانبی سرور را دریافت کنید Get server side props

• واکشی سمت مشتری Client side fetching

پروژه تمرین: هوکوسای Practice project: Hokusai

• نصب و راه اندازی Installation

• چیدمان اصلی Main Layout

• چرخ فلک Carousel

• کارت های خانه Home cards

• مقالات Articles

• بیو پیج Bio page

API API

• معرفی Introduction

• ایجاد یک مسیر API Creating an API route

• ایجاد یک درخواست POST Making a POST request

• مسیرهای پویا API Dynamic API routes

• اتصال به Mongo DB Connecting to Mongo DB

• در مورد Mongoose چه خبر؟ What about Mongoose

• با استفاده از زمینه Using the context

• با استفاده از Redux Using Redux

استقرار Deploying

• معرفی Introduction

• چک کردن سر Checking Head

• فایل کانفیگ The config file

• ساختمان Building

• در حال استقرار در Vercel Deploying to Vercel

دانشگاه AUTH AUTH

• ایجاد فرم Creating the Form

• ثبت نام کاربران Register Users

• هش رمز عبور Hashing password

• اعتبار سنجی Validation

• کاربران منحصر به فرد Unique Users

• ورود کاربران Sign in users

• بررسی جلسه و خروج Check session and logout

• نگهبان مسیر Route guard

• امنیت API API Securiity

پروژه تمرین: SmellyCat Practice Project: SmellyCat

• نصب و راه اندازی Installation

• سر و پا Head and Footer

• برجسته و طرح را نشان می دهد Featured and shows layout

• طرح بندی خبرنامه Newsletter layout

• ایجاد علامت در فرم Creating the sign in form

• افزودن Redux Adding Redux

• مدل کاربر The user Model

• ثبت نام کاربر Register user

• اطلاعات کاربر در فروشگاه User data on the store

• جلسه بعدی تاییدیه Next-Auth session

• اطلاعیه ها قسمت 1 Notifications part 1

• اطلاعیه ها قسمت 2 Notifications part 2

• ورود کاربران 1 Sign in Users 1

• ورود کاربران 2 Sign in Users 2

• ورود خودکار Auto sign in

• خروج از سیستم و هدر Sign out and header

• چیدمان نگهبان و مدیر Guard and admin layout

• فرم نمایش ایجاد کنید The create show form

• مدل نشان می دهد و API The shows model and API

• نقش ها و ارسال را بررسی کنید Check roles and posting

• اعتبار سنجی سرور اضافی Extra server validation

• آپلود تصویر قسمت 1 Uploading image part 1

• آپلود تصویر قسمت 2 Uploading image part 2

• پاک کردن تصویر با Refs Clearing image with Refs

• داده‌های نمایش‌های مدیریت را نشان می‌دهد Shows data for admin shows

• مدیر جدول صفحه را نشان می دهد Admin shows Pag table

• صفحه بندی مدیریت را تمام کنید Finish admin pagination

• قسمت 1 معین را حذف کنید Remove modal part 1

• قسمت 2 معین را حذف کنید Remove modal part 2

• ویرایش قسمت 1 نمایش Edit show part 1

• ویرایش قسمت 2 نمایش Edit show part 2

• نمایش های خانگی Home shows

• مسیر را نشان می دهد Shows route

• بارگذاری بیشتر Load more

• صفحه را نشان می دهد Shows page

• آخرین نمایش ها Latest shows

• خبرنامه Newsletter

• فرم تماس Contact form

• ارسال ایمیل Sending emails

• به روز رسانی قسمت 1 کاربر Update user part 1

• به روز رسانی قسمت 2 کاربر Update user part 2

مقدمه [Legacy React 17 Next 10] Introduction [Legacy React 17 Next 10 ]

• معرفی Introduction

• از چه IDE باید استفاده کنید What IDE should you use

• نصب Node JS Node JS installation

• نحوه دریافت کد هر بخش How to get the code of each section

اصول [Legacy React 17 Next 10] The Basics [Legacy React 17 Next 10 ]

• NEXT js چیست What is NEXT js

• نحوه کار مسیرها و ایجاد یک پروژه How routes work and creating a project

• مسیرهای استاتیک و مسیرهای تودرتو Static routes and Nested routes

• مسیرهای پویا Dynamic routes

• همه مسیرها را بگیرید Catch all routes

• جهت یابی Navigation

• اجزاء یا غیر اجزاء Components or not components

• سبک ها Styles

• متا تگ ها و Head Meta tags and Head

• سند The document

• تصاویر و فایل های ثابت Images and static files

PRE-Rendering [Legacy React 17 Next 10] PRE-Rendering [Legacy React 17 Next 10 ]

• معرفی Introduction

• تولید استاتیک Static generation

• لوازم ثابت را دریافت کنید Get static props

• بازسازی استاتیکی افزایشی (ISR) Incremental static regeneration ( ISR )

• یافت نشد و تغییر مسیر داد Not found and Redirects

• مسیر ایستا را دریافت کنید Get static path

• لوازم جانبی سرور را دریافت کنید Get server side props

• واکشی سمت مشتری Client side fetching

پروژه اول را تمرین کنید: هوکوسای [Legacy React 17 Next 10] Practice project one: Hokusai [Legacy React 17 Next 10 ]

• تاسیسات Installations

• طرح و هدر Layout and header

• در حال بارگیری json و نوار لغزنده Loading json and slider

• کارت های خانه Home cards

• ایجاد صفحه مقاله Creating the article page

• صفحه بیو The bio page

• پایان Finish

مسیرهای API [Legacy React 17 بعدی 10] API Routes [Legacy React 17 Next 10 ]

• معرفی Introduction

• ایجاد و مسیر API Creating and API route

• ایجاد یک درخواست POST Making a POST request

• مسیرهای پویا API Dynamic API routes

• اتصال به Mongo DB - قسمت اول Connecting to Mongo DB - part one

• اتصال به Mongo DB - قسمت دوم Connecting to Mongo DB - part two

• در مورد مونگوس چطور What about mongoose

• کار با زمینه واکنش Working with the react context

• کار با redux - قسمت اول Working with redux - part one

• کار با redux - قسمت دوم Working with redux - part two

در حال استقرار [Legacy React 17 بعدی 10] Deploying [Legacy React 17 Next 10 ]

• معرفی Introduction

• بررسی موارد برای بهینه سازی Checking things to optimize

• فایل کانفیگ The config file

• ساختمان Building

• استقرار Deploying

احراز هویت [Legacy React 17 بعدی 10] Authentication [Legacy React 17 Next 10 ]

• ایجاد علامت در فرم Creating the sign in form

• ثبت نام کاربران Register users

• هش کردن پسوردها Hashing passwords

• اعتبار سنجی Validation

• کاربران تکراری Duplicated users

• فایل auth بعدی The next auth file

• جلسه بررسی Checking session

• نگهبان مسیر Route guard

• امنیت API API security

پروژه دوم را تمرین کنید: گربه‌های بدبو [Legacy React 17 Next 10] Practice project two: The smelly cats [Legacy React 17 Next 10 ]

• نصب و راه اندازی Installation

• سربرگ و پاورقی Header and footer

• اتصال به redux Connecting to redux

• ویژه Featured

• صفحه اصلی طرح بندی را نشان می دهد Home shows layout

• ایجاد علامت در فرم Creating the sign in form

• تایید فرم ورود به سیستم Sign in form validation

• رفع مشکل MUI Fixing MUI issue

• اتصال به Mongo DB Connecting to Mongo DB

• ایجاد مدل کاربر Creating the user model

• ثبت نام کاربر - قسمت اول Register user - part one

• ثبت نام کاربر - قسمت دوم Register user - part two

• ورود کاربران Sign in users

• اطلاع رسانی قسمت 1 Notification part 1

• اطلاع رسانی قسمت 2 Notification part 2

• افزودن کاربر به فروشگاه Adding a user to the store

• ایجاد مسیر API کاربران Creating a users API route

• هنگام ثبت نام وارد شوید Sign in when register

• ورود خودکار Auto sign in

• کاربران را از سیستم خارج کنید Sign out users

• نگهبانان مسیر Route guards

• طرح ادمین Admin Layout

• ایجاد مدل نمایش Creating the show model

• ایجاد فرم مدل نمایش Creating the show model form

• ارسال نمایش ها به DB Posting shows to the DB

• اعتبار سنجی سرور سفارشی Custom server validation

• بررسی نقش ها Checking roles

• آپلود تصویر - قسمت اول Uploading image - part one

• آپلود تصویر - قسمت دوم Uploading image - part two

• در حال اتمام صفحه نمایش افزودن Finishing the add show page

• نصب افزونه صفحه بندی Installing the pagination plugin

• کار با صفحه بندی قسمت 1 Working with pagination part 1

• کار با صفحه بندی قسمت 2 Working with pagination part 2

• حذف پست ها Removing posts

• اتمام حذف پست ها Finishing the remove posts

• ویرایش پست ها قسمت اول Editing posts part one

• ویرایش پست ها قسمت دوم Editing posts part two

• رفع شلاق Slug fix

• دریافت خانه نشان می دهد Getting home shows

• ایجاد نمایه نمایش ها Creating the index of shows

• ایجاد API شاخص نشان می دهد Creating the API of index shows

• نمایش نمایش ها Displaying shows

• ایجاد ایمیل خبرنامه Creating the newsletter mail

• خبرنامه را تمام کنید Finish the newsletter

• ایجاد صفحه تماس Creating the contact page

• ارسال ایمیل قسمت اول Sending emails part one

• ارسال ایمیل قسمت دوم Sending emails part two

• به روز رسانی نمایه کاربر قسمت اول Updating user profile part one

• به روز رسانی نمایه کاربر قسمت دوم Updating user profile part two

• ایمیل مرحله اول قسمت اول Email stepper part one

• مرحله دوم ایمیل Email stepper part two

• ایمیل مرحله سوم قسمت سوم Email stepper part three

دوره کوتاه واکنش نشان می دهد. React mini course.

• در حال آپلود!!! Uploading !!!

• اصول اولیه: گرفتن دیگ بخار BASICS: Getting the boilerplate

• مبانی: بسته نرم افزاری BASICS: The bundle

• مبانی: از ابتدا به بالا BASICS: From the grund up

• مبانی: پشت صحنه BASICS: Behind the scenes

• مبانی: ساختار پروژه BASICS: Project structure

• مبانی: انواع اجزاء BASICS: Types of components

• مبانی: اضافه کردن سبک BASICS: Adding some style

• مبانی: رویدادها BASICS: Events

• مبانی: ایالت BASICS: State

• مبانی: لوازم بخش اول BASICS: Props part one

• مبانی: لوازم بخش 2 BASICS: Props part 2

• مبانی: لوازم قسمت 3 BASICS: Props part 3

• مبانی: کودکان واکنش نشان دهید BASICS: React children

• مبانی: بیشتر در مورد یک ظاهر طراحی شده BASICS: More on styling

• مبانی: اخبار را فیلتر کنید BASICS: Filter the news

• مبانی: چرخه های زندگی قسمت 1 BASICS: Lifecycles part 1

• مبانی: چرخه های زندگی قسمت 2 BASICS: Lifecycles part 2

• مبانی: معرفی قلاب های React BASICS: React hooks intro

• مبانی: قلاب UseState BASICS: UseState hook

• مبانی: UseState hook قسمت 2 BASICS: UseState hook part 2

• مبانی: از افکت استفاده کنید BASICS: Use effect

• مبانی: از پاسخ به تماس استفاده کنید BASICS: Use callback

• مبانی: UserRef BASICS: UseRef

• مبانی: زمینه BASICS: Context

• مبانی: بخش زمینه 2 BASICS: Context part 2

• تمرین: نصب کنید PRACTICE: Install

• تمرین: زمینه PRACTICE: the context

• تمرین: مرجع و اعتبار PRACTICE: Ref and validation

• تمرین: اضافه کردن بازیکنان PRACTICE: Adding players

• تمرین: نشان دادن بازیکنان PRACTICE: showing players

• تمرین: بعد نان تست کنید PRACTICE: Next and toastify

• تمرين: گرفتن بازي PRACTICE: Getting the looser

• مسیرها: مقدمه ROUTES: INTRO

• مسیرها: فرآیند مسیر ROUTES: The route process

• ROUTES: فایل مسیر اصلی ROUTES: The main route file

• مسیرها: راه اندازی مسیرها ROUTES: setting up routes

• مسیرها: پیوند ROUTES: Linking

• مسیرها: چیدمان بهتر ROUTES: Better layout

• مسیرها: Params ROUTES: Params

• مسیرها: اطلاعات بیشتر در مورد روتر واکنش ROUTES: More on react router

• مسیرها: سوئیچ ROUTES: Switch

• مسیرها: تغییر مسیرها ROUTES: Redirections

• مسیرها: 404 ROUTES: 404

• مبانی 2: مقدمه BASICS 2: intro

• مبانی 2: اجزای خالص BASICS 2: Pure components

• مبانی 2: عناصر مجاور BASICS 2: Adjacent elements

• مبانی 2: بخش اول HOC BASICS 2: HOC's part one

• مبانی 2: بخش دوم HOC BASICS 2: HOC's part two

• مبانی 2: انتقال یک BASICS 2: Transitions one

• مبانی 2: انتقال دو BASICS 2: Transitions two

• مبانی 2: انتقال CSS BASICS 2: CSS transitions

• مبانی 2: گروه انتقال BASICS 2: Transitions group

• مبانی 2: تذکرات ارجمند BASICS 2: Honorable mentions

• تمرین: نصب PRACTICE: Installation

• تمرین: راه اندازی redux PRACTICE: setting up redux

• تمرین: سربرگ و طرح اصلی PRACTICE: Header and main layout

• تمرین: سرور API PRACTICE: API server

• تمرین: واکشی پست های خانه قسمت اول PRACTICE: Fetching home posts part one

• تمرین: واکشی پست های خانه قسمت دوم PRACTICE: Fetching home posts part two

• تمرین: سنگ تراشی PRACTICE: Masonry

• تمرین: ایجاد خبرنامه افزودن PRACTICE: Creating the add newsletter

• تمرین: پایان خبرنامه PRACTICE: Finishing the newsletter

• تمرین: تعمیر خبرنامه و ایجاد صفحه پست PRACTICE: Newsletter fix and creating post page

• تمرین: پاکسازی صفحه پست و 404 PRACTICE: Post page cleanup and 404

• REDUX: مقدمه REDUX: Intro

• REDUX: اتصال REDUX: Connecting

• REDUX: خالقان و کاهش دهنده های اکشن REDUX: Action creators and reducers

• REDUX: کاهنده ها را ترکیب کنید REDUX: Combine reducers

• REDUX: ایجاد یک کاهنده معتبر REDUX: Creating a valid reducer

• REDUX: ابزارهای توسعه Redux REDUX: Redux devtools

• REDUX: عملیات اعزام REDUX: Dispatching actions

• REDUX: نقشه وضعیت به غرفه ها REDUX: Map state to props

• REDUX: قلاب های Redux REDUX: Redux hooks

• REDUX: انواع REDUX: Types

• REDUX: درخواست REDUX: Making request