آموزش دوره جامع React و NextJS به همراه پروژه‌های مبتنی بر هوش مصنوعی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه‌ای بر دوره Introduction to the course.

• فایل‌های کد برای دانلود Code files to download

شروع کار با React Get started with react

• React چیست و چرا باید از آن استفاده کنیم؟ What is react and why to use it ?

• بررسی نسخه‌های React و مستندات Whats with version of react and react docs

• نیاز به باندلر: معرفی Vite We need a bundler - Vite

• اولین اپلیکیشن React در مرورگر Your first react app in browser

• استفاده از React در ویرایشگرهای آنلاین React in online code editors

• بررسی دقیق هر فایل در React (به‌روز شده) Understand every file in react (updated)

• انتخاب مسیر یادگیری در دوره React Pick your path for react course

• دستور Build در React Build command in react

• بردن اپلیکیشن React به محیط عملیاتی (Production) Take your react application to production

اکوسیستم کامپوننت‌های React Component ecosystem of react

• پیکربندی Tailwind در اپلیکیشن React Configure tailwind in react application

• ساخت کارت با Tailwind Building card with tailwind

• Props در React چیستند؟ What are props in react

• ساخت اولین کامپوننت شما Building your first component

• کامپوننت‌های سفارشی با Props Custom components with props

• توسعه سریع‌تر با کامپوننت‌های Tailwind Building faster with tailwind components

• مروری بر کامپوننت‌های Shadcn و نصب آن Overview of Shadcn components and setup

• آمادگی برای پروژه‌های پیش رو Project ahead - Get ready

اولین پروژه React با مدیریت State Your first react project with state

• مقدمه پروژه شمارنده به همراه فرم‌ها Introduction to counter project with forms

• محیط اجرای جاوا اسکریپت: Node و Bun برای React Javascript run time - Node and Bun for react

• نوشتن المان‌های HTML و فرم‌ها در React Writing HTML elements and forms in react

• پشت صحنه State در React Behind the scene of react state

• هوک‌ها در React چیستند؟ What are hooks in react

• بررسی عمیق هوک useState Going in depth of useState hook

• مدیریت فرم‌ها در React Handling form in react

پروژه سیستم مدیریت صف Queue Management System Project

• بررسی کلی پروژه مدیریت صف Queue Management project walkthrough

• برنامه‌ریزی جریان کاری اپلیکیشن Planning the application workflow

• یادگیری جریان داده در کامپوننت‌های React Learn the data flow in components in react

• مدیریت فرم و ارسال داده به کامپوننت والد Handle form and pass data to parent

• مروری بر متدهای map و filter در جاوا اسکریپت A little trip to map and filter in javascript

• درک رندرینگ شرطی (Conditional Rendering) در React Understand Conditional rendering in react

• دیباگ کردن در کامپوننت‌های متعدد Debugging in multi components

مفاهیم پیشرفته Props و کامپوننت‌ها Advance Props and components

• انواع مختلف Props و Context Different types of props and Context

• راه‌اندازی اپلیکیشن Vite برای کار با Props Setting up vite app for props in react

• طراحی انواع دکمه‌ها با استفاده از Props Design button variations with props

• استفاده از children prop در React Children props in react

• کار با Props پیچیده و داده‌های ترکیبی Complex prop with complex data in react

• بررسی useRef و forwardRef در React useRef and forwardRef in react

• معرفی Context API و مشکل Prop Drilling Context API and prop drilling

• ساخت اولین Provider برای Context API Create your first context api provider

• ساخت اولین هوک سفارشی (Custom Hook) Create your first custom hook

• استفاده از Context در چندین کامپوننت Using context in multiple components

هوک‌های سفارشی (Custom Hooks) Custom Hooks

• راه‌اندازی اپلیکیشن برای هوک‌های سفارشی Setting up application for custom hooks

• طراحی کامپوننت‌ها برای سبد خرید Designing components for shopping cart

• هوک useEffect برای مصاحبه‌های شغلی useEffect hook for interviews

• همگام‌سازی داده‌ها در تب‌های مختلف Sync across the tabs

• مدیریت عملیات سبد خرید Handling cart operations

• تکمیل ویژگی‌های هوک سفارشی Finish up with custom hook features

• دیباگ کردن اپلیکیشن و تحلیل روند تفکر Debugging the application - Thought process

مدیریت استیت با Zustand State Management - Zustand

• کتابخانه‌های مدیریت استیت (State Management) State Management libraries

• ساخت اولین Store در Zustand Create your first store in Zustand

• اشتراک در داده‌های مورد نیاز (Selective Subscription) Subscribe only to what you need

• یک Store با چندین Slice One store with multiple slices

• اکشن‌های Async برای فراخوانی API Async actions for API calls

بخش Git و Github (بخش تکمیلی) Git and Github Section - Add on Section

• مقدمه سری آموزشی GIT Introduction to GIT series

• دستور git init و پوشه‌های مخفی Git init and hidden folder

• کامیت‌ها و لاگ‌ها در Git Git commits and logs

• عملکرد داخلی و تنظیمات Git Git internal working and configs

• ادغام (Merge) و تداخلات (Conflicts) در Git Git merge and git conflicts

• بررسی تفاوت‌ها (Diff) و استفاده از Stashing Git Diff and stashing

• ترس‌زدایی از دستور Git Rebase Git rebase is not that scary

• راهنمای ارسال کد به Github (Push) Insight of pushing code to github

• نحوه ایجاد Pull Request و مشارکت در پروژه‌های Open Source How to make Pull Request and Open Source contribution

مرور سریع JavaScript (بخش تکمیلی) JS Refresher - Add on

