آموزش Master Next.js 14 - راهنمای کامل Full-Stack

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

شروع: از اینجا شروع کنید! Getting Started: Begin Here!

• به دوره خوش آمدید! Welcome to the Course!

• Next.js چیست و چگونه به اینجا رسیدیم؟ What is Next.js and How Did We Get Here?

• آنچه یاد خواهید گرفت، آنچه خواهید ساخت و راه اندازی خواهید کرد! What You'll Learn, What You'll Build and Setting Up!

شروع به کار: ایجاد یک پروژه و نمای کلی Next.js Getting Started: Creating a Next.js Project and Overview

• مقدمه بخش: ایجاد یک پروژه Next.js و نمای کلی Section Introduction: Creating a Next.js Project and Overview

• ایجاد پروژه Next.js Creating a Next.js Project

• ساختار پروژه Next.js Next.js Project Structure

شروع به کار: مقدمه ای بر Git و GitHub Getting Started: Introduction to Git and GitHub

• بخش مقدمه: مقدمه ای بر Git و GitHub Section Introduction: Introduction to Git and GitHub

• مقدمه ای بر Git Introduction to Git

• نصب Git در مک Installing Git on Mac

• نصب Git در ویندوز Installing Git on Windows

• نصب Git در لینوکس Installing Git on Linux

• انجام تغییرات در Git Commiting Changes in Git

• GitHub، مخزن از راه دور، فشار دادن تغییرات GitHub, Remote Repository, Pushing Changes

React 101 (مواظب باشید اگر تازه وارد هستید!) React 101 (Watch if You Are New to React!)

• بخش مقدمه: React 101 Section Introduction: React 101

• React چیست؟ What is React?

• درک نحو JSX Understanding JSX Syntax

• اجزاء به عنوان بلوک های ساختمانی پایه رابط کاربری Components as the Basic UI Building Blocks

• لوازم جانبی (ارسال داده ها به کامپوننت ها) Component Props (Passing Data to Components)

• پاسخگویی به رویدادها Responding to Events

• حفظ حالت جزء با استفاده از قلاب (useState) Keeping Component State using Hooks (useState)

• رندر مشروط Conditional Rendering

• رندر لیست عناصر Rendering List of Elements

• واردات و صادرات قطعات Importing and Exporting Components

Next.js 101: مسیریابی، صفحات و طرح‌بندی Next.js 101: Routing, Pages & Layouts

• مقدمه بخش: مسیریابی، صفحات و طرح‌بندی Section Introduction: Routing, Pages & Layouts

• مسیریابی و ایجاد صفحات در سیستم فایل File-system Routing & Creating Pages

• طرح‌بندی (UI مشترک بین صفحات) Layouts (UI Shared Between Pages)

• پیوندها و ناوبری Links and Navigation

• پیش واکشی و ذخیره سازی را درک کنید Understand Prefetching and Caching

• مسیرهای پویا با پارامترها Dynamic Routes with Parameters

Next.js 101: واکشی داده (و ذخیره سازی!) Next.js 101: Data Fetching (and Caching!)

• مقدمه بخش: واکشی داده (و ذخیره سازی!) Section Introduction: Data Fetching (and Caching!)

• چگونه واکشی داده در Next.js کار می کند (توضیحات و توصیه ها) How Data Fetching Works in Next.js (Explanation and Recommendations)

• اجرای یک سرور JSON ساختگی Running a Mock JSON Server

• در واقع واکشی داده ها با واکشی در داخل یک مؤلفه سرور Actually Fetching Data with fetch inside a Server Component

• آشنایی با حافظه پنهان داده و ذخیره سازی درخواست Understanding Data Cache and Request Memoization

• کش را در عمل واکشی کنید Fetch Cache in Practice

Next.js 101: مقابله با منابع داده آهسته (تعلیق، بارگیری رابط کاربری و جریان) Next.js 101: Dealing with Slow Data Sources (Suspense, Loading UI & Streaming)

• بخش مقدمه: مقابله با منابع داده کند Section Introduction: Dealing with Slow Data Sources

