آموزش Next.js Dev to Deployment

Next.js Dev to Deployment

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Next.js را با ساختن یک وب سایت رویداد موسیقی بیاموزید ساختن یک برنامه رویداد موسیقی از ابتدا تا انتها آموزش اصول NextJS ایجاد یک پشتیبان با استفاده از Strapi CMS JWT Authentication/صفحه‌بندی HttpOnly Cookie Storage، جستجو، آپلود تصویر با Cloudinary ایجاد یک وبلاگ ثابت با صفحه‌بندی ، جستجو و دسته بندی ها با استفاده از Markdown گسترش به تولید با استفاده از Vercel پیش ها: جاوا اسکریپت مدرن اصول اولیه React

Next.js چارچوبی برای ساخت وب‌سایت‌های React ارائه‌شده در سمت سرور و همچنین وب‌سایت‌های استاتیک است. این یک دوره آموزشی پروژه محور برای یادگیری Next.js است. ما یک برنامه رویدادهای موسیقی خواهیم ساخت که به شما دانش اساسی را می دهد که برای ایجاد برنامه های کاربردی خود نیاز دارید. ما از Strapi (یک CMS بدون هد) به عنوان پشتیبان خود استفاده خواهیم کرد، اما شما می توانید به خوبی از هر چیزی

استفاده کنید

ما اصول Next.js را مانند...

یاد خواهیم گرفت
  • مسیریابی صفحات

  • روش‌های واکشی داده - getServerSideProps، getStaticProps، getStaticPaths

  • مسیرهای API سفارشی

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

  • سبک سازی CSS

  • بهینه سازی تصویر

در پروژه اصلی خود، با...

نیز کار خواهیم کرد
  • CMS Strapi

  • تأیید هویت با JWT (JSON Web Tokens)

  • مجوز و کنترل دسترسی

  • ذخیره کوکی های HttpOnly در سرور

  • صفحه بندی، فیلترهای جستجو و غیره

  • در حال آپلود تصویر با یکپارچه سازی Clodinary

  • استقرار در Vercel و Heroku

Next.js همچنین می تواند برای ایجاد "وب سایت های ثابت" استفاده شود. پروژه دوم یک وبلاگ ثابت به نام Devspace

است
  • ادغام TaiilwindCSS

  • واکشی/تولید داده استاتیک

  • ایجاد، واکشی تجزیه و تحلیل Markdown با Frontmatter

  • عملکرد جستجو با مسیر API/عملکرد بدون سرور

  • ذخیره سازی پست

  • Git Hooks with Husky

  • استقرار در Vercel

قبل از شرکت در این دوره چه چیزهایی باید بدانید؟

شما باید مبانی جاوا اسکریپت و ویژگی های جاوا اسکریپت مدرن مانند توابع پیکان، بازسازی، عملگر گسترش را بدانید

شما همچنین باید اصول React را بدانید. من چیزهایی مانند کامپوننت ها، لوازم جانبی، JSX

را توضیح نمی دهم


منابع:

همه کد نهایی در مخزن پروژه ارائه می شود و تمام منابع مورد نیاز در بخش ها ارائه می شود


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

معرفی Introduction

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

  • پیوندهای مخزن کد نهایی Final Code Repo Links

معرفی Introduction

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

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

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

  • بررسی اجمالی پروژه اصلی Main Project Overview

  • بررسی اجمالی پروژه اصلی Main Project Overview

  • محیط و ابزار Environment & Tools

  • محیط و ابزار Environment & Tools

  • پیوندهای مخزن کد نهایی Final Code Repo Links

Next.js Fundamentals Next.js Fundamentals

  • صفحات و مسیریابی Pages & Routing

  • لینک بعدی و روتر Next Link & Router

  • برچسب ها و طرح بندی سر Head Tags & Layout

  • نام مستعار ماژول با jsconfig Module Aliases With jsconfig

  • کامپوننت ویترین Showcase Component

Next.js Fundamentals Next.js Fundamentals

  • ایجاد یک برنامه Next.js Creating a Next.js App

  • ایجاد یک برنامه Next.js Creating a Next.js App

  • صفحات و مسیریابی Pages & Routing

  • لینک بعدی و روتر Next Link & Router

  • برچسب ها و طرح بندی سر Head Tags & Layout

  • سربرگ و پاورقی Header & Footer

  • سربرگ و پاورقی Header & Footer

  • صفحه سفارشی 404 Custom 404 Page

  • صفحه سفارشی 404 Custom 404 Page

  • نام مستعار ماژول با jsconfig Module Aliases With jsconfig

  • کامپوننت ویترین Showcase Component

واکشی داده ها Data Fetching

  • مسیرهای API API Routes

  • نمایش رویدادها DIsplaying Events

  • getStaticPaths getStaticPaths