• داستان جاوا اسکریپت: از کنسول تا موتور V8 Javascript story - from console to v8 engine

• نحوه اجرای کد در جاوا اسکریپت (پشت صحنه) How javascript executes the code - Behind the scene

• انواع داده‌ها، متغیرها و ثابت‌ها در JS Datatypes, variables and constants in Javascript

• عملیات‌ها در جاوا اسکریپت Operations in javascript

• انواع داده‌های Primitive Primitives in javascript

• انواع داده‌های Non-Primitive Non Primitives in javascript

• پنج چالش در مورد دستورات شرطی Five challenges on conditions in javascript

• ده چالش در مورد آرایه‌ها و متدهای آن‌ها Facing ten challenges in Array and methods

• مقدمه‌ای بر حلقه‌ها (Loops) در JS Introduction to loops in javascript

• حل ۶ چالش مربوط به حلقه‌ها Defeat 6 loop challenges in Javascript

• ده چالش برای یادگیری تمام انواع حلقه‌ها Ten loop challenges to learn all kind of loops in javascript

• توابع، Arrow Function و مفهوم THIS و Context Function, arrow function, THIS and context in javascript

• توابع مرتبه بالا (Higher Order) و توابع تو در تو Higher order function and nested functions in javascript

• مسترکلاس Prototypeها در جاوا اسکریپت A masterclass on prototypes in javascript

• سازنده‌های تابعی (Functional Constructor) و خطاها Functional constructor and Errors

• کلاس‌ها، اشیاء و ارث‌بری در JS Classes Objects and inheritance in javascript

• کپسوله‌سازی، چندریختی، انتزاع و Getter/Setter Encapsulation, Polymorphism, Abstraction and getters setters

• مبانی DOM و BOM در جاوا اسکریپت DOM and BOM basics in javascript

• حل ۵ چالش DOM Solving 5 challenges of DOM

• بخش نهایی DOM با ۵ چالش دیگر DOM finale with 5 more challenges

• جاوا اسکریپت ناهمگام (Asynchronous) و Event Loop Asynchronous Javascript with event loop

• مفهوم Closures در JS Closures in javascript

• Promiseها و زنجیره‌سازی (Chaining) Promises and promise chaining

• ارث‌بری پروتوتایپی (Prototypal Inheritance) Prototypal Inheritance in javascript

• مفهوم THIS و Binding Context THIS and binding context

• استفاده از Async/Await و Promise.all Aync-await and Promise all

• Iteratorها و Generatorها در JS Iterator and generators in javascript

• ماژول‌های ES6 و CommonJS ES6 Modules and CommonJS

• دموی پروژه ۱: Todo با Local Storage Demo of project 1 - Todo with local Storage

• افزودن تسک به آرایه Add a task in array

• مدیریت Local Storage و رویدادهای DOM Handling local storage and DOM event

• انتشار رویداد (Event Bubbling) و عملیات CRUD Event bubbling and CRUD operations

• دموی پروژه مدیریت API Demo of API handling project

• نحوه مدیریت هر نوع API در کد شما Handle any type of API in your code

• دموی پروژه ۳: اپلیکیشن تجارت الکترونیک Demo of Project 3 Ecommerce app

• ساخت صفحه سبد خرید فروشگاه Building Ecommerce cart page

• تمرین پروژه ۳ Project 3 assignment

• دموی پروژه ۴: ردیاب هزینه‌ها Demo of project 4 Expense Tracker

• ردیاب هزینه با Local Storage و Event Delegation Expense tracker with local storage and event deligation

• دموی پروژه ۵: اپلیکیشن کوییز Demo of project 5 - quiz application

• ساخت کامل اپلیکیشن کوییز Building a complete quiz app

NextJS: شروع کار و مفاهیم پایه (به‌روزرسانی شده) NextJS: Getting started and Fundamentals - Updated

• Next.js چیست و چرا فریم‌ورک‌ها توصیه می‌شوند؟ What is Next.js and Why Frameworks are recommended?

• نصب و نوشتن اولین Hello world در Next.js Installation & Writing Your First Hello world in Next.js

• روتر در Next.js چیست؟ App Router در مقابل Page Router What is Router in Next.js , App Router vs Page Router ( Which one to choose)

• مقایسه Next.js با React خالص Next.js vs Just React

ساختار پروژه و مسیریابی مبتنی بر فایل (به‌روزرسانی شده) Project Structure & File System Routing - Updated

• قراردادهای نام‌گذاری پوشه‌ها و فایل‌ها در Next.js Folder and Files Conventions in Next.js

• انواع پوشه‌ها و فایل‌ها در Next.js Types of Folders & Files in Next.js

• مسیریابی تو در تو و مسیریابی داینامیک Nested Routing and Dynamic Routing

• مینی پروژه ۱: بررسی کلی و تنظیم هدر Mini Project 1 – Project Overview & Header Setup

• مینی پروژه ۱: ساخت فوتر Mini Project-1- Building Footer

• مینی پروژه ۱: ساخت صفحه اصلی ریسپانسیو Mini Project 1 – Building a Responsive Home Page

• مینی پروژه ۱: ساخت صفحه درباره ما ریسپانسیو Mini Project 1 - Making Responsive About Page

مسیریابی پیشرفته (به‌روزرسانی شده) Advanced Routing - Updated

• مسیریابی داینامیک تو در تو Nested Dynamic Routing

• بخش‌های Catch All و Optional Catch All Catch All Segment and Optional Catch All Segment

• گروه‌بندی مسیرها (Route Group) و پوشه‌های خصوصی Routes Group and Private Folder

• مسیرهای Intercepting (سطح یک) Intercepting Routes - Same and One Level up of Intercepting Routes