• چگونه یک منبع داده کند می تواند کل صفحه شما را مسدود کند! How a Slow Data Source Can Block Your Whole Page!

• در حال بارگیری رابط کاربری و جریان Loading UI and Streaming

• در حال بارگیری رابط کاربری و React Suspense Loading UI and React Suspense

• چه زمانی از React Suspense استفاده کنیم؟ هنگام بارگیری رابط کاربری؟ تفاوت؟ When to Use React Suspense? When Loading UI? Differences?

• درباره Streaming و SSR About Streaming and SSR

Next.js 101: طراحی با ماژول های Tailwind و CSS Next.js 101: Styling With Tailwind and CSS Modules

• معرفی بخش: استایل سازی با ماژول های Tailwind و CSS Section Introduction: Styling With Tailwind and CSS Modules

• گزینه های استایل در Next.js Styling Options in Next.js

• شروع کار با Tailwind CSS Getting Started with Tailwind CSS

• کانتینر فلکس و طراحی پاسخگو Flex Container & Responsive Design

• اضافه کردن یک ماژول CSS و استفاده از Tailwind Inside Adding a CSS Module and Using Tailwind Inside

• تعیین موقعیت عناصر با فلکس Positioning Elements with Flex

• استفاده از Grid و ساخت اجزای قابل تنظیم Using Grid and Making Customizable Components

Next.js 101: مدیریت خطا در Next Next.js 101: Error Management in Next

• بخش مقدمه: مدیریت خطا در بعدی Section Introduction: Error Management in Next

• مدیریت خطا در صفحات Error Handling on Pages

• مرزهای خطا Error Boundaries

• سلسله مراتب خطا - خطا از کجا مشخص می شود؟ Error Hierarchy - Where Does the Error Get Catched?

• چیدمان های تو در تو Nested Layouts

• مدیریت خطا در Layouts و در Root Layout Error Handling in Layouts and in the Root Layout

• بازیابی از خطاها Recovering from the Errors

• صفحه سفارشی یافت نشد (404). Custom Not Found (404) Page

Next.js 101: Images and Image Optimizations Next.js 101: Images and Image Optimizations

• معرفی بخش: تصاویر و بهینه سازی تصویر Section Introduction: Images and Image Optimizations

• مشکلات مربوط به تصاویر Problems with Images

• Core Web Vitals، LCP، CLS و بهینه سازی تصاویر Core Web Vitals, LCP, CLS and Optimizing Images

• افزودن گالری تصاویر (هنوز بهینه نشده است!) Adding Image Gallery (Not Optimized Yet!)

• استفاده از کامپوننت بعدی <تصویر> برای بهینه سازی خودکار Using the Next <Image> Component for Automatic Optimization

• اندازه تصویر پاسخگو Responsive Image Size

• متغیرهایی و کیفیت تصویر Placeholders & Image Quality

• اندازه گیری صفحه با فانوس دریایی Measuring the Page with Lighthouse

Next.js 101: فونت‌ها، تصاویر اپن‌گراف پویا، دارایی‌ها و متادیتا (SEO) Next.js 101: Fonts, Dynamic OpenGraph Images, Assets & Metadata (SEO)

• مقدمه بخش: فونت ها، OpenGraph، Scrips، Metadata Section Introduction: Fonts, OpenGraph, Scrips, Metadata

• بهینه سازی فونت ها با Next.js (گوگل و فونت های محلی!) Optimizing Fonts with Next.js (Google and Local Fonts!)

• بهینه سازی اسکریپت ها (اتصال با سرویس های خارجی مانند Analytics، Chatbots) Optimizing Scripts (Connecting with External Services like Analytics, Chatbots)

• مقدمه ای بر فراداده Introduction to Metadata

• مروری بر ویژگی های فراداده An Overview of Metadata Attributes

• فراداده ایستا Static Metadata

• فراداده پویا Dynamic Metadata

• تولید تصویر پویا (OpenGraph). Dynamic (OpenGraph) Image Generation

