آموزش جامع و عملی Next.js - توسعه وب با React - آخرین آپدیت

مقدمه Introduction

• مرور کلی دوره Course Overview

• Next.js چیست و مبانی توسعه وب What Is Next.js and Web Development Basics

• ضروریات توسعه وب برای مبتدیان چیست What Are the Essentials of Web Development for Beginners

• نکته‌ای کوتاه درباره خودآموزی Quick Note on Self-Learning

• React برای مبتدیان مطلق چیست What Is React for Complete Beginners

• Next.js دقیقاً چیست و کاربردهای پایه آن What Is Next.js Exactly and Its Usefulness Basics

• وب‌سایت‌ها و HTML چگونه کار می‌کنند (برای مبتدیان) How Websites and HTML Work for Complete Beginners

ساخت یک وب‌سایت ساده از صفر Build a Basic Website from Scratch

• ویرایشگر متن چیست و نحوه نصب VS Code What Is a Text Editor and How to Get VSC

• استقرار اولین وب‌سایت با HTML و JS کلاسیک Deploy Your First Website with Old-School HTML and JS for Complete Beginners

• دستکاری DOM با مبانی جاوا اسکریپت وب Manipulate the DOM with JavaScript Web Basics

• برنامه‌نویسی امری در مقابل Declarative و توسعه وب Imperative Versus Declarative Programming and Web Development

ساخت یک پروژه React از صفر Build a React Project from Scratch

• تبدیل دستی کد وب‌سایت به اپلیکیشن React Convert Website Code to a React App Manually with Src Pointing

• آشنایی با Babel و JSX Introduction to Babel and JSX

ضروریات جاوا اسکریپت برای تسلط بر React JavaScript Essentials for Mastering React

• دانلود Node.js و معرفی Node.js Download Node.js and What Is Node.js

• راه اندازی محیط یادگیری Setting Up Our Learning Environment

• توابع در جاوا اسکریپت چیستند What Are Functions in JavaScript

• مثال نحوه عملکرد توابع در جاوا اسکریپت برای مبتدیان Example of How Functions Work in JavaScript for Complete Beginners

• Function Expressions در جاوا اسکریپت چیستند What Are Function Expressions in JavaScript

• ترفندهای سوالات مصاحبه جاوا اسکریپت با Function Expressions JavaScript Interview Question Trick with Function Expressions and Utility Fun

• Function Hoisting در جاوا اسکریپت چیست What Is Function Hoisting in JavaScript

• نحوه عملکرد Scope در جاوا اسکریپت How Scope Works in JavaScript

• Closure چیست و مثال کاربردی در جاوا اسکریپت What Are Closures and an Example with JavaScript Explained

• الگوی پیشرفته Closure Module برای کپسوله‌سازی داده‌ها Advanced Closure Module Pattern with Data Privacy Encapsulation

• Arrow Functions چیستند و کاربردشان در React What Are Arrows Functions and Usefulness in React

• Destructuring در جاوا اسکریپت Destructuring with JavaScript

کدنویسی عملی React از صفر – یادگیری گام‌به‌گام React React Code Along from Scratch – Step-by-Step Learning React

• نحوه نوشتن کامپوننت‌ها در React How to Write Components in React

• ساختار درخت کامپوننت‌ها و کامپوننت‌های تو در تو How the Component Tree Structure in React Works and Nested Components

• نحوه عملکرد Props در React How Props Work in React

• رندر کردن لیست‌ها با استفاده از Map در React Mapping Through Lists in React

• React Hooks و State در React چیستند What Are React Hooks and State in React

آشنایی با Next.js برای توسعه حرفه‌ای Introduction to Next.js for Professional Development

• مهاجرت از React به Next.js Migrating from React to Next.js

مفاهیم پیشرفته و هسته Next.js Higher-Level Next.js Core Concepts

• محیط توسعه و تفاوت Build توسعه در مقابل Production Development Environment and Build Versus Production Build with Next.js

• آشنایی با کامپایلر Next.js Introduction to the Next.js Compiler

• رمزگشایی از مفهوم «کامپایلر» در Next.js Demystifying What Is Meant by Next.js 'Compiler'

• Minification در Next.js چیست What Is Minification in Next.js

• Bundling در Next.js چیست What Is Bundling in Next.js

• Code Splitting در Next.js چیست What Is Code Splitting in Next.js

• مبانی Build Time در مقابل Run Time Build-Time Versus Run-Time Basics

• مفهوم کلاینت و سرور در اپلیکیشن‌های وب What Is the Client and What Is the Server in Web Applications - Basics

• رندرینگ (Rendering) در Next.js چیست What Is Rendering in Next.js

• پیش‌رندرینگ (Pre Rendering) در Next.js چیست What Is Pre-Rendering in Next.js

• رندرینگ سمت کلاینت (CSR) در Next.js What Is CSR, Client-Side Rendering with Next.js