• مسیرهای Intercepting (سطح دو و ریشه) Intercepting Routes - Two and Root Level up of Intercepting Routes

• معرفی Parallel Routes و Slotها در Next.js Introduction of Parallel Routes and Slots in Next.js

• مسیرهای تطبیق نیافته و قرارداد صفحه Default Unmatched Routes and Default Page Convention

• ساخت صفحه سفارشی Not Found Making Your Custom Not-Found Page

بررسی عمیق رندرینگ و کامپوننت‌ها (به‌روزرسانی شده) Rendering & Components Deep Dive - Updated

• سرور کامپوننت‌ها (Server Components) در Next.js Server Components in Next.js

• کلاینت کامپوننت‌ها (Client Components) در Next.js Client Components in Next.js

• کدام را انتخاب کنیم؟ (Client vs Server) Client Components and Which one to choose ( Client vs Server)

هندلرهای مسیر بک‌اند (به‌روزرسانی شده) Backend Route handlers -Updated

• Route Handlers چیست و متد GET در Next.js What is Route Handlers in Next.js and GET endpoint in Next.js

• ساخت اندپوینت POST در Next.js Creating POST endpoint in Next.js

• ساخت اندپوینتهای PUT، PATCH و DELETE Creating PUT , PATCH & DELETE endpoint in Next.js

• بررسی پارامترهای کوئری (Query Parameter) Exploring Query Parameter

• کار با Headerها در Next.js Headers in Next.js

• کار با Cookieها در Next.js Cookies in Next.js

• اپلیکیشن یادداشت: تنظیمات پروژه و اتصال به دیتابیس Notes App – Project Setup & Database Connection

• اپلیکیشن یادداشت: مدل MongoDB و API ساخت یادداشت Notes App – MongoDB Model, Create API & Add Note Form

• اپلیکیشن یادداشت: نمایش یادداشت‌ها با کارت، useState و Toast Notes App - Fetch & Display Notes with Cards, useState & Toasts

• اپلیکیشن یادداشت: اندپوینت حذف و پاک کردن یادداشت‌ها Notes App – Delete Endpoint & Removing Notes

• اپلیکیشن یادداشت: اندپوینت ویرایش و فرم ویرایش شرطی Notes App – Edit Endpoint & Conditional Editing Form

توابع اصلی و هوک‌ها در Next.js (به‌روزرسانی شده) Core Functions and Hooks in Next.js -Updated

• هوک useParam useParam Hook

• هوک usePathname usePathname Hook

• هوک useSearchParams useSearchParams Hook

• هوک useRouter (push, replace, back, forward, prefetch) useRouter Hook – push, replace, back & forward , prefetch

• تابع Redirect در Next.js Redirect Function in Next.js

Server Actions و بهینه‌سازی اپلیکیشن (به‌روزرسانی شده) Server Actions & App Optimizations - Updated

• بررسی عمیق Server Actions: چرا بهتر از API Routeها هستند؟ Deep Dive into Server Actions: Why They Outshine API Routes

• تسلط بر فونت‌ها در Next.js: گوگل و فونت‌های محلی Mastering Fonts in Next.js: Google & Local Made Easy

• فرم‌ها در Next.js: Prefetching، ناوبری و Server Actions Forms in Next.js: Prefetching, Navigation & Server Actions

• کامپوننت <Link> در Next.js Next.js <Link> Components

• کامپوننت <Script> در Next.js Next.js <Script> Components

• بهینه‌سازی تصاویر با کامپوننت <Image> Optimized Images in Next.js with the <Image> Component

• پروژه فرم تماس: مقدمه، تنظیمات و اتصال دیتابیس Contact Form Project – Introduction, Setup & Database Connection

• پروژه فرم تماس: مدل تماس، Shadcn/UI و رابط کاربری فرم Contact Form Project – Contact Model, Shadcn/UI & Form UI

• پروژه فرم تماس: ساخت Server Action برای ثبت تماس Contact Form Project – Create Contact Server Action & Form Integration

• پروژه فرم تماس: بروزرسانی وضعیت تماس و revalidate paths Contact Form Project – Contact status updating and revalidate paths

Middleware، متاداده‌ها و SEO (به‌روزرسانی شده) Middleware , Metadata and SEO - Updated

• متادیتای استاتیک در مقابل داینامیک: بهترین متدها Static vs Dynamic Metadata: Best Practices for Layouts & Pages

• بررسی عمیق متادیتای Title: ویژگی‌های Default و Template Title Metadata Deep Dive: Default, Template & Absolute Properties Explained

• نحوه افزودن و بروزرسانی Faviconها How to Add and Update Favicons in Next.js Projects

• تصویر استاتیک Open Graph: چیست و چرا اهمیت دارد؟ Static Open Graph Image: What It Is, Why It Matters, Pros & Cons

• تصاویر داینامیک Open Graph با استفاده از next/og Dynamic Open Graph Images in Next.js: Building an OG API with next/og

مدیریت استیت و دریافت داده‌ها (به‌روزرسانی شده) State Management & Data Fetching - Updated

• مقدمه Tanstack Query و مقداردهی اولیه در Next.js Introduction to Tanstack Query and Initializing in Query provider in Next.js

• استفاده از useQuery برای ساده‌سازی دریافت داده‌ها useQuery in TanStack Query – Simplifies data fetching by removing boilerplate

• استفاده از useMutation: تغییرات، ابطال کوئری و Optimistic UI useMutation in TanStack Query – Mutations, Query Invalidation, and Optimistic UI

• راهنمای سریع Hydration و کشینگ در Next.js What is Hydration & Caching in Next.js - a quick guide