پروژه وبلاگ: Markdown و MDX Blog Project: Markdown and MDX

• معرفی بخش: Markdown و MDX Section Introduction: Markdown and MDX

• راه اندازی Markdown و MDX و اولین صفحه MDX! Setting Up Markdown and MDX and First MDX Page!

• Styling MDX - Tailwind Typography Styling MDX - Tailwind Typography

• MDX Remote (رندر کردن هرگونه علامت گذاری) MDX Remote (Rendering any Markdown)

• بارگیری MDX از فایل ها (پست های وبلاگ) Loading MDX From Files (Blog Posts)

پروژه وبلاگ: فراداده، Frontmatter، فهرست پست ها Blog Project: Metadata, Frontmatter, Post List

• معرفی بخش: پروژه وبلاگ: فراداده، Frontmatter، فهرست پست ها Section Introduction: Blog Project: Metadata, Frontmatter, Post List

• فراداده شماره 1 - What's Frontmatter و Refactor Time #1 Metadata #1 - What's Frontmatter and Refactor Time #1

• فراداده شماره 2 - استخراج مواد اولیه و محتوا، زمان Refactor شماره 2 Metadata #2 - Extracting Frontmatter and Content, Refactor Time #2

• فهرست پست های وبلاگ - واکشی فراداده همه فایل ها Blog Post List - Fetching Metadata of All Files

• لیست پست های وبلاگ - پیوندها Blog Post List - Links

پروژه وبلاگ: ذخیره سازی، فیلتر کردن، مرتب سازی، صفحه بندی Blog Project: Caching, Filtering, Sorting, Pagination

• مقدمه بخش: ذخیره سازی، فیلتر کردن، مرتب سازی، صفحه بندی Section Introduction: Caching, Filtering, Sorting, Pagination

• بهبود عملکرد و بازآفرینی - استفاده از حافظه پنهان برای یادداشت کردن Performance Improvements and Refactoring - Using cache for Memoization

• برچسب ها و فیلتر کردن با استفاده از پارامترهای جستجو Tags and Filtering Using Search Query Params

• مرتب سازی پست ها - استفاده از پارامترهای پرس و جو برای حالت شماره 1 Sorting Posts - Using Query Params for State #1

• تغییر ترتیب مرتب سازی - با استفاده از پارامترهای پرس و جو برای حالت شماره 2 Change Sort Order - Using Query Params for State #2

• افزودن صفحه بندی - استفاده از پارامترهای کوئری برای حالت شماره 3 Adding Pagination - Using Query Params for State #3

• مولفه صفحه بندی - صفحات شماره 1 Pagination Component - Pages #1

• مولفه صفحه بندی - پیوندهای شماره 2 Pagination Component - Links #2

پروژه وبلاگ: HTML سفارشی، برچسب ها، حالت تاریک، کوکی ها Blog Project: Custom HTML, Tags, Dark Mode, Cookies

• معرفی بخش: HTML سفارشی، برچسب ها، حالت تاریک، کوکی ها Section Introduction: Custom HTML, Tags, Dark Mode, Cookies

• سفارشی سازی HTML تولید شده از Markdown Customizing HTML Generated from Markdown

• برچسب ها در پست وبلاگ Tags on Blog Post

• تغییر حالت تاریک - مؤلفه شماره 1 Dark Mode Toggling - Component #1

• تغییر حالت تاریک - قلاب سفارشی، تنظیم حالت تاریک/روشن شماره 2 Dark Mode Toggling - Custom Hook, Setting Dark/Light Mode #2

• تغییر حالت تاریک - استفاده از کوکی ها در شماره 3 بعدی Dark Mode Toggling - Using Cookies in Next #3

• نکته درباره کوکی ها در اجزای سرور و رندر پویا Note About Cookies in Server Components and Dynamic Rendering

• پایان پروژه - صفحه اصلی Wrapping Up the Project - Home Page

پروژه وبلاگ: پخش زنده! + نکات و ترفندهای عملکرد Blog Project: Going Live! + Performance Tips & Tricks