• بررسی عمیق نحوه عملکرد رندرینگ سمت سرور (SSR) How Server-Side Rendering Works as a Deeper Dive

• SSG در Next.js چیست What Is SSG in Next.js

• CDNها و Edge در Next.js و Vercel چیستند What Are CDNs and the Edge in Next.js and Vercel

بوت‌کمپ ساخت اپلیکیشن Next.js از صفر – از مبتدی تا حرفه‌ای Build a Next.js App from Scratch Bootcamp Code-Along - Zero to Hero

• مقدمه و نکاتی درباره پروژه نهایی Introduction and Quick Note about the Upcoming Final Project

• نحوه اجرای قالب Next.js به صورت محلی How to Start a Next.js Template Locally

• مرور ساختار فایل‌های قالب Next.js Next.js Template File Structure Overview

• صفحات (Pages) در Next.js چگونه کار می‌کنند How Pages Work in Next.js

• Prefetching و Code Splitting با Link و ناوبری سمت کلاینت Prefetching and Codesplitting with Link And CSN – Client-Side Navigation in N

کار با متادیتا و دارایی‌ها در Next.js Working with Metadata and Assets in Next.js

• دانلود پروژه Starter Kit سی‌اس‌اس رسمی Next.js Download the CSS Starter Kit Project from Next.js Official

• نحوه بهینه‌سازی تصاویر در Next.js How Images Optimize with Next.js

• اسکریپت‌ها، داده‌های هدر و Props در Next.js Scripts and Header Data and Props with Next.js

• CSS Modules و بهینه‌سازی‌های Layout در Next.js CSS Modules and Next.js Optimizations with Layout

• استایل‌دهی سراسری (Global Styling) در Next.js Global Styling with Next.js

• سفارشی‌سازی استایل‌های Utility در Next.js Customizing Utility Styles with Next.js

• متادیتا برای SEO و شبکه‌های اجتماعی در Next.js Metadata for SEO and Social Media with Next.js

• نوشتن کامپوننت‌های Layout پویا در Next.js Writing Dynamic Layout Components with Next.js

• نحوه استفاده از Children و Props در React و Next.js How to Use Children and Props in React and Next.js

پیش‌رندرینگ و دریافت داده‌ها در Next.js Pre-Rendering and Data Fetching with Next.js

• تست‌های پیش‌رندرینگ در Next.js Pre-Rendering Tests with Next.js

• تفاوت Static Generation در مقابل Server Side Rendering What Is Static Generation Versus Server-Side Rendering with Next.js

• تولید استاتیک همراه با داده در Next.js Static Generation with Data in Next.js

• الگوریتم‌های پایه برای تمرین Next.js و پردازش داده‌ها Concise Basic Algorithms for Next.js Practice and Data Processing

• تولید استاتیک و GetStaticProps در Next.js Static Generation and GetStaticProps with Next.js

• چه زمانی از GetStaticPropsServer استفاده کنیم When to Use GetStaticPropsServer with Next.js

• مقایسه SSR در مقابل CSR و GetServerSideProps SSR Versus CSR and GetServerSideProps with Next.js

مسیریابی‌های پویا با Next.js Dynamic Routes with Next.js

• نحوه ایجاد مسیرهای پویا (Dynamic Routes) در Next.js How to Create Dynamic Routes with Next.js

• پیاده‌سازی getStaticPaths در Next.js getStaticPaths with Next.js Implementation

• تسلط بر رندرینگ استاتیک پویا در Next.js Mastering Dynamic Static Rendering with Next.js

• رندر کردن Markdown و آسیب‌پذیری‌های امنیتی HTML تزریقی Rendering Markdown and Security Vulnerabilities with Injected HTML

• بهبود و نهایی‌سازی صفحات پست‌های پویا Polishing the Dynamic Post Pages

• بهبود کامپوننت Next.js با استایل‌دهی Polishing a Next.js Component with Styling

• دریافت داده‌ها، کوئری دیتابیس و ISR در Next.js Fetching Data and Database Querying Plus ISR with Next.js

• مسیرهای API در Next.js API Routes with Next.js

نحوه استقرار (Deploy) اپلیکیشن Next.js از صفر How to Deploy a Next.js Application from Scratch

• گیت‌هاب چیست و چگونه شروع کنیم What Is GitHub and How to Get Started with It

• نحوه Push کردن اپلیکیشن Next.js به گیت‌هاب How to Push Your Next.js App to GitHub

• استقرار اپلیکیشن در Vercel و ثبت تغییرات با گیت‌هاب Deploy Your App to Vercel and Commit Changes with GitHub

• ساخت ویژگی‌ها در شاخه‌های مختلف (Multi-branch) در گیت‌هاب Real-World Multi-Branch Feature Building on GitHub with React

• Pull Requests و ادغام کدها و استقرار خودکار در Vercel Pull Requests and Merging Code Reviews with GitHub Automatic Vercel Deployment