واکشی داده ها Data Fetching

  • مسیرهای API API Routes

  • getServerSideProps و getStaticProps getServerSideProps & getStaticProps

  • getServerSideProps و getStaticProps getServerSideProps & getStaticProps

  • نمایش رویدادها DIsplaying Events

  • getStaticPaths getStaticPaths

  • صفحه رویداد واحد Single Event Page

  • صفحه رویداد واحد Single Event Page

Strapi Backend Strapi Backend

  • راه اندازی Strapi CMS Strapi CMS Setup

Strapi Backend Strapi Backend

  • راه اندازی Strapi CMS Strapi CMS Setup

  • ابری برای تصاویر Cloudinary For Images

  • ابری برای تصاویر Cloudinary For Images

  • نوع محتوای رویداد Event Content Type

  • نوع محتوای رویداد Event Content Type

عملکرد رویدادها - قسمت 1 Events Functionality - Part 1

  • اتصال به Strapi API Connecting to the Strapi API

  • جستجوی صفحه با استفاده از فیلترها Search Page Using Filters

  • کامپوننت جستجو Search Component

  • افزودن صفحه رویداد Add Event Page

  • Slug ایجاد کنید Create a Slug

عملکرد رویدادها - قسمت 1 Events Functionality - Part 1

  • اتصال به Strapi API Connecting to the Strapi API

  • جستجوی صفحه با استفاده از فیلترها Search Page Using Filters

  • افزودن صفحه رویداد Add Event Page

  • رویداد Submit & React Toastify Event Submit & React Toastify

  • رویداد Submit & React Toastify Event Submit & React Toastify

  • Slug ایجاد کنید Create a Slug

عملکرد رویدادها - قسمت 2 Events Functionality - Part 2

  • حذف رویدادها Delete Events

  • ویرایش پیش نمایش رویداد و تصویر Edit Event & Image Preview

عملکرد رویدادها - قسمت 2 Events Functionality - Part 2

  • حذف رویدادها Delete Events

  • ویرایش پیش نمایش رویداد و تصویر Edit Event & Image Preview

  • جزء معین Modal Component

  • جزء معین Modal Component

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

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

  • صفحه بندی رویدادها Events Pagination

  • صفحه بندی رویدادها Events Pagination

کوکی‌های احراز هویت، JWT و HttpOnly Authentication, JWT & HttpOnly Cookies

  • فرم های ثبت نام و ورود Register & Login Forms

  • زمینه تأیید اعتبار Auth Context

  • وارد شوید و JWT را دریافت کنید Login & Get JWT

  • خروج و نابود کردن کوکی Logout & Destroy Cookie

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

کوکی‌های احراز هویت، JWT و HttpOnly Authentication, JWT & HttpOnly Cookies

  • فرم های ثبت نام و ورود Register & Login Forms

  • زمینه تأیید اعتبار Auth Context

  • استراتژی JWT ما توضیح داده شد Our JWT Strategy Explained

  • استراتژی JWT ما توضیح داده شد Our JWT Strategy Explained

  • وارد شوید و JWT را دریافت کنید Login & Get JWT

  • ذخیره JWT در سرور HttpOnly Cookie Store JWT In Server HttpOnly Cookie

  • ذخیره JWT در سرور HttpOnly Cookie Store JWT In Server HttpOnly Cookie

  • ادامه کاربر وارد شده Persist Logged In User

  • ادامه کاربر وارد شده Persist Logged In User

  • خروج و نابود کردن کوکی Logout & Destroy Cookie

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

مجوز و دسترسی Authorization & Access

  • دریافت رویدادهای کاربر برای داشبورد Gettting User Events For Dashboard

  • نمایش رویدادهای داشبورد Display Dashboard Events

  • مرتبط کردن رویدادها با کاربران Associating Events With Users

  • ویرایش، حذف و آپلود تصویر تأیید شده Authenticated Edit, Delete & Image Upload

مجوز و دسترسی Authorization & Access

  • رویدادهای کاربر سفارشی نقطه پایانی Custom User Events Endpoint

  • رویدادهای کاربر سفارشی نقطه پایانی Custom User Events Endpoint

  • دریافت رویدادهای کاربر برای داشبورد Gettting User Events For Dashboard

  • نمایش رویدادهای داشبورد Display Dashboard Events

  • ایجاد خط مشی مالک است برای رویدادها Create Is Owner Policy For Events

  • ایجاد خط مشی مالک است برای رویدادها Create Is Owner Policy For Events

  • مرتبط کردن رویدادها با کاربران Associating Events With Users

  • ویرایش، حذف و آپلود تصویر تأیید شده Authenticated Edit, Delete & Image Upload

موارد اضافی و استقرار Extras & Deployment

  • Strapi Backend Deploy - Heroku Strapi Backend Deploy - Heroku

موارد اضافی و استقرار Extras & Deployment

  • نقشه را به صفحات رویداد اضافه کنید Add Map to Event Pages

  • نقشه را به صفحات رویداد اضافه کنید Add Map to Event Pages

  • Strapi Backend Deploy - Heroku Strapi Backend Deploy - Heroku

  • Next.js Deploy - Vercel Next.js Deploy - Vercel

  • Next.js Deploy - Vercel Next.js Deploy - Vercel