• معرفی بخش: پخش زنده! + نکات و ترفندهای عملکرد Section Introduction: Going Live! + Performance Tips & Tricks

• توابع پویا اجباری به رندرهای صفحه پویا Dynamic Functions Forcing the Dynamic Page Renders

• با استفاده از ()geneStaticParams برای پیش نمایش صفحات Using generateStaticParams() to Pre-render Pages

• SearchParams و پیش رندر استاتیک؟ SearchParams and Static Pre-Rendering?

• ایجاد یک حساب Vercel و استقرار Live! Creating a Vercel Account and Deploying Live!

• پرداختن به پایگاه فراداده و صحبت کردن در Edge در مقابل Node Runtimes Adressing Metadata Base and Talking on Edge vs Node Runtimes

برنامه مالی: ایجاد رابط کاربری و اجزای سازنده Finance App: Creating UI and Components

• بخش مقدمه: ایجاد رابط کاربری و کامپوننت ها Section Introduction: Creating UI and Components

• ایجاد پروژه و زمین بازی Creating the Project and Playground

• جزء سرصفحه The Header Component

• جزء روند مالی Financial Trend Component

• جزء روند مالی - پول بیشتر یا کمتر؟ Financial Trend Component - More or Less Money?

• قلاب قالب‌بندی ارز Currency Formatting Hook

• جزء مورد معامله Transaction Item Component

• جزء خلاصه تراکنش Transaction Summary Component

• ایجاد دکمه ها Creating Buttons

• ورودی های فرم یک ظاهر طراحی شده Styling Form Inputs

• اجزای ورودی فرم سفارشی React Custom React Form Input Components

برنامه مالی: حالت تاریک، واکشی و نمایش داده ها Finance App: Dark Mode, Fetching and Displaying Data

• مقدمه بخش: حالت تاریک، واکشی و نمایش داده ها Section Introduction: Dark Mode, Fetching and Displaying Data

• اضافه کردن حالت روشن/تاریک Adding Light/Dark Mode Toggle

• افزودن سرور JSON به عنوان منبع داده موقت Adding JSON Server as Temporary Data Source

• نمایش لیست معاملات Displaying Transaction List

• گروه بندی معاملات بر اساس تاریخ Grouping Transactions by Date

• جداکننده و اسکلت بارگیری Separator & Loading Skeleton

• بسته بندی تراکنش در حال بارگیری در حالت تعلیق Wrapping Transaction Loading in Suspense

• واکشی روندهای مالی Fetching Finance Trends

• ایجاد یک عقب‌نشینی تعلیق برای روندها Making a Suspense Fallback for Trends

برنامه مالی: فرم ها، اعتبارسنجی، اقدامات سرور Finance App: Forms, Validation, Server Actions

• مقدمه بخش: فرم ها، اعتبارسنجی، اقدامات سرور Section Introduction: Forms, Validation, Server Actions

• افزودن صفحه و پیوند تراکنش Adding Transaction Page & Link

• اضافه کردن علامت گذاری فرم تراکنش Adding Transaction Form Markup

• معرفی React Hook Form Introducing React Hook Form

• اعتبار سنجی فرم در فرم React Hook Form Validation in React Hook Form

• معرفی کتابخانه زود Introducing the Zod Library

• افزودن طرحواره Zod برای تراکنش ها Adding a Zod Schema for Transactions

• استفاده از متغیرهای محیطی Using Environment Variables

• ذخیره سازی داده های فرم Storing Form Data

• اقدامات سرور در عمل Server Actions in Action

• اقدامات سرور توضیح داده شده است Server Actions Explained

• مولفه خطای فرم Form Error Component

برنامه مالی: اضافه کردن Supabase، کاشت داده ها، رسیدگی به خطاها Finance App: Adding Supabase, Seeding Data, Handling Errors

• مقدمه بخش: افزودن Supabase، Seed Data، Handling Errors Section Introduction: Adding Supabase, Seeding Data, Handling Errors

• Supabase چیست؟ What is Supabase?

