آموزش Next.js از ابتدا [ویدئو]

Next.js from Scratch [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Next.js from Scratch با استفاده از Next.js 14 برای ایجاد یک پلت فرم اجاره ملک با ویژگی های جامع، شما را در دنیای توسعه وب مدرن غرق می کند. این دوره با مقدمه ای بر Next.js شروع می شود و اهمیت آن را به عنوان آینده توسعه React با توانایی آن برای تولید وب سایت های رندر شده و ایستا سمت سرور به طور کارآمد برجسته می کند. از طریق ایجاد یک پروژه در دنیای واقعی، فراگیران در اجرای احراز هویت کاربر با Google & Next Auth، مسیرهای RESTful API، حفاظت از مسیر، و مدیریت نمایه‌های کاربر شرکت خواهند کرد. عملکردهای کلیدی مانند فهرست اموال CRUD، آپلود تصویر با یکپارچه سازی ابری، و ویژگی های پیشرفته مانند نقشه های Mapbox و گالری عکس Photoswipe نیز پوشش داده شده است. اهمیت این فناوری ها را در ایجاد برنامه های کاربردی وب بسیار تعاملی و کاربرپسند کشف کنید. این دوره نه تنها به شما آموزش می دهد که چگونه از Next.js به طور موثر استفاده کنید، بلکه همچنین به شما یاد می دهد که چرا این مهارت ها در چشم انداز فناوری امروزی حیاتی هستند و یک سفر یادگیری جامع را از راه اندازی تا استقرار تضمین می کند. با Next.js 14 یک برنامه فول استک را تنظیم و پیکربندی کنید. احراز هویت و مجوز کاربر را با استفاده از Next Auth پیاده سازی کنید. مسیرهای RESTful API را با حفاظت جامع مسیر ایجاد و مدیریت کنید. پروفایل های کاربر را همراه با لیست اموال بسازید و مدیریت کنید. از Mapbox برای نقشه های تعاملی استفاده کنید و یک گالری عکس Photoswipe را ادغام کنید. طراحی واکنشگرا را با استفاده از Tailwind CSS پیاده سازی کنید و نشانک های دارایی و اشتراک گذاری را مدیریت کنید. این دوره برای افرادی طراحی شده است که درک اساسی از جاوا اسکریپت و React دارند و به دنبال ارتقاء مهارت های توسعه وب خود هستند. ایده آل برای توسعه دهندگانی که به دنبال تسلط بر توسعه تمام پشته با استفاده از Next.js هستند، شرکت کنندگان باید آماده تعامل با ویژگی های پیشرفته و ادغام چندین فناوری یادگیری مبتنی بر پروژه در دنیای واقعی برای ایجاد یک وب سایت اجاره ملک کامل باشند * آخرین ویژگی ها را پوشش می دهد. از Next.js 14 برای وب سایت های رندر شده و استاتیک * تمرکز بر طراحی مدرن و واکنش گرا و تجربه کاربر با اجرای ویژگی های جامع

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

معرفی Introduction

  • به دوره خوش آمدید Welcome To The Course

  • نسخه ی نمایشی پروژه PropertyPulse PropertyPulse Project Demo

  • Next.js چیست؟ What Is Next.js?

  • راه اندازی محیط Environment Setup

Next.js Fundamentals & Project Start Next.js Fundamentals & Project Start

  • پروژه جدید و ساختار پوشه New Project & Folder Structure

  • طرح‌بندی، صفحه اصلی و متادیتا Layout, Homepage & Metadata

  • مسیریابی مبتنی بر فایل File-Based Routing

  • سرور در مقابل مولفه های مشتری و قلاب های روتر Server vs Client Components & Router Hooks

  • در نوار ناوبری شروع کنید Start On The Navbar

  • پیوندهای نوار ناوبری، بازشوها و نمادهای واکنش Navbar Links, Dropdowns & React Icons

  • پیوندهای فعال و رندر شرطی Active Links & Conditional Rendering

  • اجزای صفحه اصلی Homepage Components

  • صفحه خواص Properties Page

  • اطلاعات دینامیک کارت ملک Property Card Dynamic Data

  • لیست املاک خانه Home Property Listings

  • سفارشی یافت نشد و بارگیری صفحات Custom Not Found & Loading Pages

پایگاه داده، API Routes & Property Components Database, API Routes & Property Components

  • ایجاد پایگاه داده MongoDB Create MongoDB Database

  • ایجاد پایگاه داده MongoDB Create MongoDB Database

  • قطب نما و وارد کردن داده های MongoDB MongoDB Compass & Importing Data

  • قطب نما و وارد کردن داده های MongoDB MongoDB Compass & Importing Data

  • اتصال به پایگاه داده و Mongoose Database Connection & Mongoose

  • اتصال به پایگاه داده و Mongoose Database Connection & Mongoose

  • اولین مسیر API شما Your First API Route

  • اولین مسیر API شما Your First API Route

  • املاک و مدل های کاربری Property & User Models

  • املاک و مدل های کاربری Property & User Models

  • واکشی داده با استفاده از مولفه سرور Fetch Data Using Server Component

  • واکشی داده با استفاده از مولفه سرور Fetch Data Using Server Component

  • فایل درخواست ها Requests File

  • فایل درخواست ها Requests File

  • واکشی ملک واحد Fetch Single Property

  • واکشی ملک واحد Fetch Single Property

  • صفحه ملک واحد Single Property Page

  • صفحه ملک واحد Single Property Page

  • جزء جزئیات ملک Property Details Component

  • جزء جزئیات ملک Property Details Component

  • جزء اسپینر Spinner Component

  • جزء اسپینر Spinner Component

تأیید بعدی، جلسات و ارائه‌دهنده Google Next Auth, Sessions & Google Provider

تأیید بعدی، جلسات و ارائه‌دهنده Google Next Auth, Sessions & Google Provider

  • راه اندازی Google OAuth Google OAuth Setup

  • راه اندازی Google OAuth Google OAuth Setup

  • تنظیم بعدی تأیید اعتبار و ارائه دهنده Next Auth & Provider Setup

  • تنظیم بعدی تأیید اعتبار و ارائه دهنده Next Auth & Provider Setup

  • بسته بندی ارائه دهنده جلسه Session Provider Wrapper

  • بسته بندی ارائه دهنده جلسه Session Provider Wrapper

  • دکمه ورود به سیستم Sign In Button

  • دکمه ورود به سیستم Sign In Button

  • ذخیره کاربر در پایگاه داده و جلسه Save User to Database & Session

  • ذخیره کاربر در پایگاه داده و جلسه Save User to Database & Session

  • تصویر نمایه Profile Image

  • تصویر نمایه Profile Image

  • خروج از سیستم و محافظت از مسیرها Sign Out & Protect Routes

  • خروج از سیستم و محافظت از مسیرها Sign Out & Protect Routes

ایجاد ویژگی ها و یکپارچه سازی ابری Create Properties & Cloudinary Integration

ایجاد ویژگی ها و یکپارچه سازی ابری Create Properties & Cloudinary Integration

  • فرم و وضعیت جزء را اضافه کنید Add Property Form & Component State

  • فرم و وضعیت جزء را اضافه کنید Add Property Form & Component State

  • کنترل کننده های ورودی فرم Form Input Handlers

  • کنترل کننده های ورودی فرم Form Input Handlers

  • Property POST API Route را اضافه کنید Add Property POST API Route

  • Property POST API Route را اضافه کنید Add Property POST API Route

  • دریافت کاربر و ارسال به پایگاه داده Get User & Submit To Database

  • دریافت کاربر و ارسال به پایگاه داده Get User & Submit To Database

  • آپلود تصویر ابری Cloudinary Image Upload

  • آپلود تصویر ابری Cloudinary Image Upload

  • نمایش تصویر خواص Property Image Display

  • نمایش تصویر خواص Property Image Display

نمایه و مدیریت خواص Profile & Manage Properties

نمایه و مدیریت خواص Profile & Manage Properties

  • نمایش اطلاعات نمایه کاربر User Profile Info Display

  • نمایش اطلاعات نمایه کاربر User Profile Info Display

  • لیست های پروفایل کاربر User Profile Listings

  • لیست های پروفایل کاربر User Profile Listings

  • حذف خواص Deleting Properties

  • حذف خواص Deleting Properties

  • اعلان های نان تست Toast Notifications

  • اعلان های نان تست Toast Notifications

  • ویرایش فرم املاک Edit Property Form

  • ویرایش فرم املاک Edit Property Form

  • مسیر PUT API را به‌روزرسانی کنید Update PUT API Route

  • مسیر PUT API را به‌روزرسانی کنید Update PUT API Route

نقشه، نشانک‌ها و اشتراک‌گذاری Map, Bookmarks & Sharing

نقشه، نشانک‌ها و اشتراک‌گذاری Map, Bookmarks & Sharing

  • ژئوکدینگ و نقشه باکس نقشه Geocoding & Mapbox Map

  • ژئوکدینگ و نقشه باکس نقشه Geocoding & Mapbox Map

  • رسیدگی به خطای ژئوکد Handle Geocode Error

  • رسیدگی به خطای ژئوکد Handle Geocode Error

  • پاکسازی صفحه ملک Property Page Cleanup

  • پاکسازی صفحه ملک Property Page Cleanup

  • نشانک مسیر API Bookmark API Route

  • نشانک مسیر API Bookmark API Route

  • درخواست دکمه نشانک Bookmark Button Request

  • درخواست دکمه نشانک Bookmark Button Request

  • وضعیت نشانک و تغییر دکمه Bookmark Status & Button Toggle

  • وضعیت نشانک و تغییر دکمه Bookmark Status & Button Toggle

  • صفحه ویژگی های ذخیره شده Saved Properties Page

  • صفحه ویژگی های ذخیره شده Saved Properties Page

  • دکمه های اشتراک گذاری Share Buttons

  • دکمه های اشتراک گذاری Share Buttons

جستجوی اموال Property Search

جستجوی اموال Property Search

  • جزء جستجوی اموال Property Search Component

  • جزء جستجوی اموال Property Search Component

  • جستجوی API Endpoint Search API Endpoint

  • جستجوی API Endpoint Search API Endpoint

  • واکشی نتایج از API Fetch Results From API

  • واکشی نتایج از API Fetch Results From API

  • نمایش نتایج جستجو Display Search Results

  • نمایش نتایج جستجو Display Search Results

سیستم پیام رسانی Messaging System

سیستم پیام رسانی Messaging System

  • مدل پیام و حالت فرم Message Model & Form State

  • مدل پیام و حالت فرم Message Model & Form State

  • ارسال پیام و مسیر API Message Submit & API Route

  • ارسال پیام و مسیر API Message Submit & API Route

  • برای فرم تماس نیاز به تأیید اعتبار Require Auth For Contact Form

  • برای فرم تماس نیاز به تأیید اعتبار Require Auth For Contact Form

  • واکشی پیام ها Fetch Messages

  • واکشی پیام ها Fetch Messages

  • نمایش پیام ها Display Messages

  • نمایش پیام ها Display Messages

  • به عنوان خوانده شده علامت بزن Mark As Read

  • به عنوان خوانده شده علامت بزن Mark As Read

  • پیام ها را حذف کنید Delete Messages

  • پیام ها را حذف کنید Delete Messages

  • ابتدا جدید را سفارش دهید Order New First

  • ابتدا جدید را سفارش دهید Order New First

  • نمایش تعداد پیام های جدید New Message Count Display

  • نمایش تعداد پیام های جدید New Message Count Display

  • زمینه جهانی برای پیام های خوانده نشده Global Context For Unread Messages

  • زمینه جهانی برای پیام های خوانده نشده Global Context For Unread Messages

صفحه بندی، ویژه، سبد و استقرار Pagination, Featured, Lightbox & Deploy

صفحه بندی، ویژه، سبد و استقرار Pagination, Featured, Lightbox & Deploy

  • Properties Client Component Refactor Properties Client Component Refactor

  • Properties Client Component Refactor Properties Client Component Refactor

  • پیاده سازی صفحه بندی Implement Pagination

  • پیاده سازی صفحه بندی Implement Pagination

  • جزء صفحه بندی Pagination Component

  • جزء صفحه بندی Pagination Component

  • Photoswipe Lightbox Photoswipe Lightbox

  • Photoswipe Lightbox Photoswipe Lightbox

  • واکشی ویژگی های ویژه Fetch Featured Properties

  • واکشی ویژگی های ویژه Fetch Featured Properties

  • جزء ویژگی های ویژه Featured Property Component

  • جزء ویژگی های ویژه Featured Property Component

  • استقرار در Vercel Deploy To Vercel

  • استقرار در Vercel Deploy To Vercel

نمایش نظرات

آموزش Next.js از ابتدا [ویدئو]
جزییات دوره
12 h 0 m
75
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

توسعه دهنده وب Full Stack و مدرس در Traversy Media