پروژه 2 - وبلاگ DevSpace Static Markdown Project 2 - DevSpace Static Markdown Blog

  • معرفی پروژه Project Intro

  • سبک سرصفحه و دم باد Header & Tailwind Styling

  • صفحه درباره و 404 About & 404 Page

پروژه 2 - وبلاگ DevSpace Static Markdown Project 2 - DevSpace Static Markdown Blog

  • معرفی پروژه Project Intro

  • مارک داون - چه و چرا؟ Markdown - What & Why?

  • مارک داون - چه و چرا؟ Markdown - What & Why?

  • دوره سقوط Markdown Markdown Crash Course

  • دوره سقوط Markdown Markdown Crash Course

  • لینک Repo پروژه Project Repo Link

  • لینک Repo پروژه Project Repo Link

  • راه اندازی Next.js و TailwindCSS Next.js & TailwindCSS Setup

  • راه اندازی Next.js و TailwindCSS Next.js & TailwindCSS Setup

  • مولفه طرح Layout Component

  • مولفه طرح Layout Component

  • سبک سرصفحه و دم باد Header & Tailwind Styling

  • صفحه درباره و 404 About & 404 Page

واکشی، تجزیه و نمایش پست‌های نشانه‌گذاری Fetch, Parse & Display Markdown Posts

  • فایل های علامت گذاری پست وبلاگ Blog Post Markdown Files

  • جزء برچسب دسته Category Label Component

  • ایجاد مسیرهای ثابت و داده های تک پستی Generate Static Paths & Single Post Data

واکشی، تجزیه و نمایش پست‌های نشانه‌گذاری Fetch, Parse & Display Markdown Posts

  • فایل های علامت گذاری پست وبلاگ Blog Post Markdown Files

  • دریافت پست ها و تجزیه و تحلیل Frontmatter Get Posts & Parse Frontmatter

  • دریافت پست ها و تجزیه و تحلیل Frontmatter Get Posts & Parse Frontmatter

  • نمایش پست ها Display Posts

  • نمایش پست ها Display Posts

  • مرتب سازی پست ها بر اساس تاریخ Sort Posts By Date

  • مرتب سازی پست ها بر اساس تاریخ Sort Posts By Date

  • جزء برچسب دسته Category Label Component

  • ایجاد مسیرهای ثابت و داده های تک پستی Generate Static Paths & Single Post Data

  • نمایش پست وبلاگ منفرد Display Single Blog Post

  • نمایش پست وبلاگ منفرد Display Single Blog Post

صفحه بندی و دسته بندی صفحات Pagination & Category Pages

  • شروع صفحه بندی - ایجاد مسیرها Start Pagination - Generate Paths

  • واکشی پست های صفحه بندی شده Fetch Paginated Posts

  • مؤلفه پیوندهای صفحه بندی Pagination Links Component

  • صفحات دسته بندی Category Pages

صفحه بندی و دسته بندی صفحات Pagination & Category Pages

  • شروع صفحه بندی - ایجاد مسیرها Start Pagination - Generate Paths

  • واکشی پست های صفحه بندی شده Fetch Paginated Posts

  • مؤلفه پیوندهای صفحه بندی Pagination Links Component

  • صفحات دسته بندی Category Pages

  • پاک کردن دریافت پست ها Clean Up Get Posts

  • پاک کردن دریافت پست ها Clean Up Get Posts

  • نوار کناری دسته Category Sidebar

  • نوار کناری دسته Category Sidebar

  • صادرات و محدودیت های بعدی Next Export & Limitations

  • صادرات و محدودیت های بعدی Next Export & Limitations

جستجو، ذخیره پست ها و استقرار Search, Caching Posts & Deployment

  • کامپوننت جستجو Search Component

  • اولین استقرار First Deployment

  • پست های کش Cache Posts

  • بسته شدن Wrap Up

جستجو، ذخیره پست ها و استقرار Search, Caching Posts & Deployment

  • جستجو چگونه کار خواهد کرد How Search Will Work

  • جستجو چگونه کار خواهد کرد How Search Will Work

  • کامپوننت جستجو Search Component

  • کامپوننت جستجو Search Component

  • جستجوی مسیر API Search API Route

  • جستجوی مسیر API Search API Route

  • اجزای نتایج جستجو Search Results Components

  • اجزای نتایج جستجو Search Results Components

  • اولین استقرار First Deployment

  • پست های کش Cache Posts

  • Pre-Commit Hook With Husky Pre-Commit Hook With Husky

  • Pre-Commit Hook With Husky Pre-Commit Hook With Husky

  • بسته شدن Wrap Up

نمایش نظرات

Udemy (یودمی)

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

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

آموزش Next.js Dev to Deployment
جزییات دوره
10 hours
79
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
9,613
4.6 از 5
دارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

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