• راه اندازی و اتصال پروژه Next.js به Supbase! Setting Up and Connecting the Next.js Project to Supbase!

• اضافه کردن ستون ها به جدول معاملات Adding Columns to Transactions Table

• خواندن معاملات از Postgres Reading Transactions from Postgres

• تولید داده های بذر Generating Seed Data

• افزودن داده به Postgres Adding Data to Postgres

• اقدامات سرور - رسیدگی به خطاها Server Actions - Handling Errors

• اقدامات سرور - اعتبارسنجی داده های سرور Server Actions - Server Data Validation

• مرز خطا برای روند و حذف سرور JSON Error Boundary for Trend and Removing JSON Server

برنامه مالی: فرم های پیچیده تر، اعتبارسنجی و پرس و جوهای پایگاه داده Finance App: More Complex Forms, Validation and Database Queries

• مقدمه بخش: فرم های پیچیده تر، اعتبارسنجی و پرس و جوهای پایگاه داده Section Introduction: More Complex Forms, Validation and Database Queries

• فرم های پویا متوسط Intermediate Dynamic Forms

• تبدیل پیچیده و اعتبارسنجی با Zod Complex Transformation and Validation with Zod

• روند مالی - تابع Postgres محاسبه SUM Finance Trend - Postgres Function Calculating SUM

• Finance Trend - فراخوانی تابع Postgres با استفاده از RPC Finance Trend - Calling Postgres Function using RPC

• محدوده تاریخ معاملات - انتخاب گزینه Transactions Date Range - Selecting Option

• محدوده تاریخ معاملات - مبلغ فعلی و قبلی را در Postgres دریافت کنید Transactions Date Range - Get Current & Previous Sum in Postgres

• محدوده تاریخ معاملات - نمایش روند Transactions Date Range - Display the Trend

برنامه مالی: فیلتر کردن و صفحه بندی معاملات Finance App: Transactions Filtering and Pagination

• بخش مقدمه: فیلتر کردن و صفحه بندی معاملات Section Introduction: Transactions Filtering and Pagination

• واکشی تراکنش ها با استفاده از تابع Postgres Fetching Transactions Using Postgres Function

• Refactoring به یک کامپوننت کلاینت با بسته بندی اجزای سرور Refactoring to a Client Component with Server Component Wrapper

• بارگذاری عملکرد بیشتر (صفحه بندی) Load More Functionality (Pagination)

• بهبودهای UX (بدون داده بیشتر، بارگیری اسپینر و غیره) UX Improvements (No More Data, Loading Spinner etc)

برنامه مالی: به روز رسانی و حذف داده ها Finance App: Updating and Deleting Data

• بخش مقدمه: به روز رسانی و حذف داده ها Section Introduction: Updating and Deleting Data

• اجرای ساده و ساده دکمه تراکنش حذف Naive Implementation of Delete Transaction Button

• رابط کاربری تأیید و بارگیری را حذف کنید Delete Confirmation & Loading UI

• حذف تراکنش از لیست Removing Transaction from the List

• مدیریت تغییر صفحه بندی Handling the Pagination Shift

• صفحه ویرایش تراکنش و واکشی داده های تراکنش Transaction Editing Page & Fetching Transaction Data

• فرم ویرایش تراکنش و رسیدگی 404 Transaction Editing Form and Handling 404

• به‌روزرسانی عملکرد سرور تراکنش (به‌روزرسانی داده‌ها در Supabase) Update Transaction Server Action (Updating Data in Supabase)

• در حال بارگیری رابط کاربری برای فرم ویرایش Loading UI for the Edit Form

برنامه مالی: احراز هویت کاربر (حساب های کاربری، ورود به سیستم، خروج از سیستم) Finance App: User Authentication (User Accounts, Signing In, Signing Out)

• بخش مقدمه: احراز هویت کاربر Section Introduction: User Authentication

• طرح و صفحه احراز هویت Authentication Layout and Page

• فرم ورود و فراخوانی اقدام سرور از طریق ارسال فرم Login Form & Invoking Server Action Through Form Submission