• اپلیکیشن Todo: دیتابیس، Schema و تنظیم Query Provider ToDo App – DB, Schema & Query Provider Setup

• اپلیکیشن Todo: افزودن تسک با اعتبار سنجی Zod ToDo App – Add Todo with Zod Validation & Mutation Hooks

• اپلیکیشن Todo: دریافت و نمایش تسک‌ها با Zustand و TanStack ToDo App – Get & Display Todos with Zustand and TanStack Query

• اپلیکیشن Todo: علامت‌گذاری تسک به عنوان تکمیل شده ToDo App – Mark Todo Completed with Mutations

• اپلیکیشن Todo: حذف تسک با Mutationها ToDo App – Delete Todo with Mutations

یکپارچه‌سازی دیتابیس و ORM (به‌روزرسانی شده) Database & ORM Integration - Updated

• ORM و Prisma در Next.js: از نصب تا Seeding ORM & Prisma in Next.js: From Setup to Seeding

• ایجاد و دریافت داده‌ها با Prisma ORM Creating & Fetching Data with Prisma ORM

• ساخت کامپوننت PostList با Prisma در Server Components Building a PostList Component with Prisma in Server Components

• معرفی Drizzle ORM همراه با Next.js و Neon: نصب و Schema Introduction to Drizzle ORM with Next.js & Neon: Setup + User Schema

• عملیات CRUD با Drizzle ORM و Server Actions CRUD Operations with Drizzle ORM & Next.js Server Actions

احراز هویت و تعیین سطح دسترسی (به‌روزرسانی شده) Authentication & Authorization - Updated

• مقدمه‌ای بر احراز هویت و تعیین سطح دسترسی در Next.js Introduction to Authentication and Authorization in Next.js

• تسلط بر Better Auth: ورود با گوگل و گیت‌هاب و ShadCN UI Mastering Better Auth in Next.js Google & GitHub Login with ShadCN UI

• تنظیمات دیتابیس Better Auth و Secretهای گوگل و گیت‌هاب Configuring Better Auth DatabaseURL + Google & GitHub Secrets

• رابط کاربری Better Auth برای ورود با گوگل و گیت‌هاب Better Auth Login UI ShadCN + Google & GitHub Sign-In

• امنیت Better Auth: محافظت از مسیرها، نشست‌ها و خروج Better Auth Security Route Protection, Sessions & Sign-Out Flow

• راهنمای جامع احراز هویت Clerk در Next.js (Proxy و صفحات سفارشی) Clerk authentication in nextjs intro proxy & custom signin-signup complete guide

پرداخت‌ها و صورت‌حساب (به‌روزرسانی شده) Payments & Billing - Updated

• مسترکلاس یکپارچه‌سازی Stripe با Next.js Stripe Integration with next.js masterclass

• مسترکلاس یکپارچه‌سازی Polar با Next.js و Better Auth Polar integration with next.js and better auth masterclass

• ساخت سفارش و تایید پرداخت با Razorpay در Next.js Next.js + Razorpay Order Creation and Payment Verification

کشینگ و Revalidation Cache and Revalidation

• کشینگ و Revalidating (مدل قبلی) Caching and Revalidating (Previous Model)

• کشینگ با Cache Components در Next.js 16 Caching with Cache Components in Next.js16

پروژه کلون Leetcode (به‌روزرسانی شده) Leetcode Clone - Updated

• تنظیمات پروژه: نصب Next.js و مقداردهی Shadcn UI Project Setup - Installing Next.js and Initializing Shadcn UI

• ساده‌سازی دیتابیس: نصب Prisma و دیتابیس داکری Database Setup Made Easy Prisma Initialization & Dockerized DB for Next.js

• احراز هویت با Clerk: تنظیمات، OAuth گیت‌هاب و صفحات سفارشی Authentication Using Clerk -Clerk Setup, GitHub OAuth & Custom Auth Pages

• آنبوردینگ کاربر با Prisma: تعریف Schema و Server Actions User Onboarding with Prisma-Defining Schema, Running Migrations & Server Actions

• ساخت نوبار ریسپانسیو، صفحه اصلی، حالت Dark/Light و دسترسی بر اساس نقش Building a Responsive Navbar & Homepage with DarkLight Mode + Role-Based Auth

• تنظیمات Judge0: یکپارچه‌سازی ابری با RapidAPI Judge0 Setup - Cloud integration with rapid api

• ساخت مسئله: تعریف Schema در Prisma و اتصال به ادمین Create Problem Defining Prisma Schema & Linking with Admin User

• اندپوینت بک‌اند برای ساخت مسئله با تایید Judge0 Backend Endpoint for Problem Creation Integrating Judge0 to Validate & Save

• دسترسی بر اساس نقش و رابط کاربری فرم ساخت مسئله Role-Based Access & UI for Problem Creation Form with Sample Problems

• صفحه لیست مسائل: نمایش در جدول، فیلترها و جستجو Problem Route Page Fetching All Problems with Table UI, Filters & Search

• صفحه حل مسئله: دریافت با ID، بخش‌های چپ/راست و لایوت کامل Problem Solving Page Fetch by ID with Header, LeftRight Sections & Full Layout

• ارسال‌ها و TestCases: مدل Prisma برای ذخیره داده‌های اجرا Submissions & TestCases Prisma Schema for Storing Execution Data

• مدل Prisma و اندپوینتهای بک‌اند برای پلی‌لیست‌ها Prisma Schema & Backend Endpoints for Creating Playlists and Adding Problems

• مدیریت پلی‌لیست: ساخت پلی‌لیست و افزودن مسائل از طریق Modal Playlist Management Create Playlist & Add Problems via Modal with Proper Logic

