کدنویسی کامل Next.js 2022

برنامه های کاربردی وب سرور و کلاسیک با آخرین بعدی JS و React
درک مفاهیم وب را به وضوح با ایجاد برنامه های دنیای واقعی
ایجاد SEO (بهینه سازی موتور جستجو) و برنامه های کاربردی دوستانه ایزومورفیک
خود را در زمینه های بعدی هیجان انگیز ایجاد کنید و محیط توسعه وب را واکنش نشان دهید

عنوان اصلی : ZerotoMastery - Complete Next.js Developer in 2022 Zero to Mastery

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

برنامه‌نویس Next.js را در سال 2022 تکمیل کنید: صفر تا تسلط
طرح کلی دوره Next.js
نمای کلی بخش
Next.js چیست؟
مزایای Next.js و تکنیک های مختلف رندرینگ
عملکرد با Next.js
جزء تصویر در Next.js
مسیریابی و سئو مبتنی بر فایل
توابع بدون سرور در Next.js
Next.js در مقابل ایجاد برنامه React
نمای کلی پروژه: چه چیزی می سازیم؟
ایجاد برنامه Next.js: Zero Config
چگونه نسخه Next.js خود را ارتقا دهیم
بررسی پروژه راه اندازی Next.js راه حل
_app.js با پاورقی
Fast Refresh چیست؟
ماژول های CSS چیست؟
بیایید برای صفحه اصلی آماده شویم
پس‌زمینه برنامه
جزء بنر
طراحی اولین موبایل و طراحی اجزای بنر
Next.js Head Component
مسیریابی در Next.js
برای صفحه کافی استور مسیریابی اضافه کنید
مسیریابی پویا چیست؟
با استفاده از مؤلفه پیوند، مسیر را اضافه کنید
با مؤلفه پیوند مسیرها را به صفحات پویا اضافه کنید
راه حل: مسیریابی
به صفحه اصلی ما سبک دهید
Hero Image Generator
جزء قهرمان را اضافه کنید
جزء تصویر Next.js
تصویر قهرمان در صفحه اصلی
فونت ها را در Next.js تنظیم کنید
فونت ها را در صفحه بارگیری کنید
سند در Next.js
اعمال فونت در Document
SEO چیست؟
پیش رندر در Next.js
برنامه Plain React در مقابل Next.js
تکنیک های مختلف رندر در Next.js
چگونه پیش‌رندر به عملکرد کمک می‌کند
Static Site Generation (SSG) در Next.js
بازسازی استاتیک افزایشی (ISG) در Next.js
ارائه سرور (SSR) در Next.js
پردازش سمت مشتری (CSR) در Next.js
معماری اجزای پروژه
ساختار اجزای کارت
طراحی اجزای کارت
طرح شبکه برای مؤلفه کارت
افزودن فروشگاه های قهوه به صفحه
Next.js: next.config.js از Unsplash Image استفاده کنید
چه چیزی را در برنامه Coffee Connoisseur از قبل رندر کنیم
پیش رندر پیش فرض در Next.js
اجرای تولید سایت استاتیک (SSG)
ویژگی های Get Static Props در Next.js
سرفصل فروشگاه های قهوه
در Next.js مسیرهای ثابت را دریافت کنید
ویژگی های Get Static Paths در Next.js
Get Static Props و Get Static Paths را در Next.js پیاده سازی کنید
بازگشت در Next.js
بازگشت: نادرست با صفحه 404
بازگشت: درست است
صفحه فروشگاه قهوه Refactor
طراحی صفحه کافی استور
طراحی صفحه کافی استور (ادامه دارد)
حساب Foursquare را راه اندازی کنید
Foursquare Places API Playground
Foursquare Places API
API Foursquare Places را کاوش کنید
Foursquare API در Get Static Props
در انتظار واکشی Async API
کتابخانه فروشگاه های قهوه
متغیرهای محیطی در Next.js
Foursquare API را در Get Static Paths به‌روزرسانی کنید
داده‌های کتابخانه فروشگاه قهوه را به‌روزرسانی کنید
راه اندازی Unsplash API
Invoke Unsplash API برای تصاویر فروشگاه قهوه
کتابخانه قهوه‌فروشی را با تصاویر به‌روزرسانی کنید
نمایش تصاویر قهوه‌فروشی در کارت
داده‌های صفحه قهوه‌فروشی فردی
استایلینگ را برای برنامه به‌روزرسانی کنید
نمای کلی بخش
اسناد API مکان جغرافیایی
استفاده از React Hooks
React Hook را برای بازیابی موقعیت کاربر ایجاد کنید
از قلاب برای بازیابی موقعیت کاربر استفاده کنید
فروشگاه های قهوه رندر سمت مشتری (CSR).
نمایش فروشگاه های قهوه بر اساس مکان در صفحه
بازخوانی مسیر پویا (غیر ایستا)
بازگشت در Next.js
از React Context و چرا از Context استفاده کنیم؟
ایجاد زمینه فروشگاه
کاهنده فروشگاه در زمینه ایجاد کنید
فروشگاه‌های قهوه‌فروشی در زمینه فروشگاه
صفحه فروشگاه قهوه با زمینه
برنامه کافی استور Refactor
API چیست؟
توابع بدون سرور چیست؟
مسیریابی API با Next.js
مسیر Hello World API
همه مسیرها را در Next.js بگیرید
یک عملکرد بدون سرور برای به دست آوردن قهوه‌فروشی‌ها ایجاد کنید
عملکرد بدون سرور فراخوانی: فروشگاه های قهوه را دریافت کنید
توابع بدون سرور در Get Static Props
معماری پروژه
Airtable چیست؟
راه اندازی Airtable
معماری API: صفحه فروشگاه قهوه
کتابخانه Airtable
Basic Coffee Store API / عملکرد بدون سرور
طراحی API: فروشگاه قهوه ایجاد کنید
Find Coffee Store API
تغییر داده‌های فروشگاه قهوه
Airtable Docs: Coffee Store ایجاد کنید
Airtable Docs: Create Coffee Store (ادامه)
مدیریت خطای API
Refactor Create Coffee Store API
معماری API: فراخوانی API در صفحه فروشگاه قهوه
پس از پیمایش کاربر، API فروشگاه قهوه را فراخوانی کنید
برای مسیری که به صورت ایستا تولید می شود، فروشگاه قهوه ایجاد کنید
طراحی SWR
طراحی ویژگی رأی گیری
Coffee Store By Id API
قهوه‌فروشی با اعتبارسنجی API Id
Refactor Coffee Store By Id API
SWR چیست؟ (حالت در حین اعتبار سنجی مجدد)
SWR Docs Fetch API
از SWR در صفحه فروشگاه قهوه استفاده کنید
طراحی API: فروشگاه قهوه مورد علاقه توسط Id API
Airtable Docs: Favorite Coffee Store By Id API
فروشگاه قهوه مورد علاقه توسط Id API را با Airtable پیاده سازی کنید
قهوه‌فروشی مورد علاقه توسط Id API
قهوه‌فروشی مورد علاقه توسط Id API 2
قهوه‌فروشی مورد علاقه توسط Id API 3
قهوه‌فروشی مورد علاقه توسط Id API 4
نسخه ی نمایشی برنامه
نمایش نهایی Airtable
Refactor and Cleanup
استقرار چیست؟
اجرای برنامه بعدی بیلد
برنامه Cloud Ready
راه اندازی مخزن Github
یک مخزن Github ایجاد کنید و کد خود را فشار دهید
استقرار در Vercel
مروری بر داشبورد Vercel
فایل های ساخت Vercel Production
Netlify چیست؟
Netlify Deployment
تغییرات پیکربندی Netlify Deployment
اجرای فانوس دریایی
گزارش عملکرد و سئوی فانوس دریایی
نمای کلی پروژه
راه اندازی پروژه اصلی ما
تنظیم فونت
افزودن قلم به _Document
طراحی جهانی برنامه
معماری اجزای نتفلیکس
جزء بنر
ساختار اجزای بنر
دکمه مؤلفه بنر با فونت
نمادها با فونت های Google
ساختار مؤلفه NavBar
طراحی مولفه NavBar
NavBar Router
Dropdown NavBar
نمادهای نشان‌واره نوار نوار
معماری اجزای کارت
ساختار اجزای کارت
اندازه مؤلفه کارت
مدیریت خطای مؤلفه کارت
خطای تصویر مؤلفه کارت
حرکت Framer با کارت
حرکت Framer را با کارت پیاده سازی کنید
معماری کارت های بخش
ساختار کارت های بخش
طراحی کارت های بخش
ویژگی مقیاس گذاری کارت
مؤلفه کارتهای بخش Refactor
نمایش کلی API YouTube
از کدام API Youtube استفاده کنیم؟
API جستجوی Youtube را پیاده سازی کنید
اجرای API جستجوی YouTube (ادامه دارد)
تکنیک واکشی داده ها: رندر سمت سرور
قوانین ارائه سرور (SSR) در Next.js
اجرای رندر سمت سرور (SSR) برای واکشی ویدیوها
Youtube API: پروژه کنسول گوگل
Invoke Youtube API
بخش‌های بیشتری را برای ویدیوها پیاده‌سازی کنید
مدیریت خطا برای کتابخانه ویدیو
اسناد API ویدیوهای محبوب
ویدئوهای محبوب را اجرا کنید
نمای کلی بخش
احراز هویت بدون رمز چیست؟
نمای کلی صفحه ورود به سیستم
تنظیم صفحه ورود به سیستم
جزء سرصفحه ورود به سیستم
ساختار صفحه ورود به سیستم
سبک صفحه ورود به سیستم
تأیید فرم ورود به سیستم
مسیریابی ورود به داشبورد
Magic Links چیست؟
حساب جادویی را راه اندازی کنید
Magic را در برنامه نصب کنید
کلیدهای Magic API
Magic SDK (ادامه دارد)
Magic Docs برای ورود به سیستم
اجرای جادو
ذخیره سازی و مسیریابی مجیک SDK
حالت بارگیری جادویی
تاخیر مسیریابی با ورود به سیستم
نام کاربری در نوار نوار
خروج یک کاربر
مسیر برنامه پس از ورود به سیستم
مسیریابی فلیکر با ورود به سیستم
در حال بارگیری مؤلفه
معماری پروژه
چه می سازیم و مسیر صفحه شناسه ویدیو
ایجاد مسیر پویا: صفحه شناسه ویدیو
صفحه پویا را به مسیریابی مؤلفه کارت پیوند دهید
مؤلفه پیوند را وصل کنید
مؤلفه بنر را وصل کنید
React Modal Docs
React Modal Component را نصب کنید
سبک های مؤلفه معین
YouTube API Player & Docs را پیاده سازی کنید
طراحی YouTube Player
ساختار جزء معین
استایل مودال
از کدام تکنیک های واکشی داده ها استفاده کنیم؟
بازسازی استاتیک افزایشی چیست؟
بازآفرینی افزایشی استاتیک
ISR (بازسازی استاتیک افزایشی) نسخه نمایشی و مراحل بعدی
اسناد بازسازی استاتیک افزایشی (ISR).
اجرای بازسازی استاتیکی افزایشی (ISR)
بازسازی استاتیک افزایشی با اسناد YouTube API
نمودار معماری
YouTube API با شناسه
اصلاح مسیر مؤلفه پیوند
پارام های پرس و جو ISR
مؤلفه Navbar
محدودیت سهمیه YouTube: داده‌های آزمایشی
نمای کلی بخش
چرا GraphQL؟
GraphQL چیست؟
نمونه GraphQL
جستجوی GQL در مقابل جهش
مقدمه ای برای React.js
برنامه React را ایجاد کنید
ساختار پوشه برنامه React
React Fundamentals
React Fundamentals 2
Class vs Functional App.js
قلاب ها در مقابل کلاس ها
اولین مؤلفه React شما
ساخت برنامه React 1
ساخت یک React App 2
ساخت یک React App 3
استایل دادن به برنامه React خود
ساخت اپلیکیشن React 4
ساخت اپلیکیشن React 5
ساخت اپلیکیشن React 6
پروژه های خود را به روز نگه دارید
راه حل: React 17
React Review
مرز خطا در React
استقرار برنامه React ما
React Hooks
React Hooks 2
React Hooks 3
React Hooks 4
React Hooks 5
React Hooks 6
React Hooks 7
React Hooks 8
React Hooks 9