• فرم وضعیت معلق Form Pending State

• رسیدگی به خطاهای عملکرد سرور فرم Handling Form Server Action Errors

• بررسی اجمالی Supabase Auth و Auth بدون رمز عبور (پیوندهای جادویی) Supabase Auth Overview and Passwordless Auth (Magic Links)

• چگونه احراز هویت در Supabase (و به طور کلی) کار می کند How the Authentication Works in Supabase (and in General)

• Route Handler چیست؟ What's a Route Handler?

• کنترل کننده مسیر ورود به سیستم Sign-In Route Handler

• پیکربندی قالب‌های ایمیل Supabase و تست فرآیند احراز هویت Configuring Supabase Email Templates and Testing the Auth Process

• آیا کاربر احراز هویت شده است؟ Is User Authenticated?

• میان افزار چیست؟ ایجاد یک میان افزار Refresh Token Supabase What's a Middleware? Creating a Supabase Token Refresh Middleware

• خروج از سیستم کاربران Signing Users Out

برنامه مالی: مجوز کاربر (مدیریت مجوزها و دسترسی) Finance App: User Authorization (Managing Permissions and Access)

• بخش معرفی: مجوز کاربر Section Introduction: User Authorization

• مجوز چیست؟ What's Authorization?

• محافظت از مسیرها در میان افزار Protecting Routes in Middleware

• Postgres RLS چیست؟ چگونه با Supabase Auth ادغام می شود؟ What's Postgres RLS? How it Integrates with Supabase Auth?

• کاربران را با تراکنش ها پیوند دهید و خط مشی RLS را درج کنید Link Users with Transactions and INSERT RLS Policy

• افزودن خط مشی های RLS برای SELECT، UPDATE و DELETE Adding RLS Policies for SELECT, UPDATE and DELETE

• به روز رسانی اسکریپت بذر با کاربران Updating the Seeding Script with Users

برنامه مالی: آپلود و مدیریت فایل ها Finance App: Uploading and Managing Files

• بخش مقدمه: آپلود و مدیریت فایل ها Secion Introduction: Uploading and Managing Files

• تنظیمات چیدمان و پیمایش جانبی Settings Layout and Side Navigation

• ذخیره سازی سوپا بیس، سطل ها و RLS Supabase Storage, Buckets and RLS

• ایجاد یک سطل و تنظیم سیاست های امنیتی Creating a Bucket and Setting up Security Policies

• فرم آپلود تصویر Image Uploading Form

• اقدام سرور آپلود تصویر Image Uploading Server Action

• استایل دادن به ورودی فایل Styling the File Input

• به روز رسانی متادیتای کاربر Updating the User Metadata

• نمایش آواتار کاربر (URLهای امضا شده) Displaying User Avatar (Signed URLs)

• مؤلفه هشدار Alert Component

• مدیریت بهتر خطا در عملکردهای سرور More Graceful Error Handling in Server Actions

• حذف فایل ها (آواتارهای قدیمی) Deleting Files (Old Avatars)

برنامه مالی: تنظیمات کاربر، اعتبارسنجی فرم سمت سرور Finance App: User Settings, Server Side Form Validation

• معرفی بخش: تنظیمات کاربر، اعتبارسنجی فرم سمت سرور Section Introduction: User Settings, Server Side Form Validation

• اجزای هشدار موفقیت و خطا - Refactor Success and Error Alert Components - Refactor

• صفحه و فرم تنظیمات داربست Scaffolding Settings Page and Form

• تنظیمات کاربر - ورودی ها و بارگیری UI User Settings - Inputs and Loading UI

• تنظیمات کاربر - ذخیره و اعمال تنظیمات User Settings - Saving and Applying Settings

• تنظیمات کاربر - اعتبارسنجی سمت سرور داده با استفاده از Zod User Settings - Validating Data Server Side using Zod

• نمایش خطاهای اعتبارسنجی (سمت سرور). Displaying the (Server Side) Validation Errors

برنامه مالی: پخش زنده! Finance App: Going Live!

• پخش زنده! Going Live!