• صفحه پروفایل: دریافت اطلاعات کاربر، آمار، ارسال‌ها و پلی‌لیست‌ها Profile Page Fetch User Info, Stats, Submissions & Playlists

پروژه کلون T3 Chat (به‌روزرسانی شده) T3-Chat Clone - Updated

• تنظیمات پروژه: نصب Next.js و Shadcn UI Project Setup - Installing Next.js and Initializing Shadcn ui

• تنظیمات دیتابیس: نصب Prisma و Neon DB Database Setup Made Easy Prisma Initialization & Neon DB for Next

• احراز هویت با Better Auth، گیت‌هاب و صفحات سفارشی Authentication Using Better-Auth ,GitHub & Custom Auth Pages

• طراحی رابط کاربری چت: سایدبار، هدر و تم‌بندی Designing an Interactive Chat Interface Sidebar, Header & Theming

• پیاده‌سازی انتخاب مدل: Openrouter، دریافت مدل‌ها و UI Implementing Model Selection Openrouter, Fetching Models, and UI Setup

• تنظیمات End-to-End چت: Schema بک‌اند، API و هوک‌های UI End-to-End Chat Setup Backend Schema, API, and UI Hooks

• ساخت سایدبار چت: دریافت داده‌ها و طراحی کامپوننت Building Chat Sidebar Data Fetch, and Component Design

• آیتم‌های فعال سایدبار: صفحه داینامیک و کامپوننت‌های پیام‌رسانی Active Chat Sidebar Items Dynamic Page & Messaging Components

• توسعه پیشرفته API چت: استریمینگ، تبدیل پیام و ماندگاری Advanced Chat API Development Streaming, Message Conversion, and Persistence

• ساخت UI صفحه چت: رندرینگ داینامیک پیام‌ها و تریگر استریم Building Chat Page UI Dynamic Message Rendering and Auto Stream Trigger

• تکمیل اپلیکیشن چت: پاسخ استریم خودکار و جمع‌بندی پروژه Finalizing the Chat App Auto-Trigger Stream Response & Project Wrap-Up

Next.js: شروع کار و مفاهیم پایه (نسخه قدیمی) Next.js : Getting Started & Fundamentals ( legacy)

• مقدمه Next.js و چرا از فریم‌ورک استفاده کنیم؟ Introduction to Next.js & Why Use Frameworks ?

• روتر Next.js: مقایسه App Router و Page Router What is Router in Next.js , App Router vs Page Router ( Which one to choose?)

• نصب و اولین Hello world در Next.js Installation & Writing Your First Hello world in Next.js

• مقایسه Next.js با React Next.js vs Just React

• بررسی ساختار پوشه‌بندی Next.js Next.js Folder Structure Breakdown

ساختار پروژه و مسیریابی (نسخه قدیمی) Project Structure & File System Routing ( legacy)

• قراردادهای پوشه‌ها و فایل‌ها در Next.js Folder and Files Conventions in Next.js

• انواع پوشه‌ها و فایل‌ها Types of Folders & Files in Next.js

• مسیریابی تو در تو و داینامیک Nested Routing and Dynamic Routing

• مینی پروژه: بررسی کلی و تنظیم هدر Mini Project – Project Overview & Header Setup

• مینی پروژه: ساخت فوتر Mini-Project- Building Footer

• مینی پروژه: ساخت صفحه اصلی ریسپانسیو Mini Project – Building a Responsive Home Page

• مینی پروژه: ساخت صفحه درباره ما ریسپانسیو Mini-Project - Making Responsive About Page

• مینی پروژه: ساخت صفحه تماس ریسپانسیو Mini-Project- Making Responsive Contact Page

مسیریابی پیشرفته (نسخه قدیمی) Advanced Routing (legacy)

• مسیریابی داینامیک تو در تو Nested Dynamic Routing

• بخش‌های Catch All و Optional Catch All Catch All Segment and Optional Catch All Segment

• گروه‌بندی مسیرها و پوشه‌های خصوصی Routes Group and Private Folder

• مسیرهای Intercepting (سطح یک) Intercepting Routes - Same and One Level up of Intercepting Routes

• مسیرهای Intercepting (سطح دو و ریشه) Intercepting Routes - Two and Root Level up of Intercepting Routes

• معرفی Parallel Routes و Slotها Introduction of Parallel Routes and Slots in Next.js

• مسیرهای تطبیق نیافته و صفحه Default Unmatched Routes and Default Page Convention

• ساخت صفحه سفارشی Not Found Making Your Custom Not-Found Page

رندرینگ و کامپوننت‌ها (نسخه قدیمی) Rendering & Components Deep Dive (legacy)

• سرور کامپوننت‌ها Server components

• کلاینت کامپوننت‌ها و نحوه انتخاب Client Components and Which one to choose ( Client vs Server)

هندلرهای مسیر بک‌اند (نسخه قدیمی) Backend Route handlers (legacy)

• Route Handlers و متد GET در Next.js What is Route Handlers in Nextjs and GET endpoint in next.js

• ساخت اندپوینت POST Creating POST endpoint in Next.js

• ساخت اندپوینت PUT Creating PUT endpoint in Next.js

• ساخت اندپوینت PATCH Creating PATCH endpoint in Next.js

• ساخت اندپوینت DELETE Creating DELETE endpoint in Next.js

• بررسی Query Parameterها Exploring Query Parameter

• کار با Headerها در Next.js Headers in Next.js

• کار با Cookieها در Next.js Cookies in Next.js

• اپلیکیشن یادداشت: تنظیمات و اتصال دیتابیس Notes App – Project Setup & Database Connection

