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

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

مقدمه Introduction

• Next.js دقیقاً چیست و کاربردهای پایه آن کدام است؟ What is Next.js exactly and its usefulness basics?

• نکاتی کوتاه درباره خودآموزی Quick note on self-learning

• آشنایی با Next.js و مبانی توسعه وب What is Next.js and web development basics

• React برای افراد کاملاً مبتدی چیست؟ What is React for complete beginners?

• ضروریات توسعه وب برای مبتدیان چیست؟ What are the essentials of web development for beginners?

• مروری بر سرفصل‌های دوره Course overview

• نحوه عملکرد وب‌سایت‌ها و HTML برای مبتدیان How websites and HTML work for complete beginners

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

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

• استقرار اولین وب‌سایت با HTML و JS قدیمی برای مبتدیان Deploy your first website with old-school HTML and JS for complete beginners

• برنامه‌نویسی امری در مقابل Declarative و توسعه وب Imperative versus declarative programming and web development

• ویرایشگر متن چیست و چگونه VSC را نصب کنیم؟ What is a text editor and how to get VSC?

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

• تبدیل دستی کد وب‌سایت به اپلیکیشن React با اشاره به src Convert website code to a React app manually with src pointing

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

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

• Arrow Functions چیست و چه کاربردی در React دارد؟ What are arrow functions and usefulness in React?

• راه‌اندازی محیط یادگیری Setting up our learning environment

• Function Expressions در جاوااسکریپت چیست؟ What are function expressions in JavaScript?

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

• Closure چیست؟ توضیح همراه با مثال در جاوااسکریپت What are closures and an example with JavaScript explained?

• توابع در جاوااسکریپت چیستند؟ What are functions in JavaScript?

• الگوی پیشرفته Module Closure با کپسوله‌سازی حریم خصوصی داده‌ها Advanced closure module pattern with data privacy encapsulation

• Function Hoisting در جاوااسکریپت چیست؟ What is function hoisting in JavaScript?

• ترفندهای سوالات مصاحبه جاوااسکریپت با Function Expressions JavaScript interview question trick with function expressions and utility fun

• دانلود Node.js و آشنایی با ماهیت آن Download Node.js and what is Node.js?

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

• مثال عملی نحوه عملکرد توابع در جاوااسکریپت برای مبتدیان Example of how functions work in JavaScript for complete beginners

4. آموزش گام به گام کدنویسی React از صفر 4. React Code Along from Scratch: Step-by-Step Learning React

• نحوه عملکرد ساختار درخت کامپوننت‌ها و کامپوننت‌های تو در تو در React How the component tree structure in React works and nested components

• مپ کردن (Mapping) لیست‌ها در React Mapping through lists in React

• React Hooks و State در React چیستند؟ What are React hooks and state in React?

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

• چگونه در React کامپوننت بنویسیم؟ How to write components in React

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

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

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

• Bundling در Next.js چیست؟ What is bundling in Next.js?

• مبانی زمان ساخت (Build time) در مقابل زمان اجرا (Run time) Build-time versus run-time basics

• Code Splitting در Next.js چیست؟ What is code splitting in Next.js?

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

• رندرینگ در Next.js چیست؟ What is rendering in Next.js?

• SSG در Next.js چیست؟ What is SSG in Next.js?

• شفاف‌سازی مفهوم «کامپایلر» در Next.js Demystifying what is meant by Next.js 'compiler'

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

• Minification در Next.js چیست؟ What is minification in Next.js?

• کلاینت و سرور در اپلیکیشن‌های وب چیستند؟ مبانی What is the client and what is the server in web applications? The basics

• بررسی عمیق نحوه عملکرد Server Side Rendering How server-side rendering works as a deeper dive

• CSR یا رندرینگ سمت کلاینت در Next.js چیست؟ What is CSR, client-side rendering with Next.js?

• محیط توسعه در مقابل بیلد تولید (Production Build) در Next.js Development environment and build versus production build with Next.js

• Pre-rendering در Next.js چیست؟ What is pre-rendering in Next.js?

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

• مقدمه و نکات کوتاه درباره پروژه نهایی پیش رو Introduction and quick note about the upcoming final project

• مروری بر ساختار فایل‌های قالب Next.js Next.js template file structure overview

• نحوه عملکرد صفحات (Pages) در Next.js How pages work in Next.js

• پیش‌خوانی (Prefetching) و Code Splitting با Link و CSN در Next.js Prefetching and codesplitting with Link and CSN – client-side navigation in Next.js

• چگونه یک قالب Next.js را به صورت محلی اجرا کنیم؟ How to start a Next.js template locally

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

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

• بهینه‌سازی تصاویر در Next.js How images optimize with Next.js

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

• ماژول‌های CSS و بهینه‌سازی‌های Next.js با Layout CSS modules and Next.js optimizations with layout

• دانلود پروژه Starter Kit سی‌اس‌اس از سایت رسمی Next.js Download the CSS starter kit project from Next.js official

• متادیتا برای سئو و شبکه‌های اجتماعی در Next.js Metadata for SEO and social media with Next.js

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

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

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

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

• تولید استاتیک با داده‌ها در Next.js Static generation with data in Next.js

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

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

• الگوریتم‌های پایه و مختصر برای تمرین Next.js و پردازش داده‌ها Concise basic algorithms for Next.js practice and data processing

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

• تفاوت تولید استاتیک در مقابل رندرینگ سمت سرور در Next.js چیست؟ What is static generation versus server-side rendering with Next.js?

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

10. مسیرهای پویا (Dynamic Routes) در Next.js 10. Dynamic Routes 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

• چگونه در Next.js مسیرهای پویا ایجاد کنیم؟ How to create dynamic routes with Next.js

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

• تسلط بر رندرینگ استاتیک پویا در Next.js Mastering dynamic static rendering with Next.js

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

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

• گیت‌هاب چیست و چگونه کار با آن را شروع کنیم؟ What is GitHub and how to get started with it?

• ساخت قابلیت‌ها در شاخه‌های مختلف (Multi-branch) در دنیای واقعی با React و GitHub Real-world multi-branch feature building on GitHub with React

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

• استقرار اپلیکیشن در Vercel و ثبت تغییرات با گیت‌هاب Deploy your app to Vercel and commit changes with GitHub

• Pull Requestها، ادغام کدها و استقرار خودکار Vercel با گیت‌هاب Pull requests and merging code reviews with GitHub automatic Vercel deployment