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

Server side with React 18 and Next JS (2022 edition)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش رندر سمت سرور با استفاده از کدی که دوست دارید استفاده از Next JS و React بهتر از برنامه ها تمرین سناریوهای واقعی پیاده سازی در تولید

آیا می‌خواهید برنامه‌های وب با عملکرد بهتر و سئوی پسند با رندر سمت سرور؟ این دوره برای شماست.

ما از همان ابتدا، از "من حتی نمی دانم چیست و چرا باید از آن استفاده کنم؟" شروع می کنیم تا در واقع بفهمیم سمت سرور با Next + React چگونه کار می کند.

شما تمام منطق و تمرین پشت Next JS + React را در ماژول‌های مختلف، از همان ابتدا تا زیر سرفصل‌ها، یاد خواهید گرفت.

از آنجایی که معتقدم بهترین راه برای یادگیری کامل کدنویسی است، ما دو پروژه تمرینی ایجاد خواهیم کرد، یکی آسان و دیگری بسیار پیچیده تر.


نمی دانید چگونه از React استفاده کنید؟

نگران نباشید، یک دوره آموزشی کامل اختیاری وجود دارد که در آن نحوه استفاده از React ساده را به شما نشان خواهیم داد، بنابراین هنگامی که پایه قوی React دارید، می‌توانید با Next JS شروع کنید.


برای خلاصه کردن همه چیز، در این دوره یاد خواهید گرفت:

  • اصول اساسی Next. نحوه نصب و منطق پشت آن.

  • نحوه استفاده صحیح از مسیرها و کارکرد آن با React.

  • ما خواهیم آموخت که چگونه پیش‌رندر در Next JS

    انجام می‌شود
  • از آنجایی که برنامه ما به یک پایگاه داده نیاز دارد، نحوه استفاده از آن را با MongoDB و mongoose یاد خواهید گرفت.

  • امنیت، احراز هویت، محافظ مسیر را اعمال کنید.

  • ما یک پروژه تمرینی ایجاد خواهیم کرد تا همه چیز را تمرین کنیم.

  • البته، ما کل فرآیند استقرار در Vercel، میزبانی Next را یاد خواهیم گرفت.

  • اگر می‌خواهید توانایی‌های React خود را به‌روزرسانی کنید، یک دوره کامل مینی React نیز دریافت خواهید کرد.

در مورد تجربه مربی چطور؟

خب من الان 10 سال است که وجود دارم، برنامه های کاربردی زیادی برای پروژه های کوچک و شرکت های بزرگی مانند سیتی، فاکس، دیزنی و بسیاری دیگر ساخته ام.

امروز من به عنوان توسعه دهنده برای یک شرکت بزرگ کار می کنم که بیشتر برنامه های کاربردی را در React یا Angular توسعه می دهد، اما دوست دارم در اوقات فراغت خود تدریس کنم.

مخاطب هدف چطور؟

  • این دوره تقریباً برای همه است، کمی جاوا اسکریپت لازم است. ما از ES6 استفاده خواهیم کرد، اما شما می توانید در حین حرکت یاد بگیرید.

  • اگر می خواهید برنامه نویسی خود را به سطح بعدی ببرید، این دوره برای شما مناسب است.


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

معرفی 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

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش سمت سرور با React 18 و Next JS (نسخه 2022)
جزییات دوره
56 hours
274
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
896
4.8 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Coding Revolution Coding Revolution

مربی حرفه ای و توسعه دهنده وب. من مدت ها پیش شروع به بروز تب اینترنت کردم. من با ایجاد برنامه نویسی برای ایجاد وب سایت هایی برای پروژه های شخصی خودم شروع کردم اما بعد از مدتی مردم برای ایجاد وب سایت های خود با من تماس گرفتند ، خنده دار نحوه کار همه چیز بیرون من با فناوری هایی مانند PHP ، Wordpress ، Laravel ، NodeJS ، Phyton و بسیاری از زبانهای دیگر کار کردم ، اما امروز دوست دارم با فناوری مبتنی بر JavaScript مانند React ، Angular یا VueJS کار کنم. بله من عاشق جاوا اسکریپت هستم :) برنامه های زیادی برای شرکت های بسیار کوچک و برنامه های بسیار عظیم مانند Citi ، Fox ، Disney ، Roche و بسیاری دیگر بسازید. اما علاوه بر پیشرفت ، دوست دارم با آموزش آنچه دوست دارم ، با مردم تعامل داشته باشم.