• اپلیکیشن یادداشت: مدل MongoDB و API ساخت یادداشت Notes App – MongoDB Model, Create API & Add Note Form

• اپلیکیشن یادداشت: نمایش با کارت، useState و Toast Notes App - Fetch & Display Notes with Cards, useState & Toasts

• اپلیکیشن یادداشت: اندپوینت حذف یادداشت‌ها Notes App – Delete Endpoint & Removing Notes

• اپلیکیشن یادداشت: اندپوینت ویرایش و فرم شرطی Notes App – Edit Endpoint & Conditional Editing Form

توابع و هوک‌های اصلی (نسخه قدیمی) Core Functions and Hooks in Next.js (legacy)

• ساده‌سازی کشینگ و Revalidate با Fetch API توسعه‌یافته Caching & Revalidate Made Easy - Next.js Extended Fetch API

• مدیریت خطاهای 404 با تابع notFound() Handling 404s with the notFound() Function in Next.js

• هوک useParam useParam Hook

• هوک usePathname usePathname Hook

• هوک useQueryParams useQueryParams Hook

• هوک useRouter (push, replace, back, forward, prefetch) useRouter Hook – push, replace, back & forward , prefetch

• تابع Redirect در Next.js Redirect Function in Next.js

Server Actions و بهینه‌سازی (نسخه قدیمی) Server Actions & App Optimizations (legacy)

• بررسی عمیق Server Actions و برتری نسبت به API Route Deep Dive into Server Actions Why They Outshine API Routes

• تسلط بر فونت‌های گوگل و محلی Mastering Fonts in Next.js Google & Local Made Easy

• فرم‌ها در Next.js: Prefetching و Server Actions Forms in Next.js Prefetching, Navigation & Server Actions

• بهینه‌سازی تصاویر با Image Component Optimized Images in Next.js with the Image Component

• بررسی <Link> و <Script> فراتر از تگ‌های <a> و <script> Next.js <Link> & <Script> – Beyond <a> and <script>

• پروژه فرم تماس: مقدمه و اتصال دیتابیس Contact Form Project – Introduction, Setup & Database Connection

• پروژه فرم تماس: مدل تماس و UI با ShadcnUI Contact Form Project – Contact Model, ShadcnUI & Form UI

• پروژه فرم تماس: ساخت Server Action و یکپارچه‌سازی فرم Contact Form Project – Create Contact Server Action & Form Integration

• پروژه فرم تماس: دریافت لیست تماس‌ها در Server Component Contact Form Project – Get Contact List & Render in Server Component

• پروژه فرم تماس: بروزرسانی وضعیت و Revalidate Path Contact Form Project – Update Contact Status & Revalidate Path

• پروژه فرم تماس: کامپوننت وضعیت، unstable_cache و Revalidate Tag Contact Form Project – Contact Status Component, unstable_cache & Revalidate Tag

Middleware و SEO (نسخه قدیمی) Middleware , Metadata and SEO (legacy)

• متادیتای استاتیک در مقابل داینامیک Static vs Dynamic Metadata Best Practices for Layouts & Pages

• بررسی عمیق Title Metadata (Default, Template, Absolute) Title Metadata Deep Dive Default, Template & Absolute Properties Explained

• افزودن و بروزرسانی Faviconها How to Add and Update Favicons in Next.js Projects

• تصویر استاتیک Open Graph: مزایا و معایب Static Open Graph Image What It Is, Why It Matters, Pros & Cons

• تصاویر داینامیک Open Graph با nextog Dynamic Open Graph Images in Next.js Building an OG API with nextog

مدیریت استیت و دریافت داده (نسخه قدیمی) State Management & Data Fetching (legacy)

• معرفی Tanstack Query و تنظیم Query Provider Introduction to Tanstack Query and Initializing in Query provider in Nextjs App

• استفاده از useQuery برای حذف کدهای تکراری useQuery in TanStack Query – Simplifies data fetching by removing boilerplate

• استفاده از useMutation: تغییرات و Optimistic UI useMutation in TanStack Query – Mutations, Query Invalidation, and Optimistic UI

• راهنمای سریع Hydration و کشینگ در Next.js 67. What is Hydration & Caching in Next.js - a quick guide

• اپلیکیشن Todo: دیتابیس، Schema و تنظیمات ToDo App – DB, Schema & Query Provider Setup

• اپلیکیشن Todo: افزودن تسک با اعتبار سنجی Zod ToDo App – Add Todo with Zod Validation & Mutation Hooks

• اپلیکیشن Todo: نمایش تسک‌ها با Zustand و TanStack ToDo App – Get & Display Todos with Zustand and TanStack Query

• اپلیکیشن Todo: تکمیل تسک با Mutations ToDo App – Mark Todo Completed with Mutations

• اپلیکیشن Todo: حذف تسک با Mutations ToDo App – Delete Todo with Mutations

یکپارچه‌سازی دیتابیس و ORM (نسخه قدیمی) Database & ORM Integration (legacy)

• Prisma در Next.js: از نصب تا Seeding ORM & Prisma in Next.js: From Setup to Seeding

• ایجاد و دریافت داده‌ها با Prisma Creating & Fetching Data with Prisma ORM

• ساخت PostList در Server Components Building a PostList Component with Prisma in Server Components

• معرفی Drizzle ORM و Neon: نصب و Schema Introduction to Drizzle ORM with Next.js & Neon: Setup + User Schema

• عملیات CRUD با Drizzle و Server Actions CRUD Operations with Drizzle ORM & Next.js Server Actions

• ساخت UI مدیریت کاربران: UserList و UserForm با Shadcn Creating User Management UI: UserList + UserForm using shadcn and drizzle orm

احراز هویت و دسترسی (نسخه قدیمی) Authentication & Authorization (legacy)

• مقدمه‌ای بر احراز هویت و دسترسی در Next.js Introduction to Authentication and Authorization in Nextjs

• تسلط بر Better Auth: ورود با گوگل و گیت‌هاب Mastering Better Auth in Next.js: Google & GitHub Login with ShadCN UI

• تنظیمات DatabaseURL و Secretها در Better Auth Configuring Better Auth DatabaseURL + Google & GitHub Secrets

• پیاده‌سازی Better Auth: Migration و تنظیم Auth Client Better Auth in Action Database Migration, API & Auth Client Setup

• رابط کاربری Better Auth با ShadCN Better Auth Login UI ShadCN + Google & GitHub Sign-In

• امنیت Better Auth: محافظت از مسیرها و نشست‌ها Better Auth Security Route Protection, Sessions & Sign-Out Flow

• راهنمای جامع احراز هویت Clerk: Middleware و صفحات سفارشی Clerk Authentication in Next.js Intro, Middleware Custom Sign-In/Up Setup Guide

پرداخت‌ها و صورت‌حساب (نسخه قدیمی) Payments & Billing (legacy)

• معرفی ماژول‌های پرداخت و تنظیم Stripe Introduction of Billing and Payment Modules and Stripe Component Setup

• ساخت جریان پرداخت با Next.js و Stripe Next.js and Stripe: Building a Payment Flow

• یکپارچه‌سازی Polar با Next.js و Better Auth Integrating Polar with Next.js and Better Auth

• ساخت سفارش و تایید پرداخت Razorpay Next.js + Razorpay Order Creation and Payment Verification

کلون Leetcode (نسخه قدیمی) Leetcode Clone (legacy)

• مقدمه و دموی پروژه Leetcode Introduction and Demo of Leetcode Project

• تنظیمات پروژه: نصب Next.js و Shadcn/ui Project Setup - Installing Nextjs and Initializing Shadcn/ui

• تنظیم دیتابیس: Prisma و Docker Database Setup Made Easy: Prisma Initialization & Dockerized DB for Next.js

• احراز هویت با Clerk: تنظیمات و OAuth گیت‌هاب Authentication Using Clerk -Clerk Setup, GitHub OAuth & Custom Auth Pages

• آنبوردینگ کاربر: تعریف Schema و Server Actions User Onboarding with Prisma - Defining Schema & Server Actions

• ساخت نوبار و صفحه اصلی ریسپانسیو با Role Based Auth Building a Responsive Navbar & Homepage with Dark/Light Mode + Role-Based Auth

• تنظیمات Judge0: میزبانی محلی یا ابری via RapidAPI Judge0 Setup: Self-Hosting Locally or Cloud Integration via RapidAPI

• ساخت مسئله: تعریف Schema و اتصال به ادمین Create Problem: Defining Prisma Schema & Linking with Admin User

• ساخت مسئله: تایید و ذخیره Testcases با Judge0 Problem Creation - Integrating Judge0 to Validate & Save Testcases in DB

• دسترسی بر اساس نقش و UI فرم ساخت مسئله Role-Based Access & UI for Problem Creation Form with Sample Problems

• صفحه لیست مسائل: جدول، فیلترها و جستجو Problem Route Page: Fetching All Problems with Table UI, Filters & Search

• صفحه حل مسئله: دریافت با ID و لایوت کامل Problem Solving Page: Fetch by ID with Header, Left/Right Sections & Full Layout

• ارسال‌ها و TestCases: مدل Prisma برای داده‌های اجرا Submissions & TestCases: Prisma Schema for Storing Execution Data

• تاریخچه ارسال‌ها: دریافت ارسال‌های کاربر و ساخت کامپوننت Submission History: Fetch User-Specific Submissions & Build History Component

• مدل Prisma و اندپوینتهای ساخت پلی‌لیست Prisma Schema & Backend Endpoints for Creating Playlists and Adding Problems

• ساخت پلی‌لیست و افزودن مسائل از طریق Modal Create Playlist & Add Problems via Modal with Proper Logic Handling

• صفحه پروفایل: اطلاعات کاربر، آمار و پلی‌لیست‌ها Profile Page: Fetch User Info, Stats, Submissions & Playlists

کلون V0 (نسخه قدیمی) V0 Clone (legacy)

• مقدمه و دموی پروژه V0 Clone Introduction and Demo of V0-Clone Project

• تنظیمات پروژه: نصب Next.js و Shadcn/ui Project Setup - Installing Nextjs and Initializing Shadcn/ui

• تنظیم دیتابیس: Prisma و Docker Database Setup Made Easy: Prisma Initialization & Dockerized DB for Next.js

• احراز هویت با Clerk: گیت‌هاب، گوگل و Auth سفارشی Authentication Using Clerk - Clerk Setup, GitHub and Google Oauth & Custom Auth

• ساخت هدر کاربرپسند با تغییر وضعیت پس از ورود Create a User-Friendly Header That Changes When Users Sign In

• ساخت نقطه ورود اپلیکیشن: صفحه اصلی با تمپلیت‌ها و فرم پروژه Building Your App’s Entry Point :Modern Home Page with Templates & Project Form

• درک و پیاده‌سازی Background Jobs با Inngest Understanding and Implementing Background Jobs with Inngest

• پردازش‌های پس‌زمینه AI با Inngest AI Background Jobs With Inngest

• کار با E2B Sandboxes: داکری کردن و اجرای اپ‌های Next.js Hands-On with E2B Sandboxes - Dockerize and Run Next.js Apps

• Inngest Agents Kit: افزودن ابزارهای فایل، ترمینال و API به Agent Inngest Agents Kit - Adding File, Terminal & API Tools to Your AI Agent

• ساخت بک‌اند پروژه با Prisma، Server Actions و Background Jobs Build the Projects Backend with Prisma, Server Actions, and Background Jobs

• افزودن لیست پروژه‌ها و مشاهده پروژه با مسیرهای داینامیک Add Project List and Project View Components with Dynamic Project Route Segment

• ساخت بک‌اند پیام‌ها با Prisma و Background Jobs Build the Messages Backend with Prisma, Background Jobs with User and Assistant

• ساخت File Explorer و Syntax Highlighting با Sandbox در Iframe Build File Explorer & Syntax Highlighting with Sandbox Integration on Iframe

• تنظیم AI Agents: تولید عنوان و خلاصه‌سازی پاسخ‌ها AI Agents Setup - Title Generation & Response Summarization

• صفحه قیمت‌گذاری: یکپارچه‌سازی پرداخت و Rate Limiting Pricing Page with Payment Integration and Rate Limiting for Free and Pro Users

• تنظیم حافظه AI Agent: ماندگاری طولانی‌مدت با Inngest AI Agent Memory Setup - Long-Term Persistence with Inngest

کلون T3 Chat (نسخه قدیمی) T3-Chat Clone (legacy)

• مقدمه و دموی پروژه T3 Chat Introduction and Demo of T3-Chat Project

• تنظیمات پروژه: نصب Next.js و Shadcn/ui Project Setup - Installing Nextjs and Initializing Shadcn/ui

• تنظیم دیتابیس: Prisma و Docker Database Setup Made Easy: Prisma Initialization & Dockerized DB for Next.js

• احراز هویت با Better Auth، گیت‌هاب و صفحات سفارشی Authentication Using Better-Auth ,GitHub & Custom Auth Pages

• طراحی رابط کاربری چت: سایدبار، هدر و تم‌بندی Designing an Interactive Chat Interface: Sidebar, Header & Theming

• پیاده‌سازی انتخاب مدل: Openrouter و تنظیم UI Implementing Model Selection: Openrouter, Fetching Models, and UI Setup

• تنظیم End-to-End چت: Schema، API و هوک‌های UI End-to-End Chat Setup: Backend Schema, API, and UI Hooks

• ساخت سایدبار چت: دریافت داده‌ها، Store در Zustand و طراحی Building Chat Sidebar: Data Fetch, Zustand Store, and Component Design

• آیتم‌های فعال سایدبار: صفحه داینامیک و کامپوننت‌های پیام Active Chat Sidebar Items: Dynamic Page & Messaging Components

• توسعه پیشرفته API چت: استریمینگ و ماندگاری پیام‌ها Advanced Chat API Development: Streaming, Message Conversion, and Persistence

• ساخت UI صفحه چت: رندرینگ داینامیک و تریگر استریم Building Chat Page UI: Dynamic Message Rendering and Auto Stream Trigger

• تکمیل اپلیکیشن چت: پاسخ استریم خودکار و جمع‌بندی Finalizing the Chat App: Auto-Trigger Stream Response & Project Wrap-Up

مسترکلاس Supabase (نسخه قدیمی) Supabase MasterClass (legacy)

• مقدمه و دموی پروژه با Supabase Introduction and Demo of Project using Supabase

• نصب Next.js و مقداردهی Shadcn/ui Installing Nextjs and Initializing Shadcn/ui

• Next.js + Supabase: جریان جامع آنبوردینگ توسعه‌دهنده Next.js + Supabase: The Ultimate Developer Onboarding Flow

• تسلط بر احراز هویت: از ثبت‌نام تا خروج در Next.js User Authentication Mastery: From Sign-Up to Logout in Next.js

• Supabase در عمل: ساخت وبلاگ امن با Storage، RLS و Editor.js Supabase in Action: Build a Secure Blog with Storage, RLS & Editor.js

• مسیرهای امن Supabase: دریافت، نمایش و دیباگ محتوا Supabase Secure Routes: Fetch, Display, and Debug Blog Content

مسترکلاس Convex (نسخه قدیمی) Convex MasterClass (legacy)

• مقدمه و دموی پروژه Introduction and Project Demo

• شروع سریع Convex: نصب Next.js + shadcn/ui در چند دقیقه Convex Quickstart: Next.js + shadcn/ui Setup in Minutes

• چرا Convex؟ تسلط بر آینده توسعه Realtime Full Stack Why Convex? Master the Future of Realtime Full-Stack Development

• آماده‌سازی کاربر در Convex: احراز هویت + کامپوننت پروفایل User-Ready Convex: Authentication + Profile Components in One Go

• Convex در عمل: Schema، توابع و UI برای اپلیکیشن Todo Convex in Action: Schema, Functions, and UI for a Complete Todo App

مسترکلاس Nextjs 16 (نسخه قدیمی) Nextjs-16 MasterClass (legacy)

• مقدمه‌ای بر Next.js 16 و بهبودهای اصلی آن Introduction to Next.js 16 which is now available with major improvements

• بررسی عمیق cacheComponents: هسته مدل PPR در Next.js 16 Deep Dive into cacheComponents: The Core of Next.js 16’s PPR Model

• ابزار Next.js DevTools MCP: درک اپلیکیشن توسط AI Agents Next.js DevTools MCP - Enabling AI Agents to Understand Your App

• توضیح Next.js Proxy: کنترل درخواست‌ها و مرزهای شبکه Next.js Proxy Explained - Smarter Network Boundaries and Request Control

بخش پایانی Farewell

• بخش پایانی Farewell