آموزش Next.js & React - راهنمای کامل (شامل دو مسیر!)

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

شروع شدن Getting Started

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

• Next.js چیست؟ و چرا از آن استفاده می کنید؟ What Is Next.js? And Why Would You Use It?

• ویژگی کلیدی: ارائه صفحه سمت سرور (پیش) Key Feature: Server-side Page (Pre-)Rendering

• ویژگی کلیدی: مسیریابی مبتنی بر فایل Key Feature: File-based Routing

• ویژگی کلیدی: ساخت برنامه های Fullstack React! Key Feature: Build Fullstack React Apps!

• به انجمن آموزشی ما بپیوندید! Join Our Learning Community!

• ایجاد یک پروژه NextJS و راه اندازی IDE ما Creating a NextJS Project & Setting Up Our IDE

• تجزیه و تحلیل پروژه ایجاد شده Analyzing The Created Project

• اولین نسخه آزمایشی: NextJS در عمل! A First Demo: NextJS In Action!

• درباره این دوره و طرح کلی دوره About This Course & Course Outline

• شرکت در این دوره: دو گزینه شما Taking This Course: Your Two Options

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• دانلود کد دوره Downloading Course Code

• منابع دوره و نسخه های وابستگی Course Resources & Dependency Versions

• منابع ماژول Module Resources

اختیاری: React Refresher Optional: React Refresher

• معرفی ماژول Module Introduction

• ReactJS چیست؟ What is ReactJS?

• چرا ReactJS و اولین نسخه نمایشی Why ReactJS & A First Demo

• ساخت اپلیکیشن های تک صفحه ای (SPA) Building Single-Page Applications (SPAs)

• واکنش جایگزین React Alternatives

• ایجاد یک پروژه React جدید Creating a New React Project

• راه اندازی یک ویرایشگر کد Setting Up A Code Editor

• واکنش 18 React 18

• شیرجه به پروژه ایجاد شده Diving Into The Created Project

• چگونه واکنش نشان می دهد و درک کامپوننت ها How React Works & Understanding Components

• کار و استایل‌سازی بیشتر اجزا با کلاس‌های CSS More Component Work & Styling With CSS Classes

• ساخت و استفاده مجدد از قطعات Building & Re-using Components

• انتقال داده با لوازم جانبی و محتوای پویا Passing Data With Props & Dynamic Content

• رسیدگی به رویدادها Handling Events

• افزودن اجزای بیشتر Adding More Components

• معرفی ایالت Introducing State

• کار با "Event Props" Working with "Event Props"

• از نسخه مناسب روتر React استفاده کنید Use The Right React Router Version

• اضافه کردن مسیریابی Adding Routing

• افزودن پیوندها و ناوبری Adding Links & Navigation

• محدوده بندی سبک های مؤلفه با ماژول های CSS Scoping Component Styles With CSS Modules

• خروجی لیست داده ها و کامپوننت ها Outputting Lists Of Data & Components

• اضافه کردن اجزای بیشتر Adding Even More Components

• ایجاد اجزای "Wrapper". Creating "Wrapper" Components

• کار با فرم ها Working With Forms

• دریافت ورودی کاربر و رسیدگی به ارسال فرم Getting User Input & Handling Form Submission

• آماده سازی برنامه برای درخواست های Http و افزودن یک Backend Preparing The App For Http Requests & Adding a Backend

• ارسال یک درخواست Http POST Sending a POST Http Request

• پیمایش به صورت برنامه ای Navigating Programmatically

• شروع با واکشی داده ها Getting Started with Fetching Data

• با استفاده از قلاب "useEffect". Using the "useEffect" Hook

• معرفی React Context Introducing React Context

• به روز رسانی وضعیت بر اساس وضعیت قبلی Updating State Based On Previous State

• استفاده از Context در Components Using Context In Components

• استفاده بیشتر از زمینه More Context Usage

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

صفحات و مسیریابی مبتنی بر فایل Pages & File-based Routing

• معرفی ماژول Module Introduction

• راه اندازی شروع ما Our Starting Setup

• "مسیریابی مبتنی بر فایل" چیست؟ و چرا مفید است؟ What Is "File-based Routing"? And Why Is It Helpful?

• افزودن صفحه اول Adding A First Page

• افزودن یک فایل مسیر نامگذاری شده/استاتیک Adding a Named / Static Route File

• کار با مسیرها و مسیرهای تودرتو Working with Nested Paths & Routes

• افزودن مسیرها و مسیرهای پویا Adding Dynamic Paths & Routes

• استخراج داده های بخش مسیر پویا (مسیرهای پویا) Extracting Dynamic Path Segment Data (Dynamic Routes)

• ساخت مسیرها و مسیرهای پویا تودرتو Building Nested Dynamic Routes & Paths

• افزودن Catch-All Routes Adding Catch-All Routes

• پیمایش با مؤلفه «پیوند». Navigating with the "Link" Component

• پیمایش به مسیرهای پویا Navigating To Dynamic Routes

• روشی متفاوت برای تنظیم لینک Hrefs A Different Way Of Setting Link Hrefs

• پیمایش به صورت برنامه ای Navigating Programmatically

• افزودن صفحه سفارشی 404 Adding a Custom 404 Page

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

زمان پروژه: کار با مسیریابی مبتنی بر فایل Project Time: Working with File-based Routing

• معرفی ماژول Module Introduction

• برنامه ریزی پروژه Planning The Project

• راه اندازی صفحات اصلی Setting Up The Main Pages

• افزودن داده های ساختگی و فایل های استاتیک Adding Dummy Data & Static Files

• اضافه کردن Regular React Components Adding Regular React Components

• افزودن بیشتر React Components و Connecting Components Adding More React Components & Connecting Components

• اجزای سبک در پروژه های Next.js Styling Components In Next.js Projects

• <Link> و NextJS 13 <Link> & NextJS 13

• اضافه کردن دکمه ها و آیکون ها Adding Buttons & Icons

• افزودن صفحه "جزئیات رویداد" (مسیر پویا) Adding the "Event Detail" Page (Dynamic Route)

• افزودن یک کامپوننت بسته بندی طرح بندی عمومی Adding a General Layout Wrapper Component

• کار بر روی صفحه "همه رویدادها". Working on the "All Events" Page

• افزودن یک فرم فیلتر برای فیلتر کردن رویدادها Adding a Filter Form for Filtering Events

• پیمایش به صفحه "رویدادهای فیلتر شده" بصورت برنامه ای Navigating to the "Filtered Events" Page Progammatically

• استخراج داده ها در صفحه Catch-All Extracting Data on the Catch-All Page

• مراحل پایانی Final Steps

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

پیش رندر صفحه و واکشی داده Page Pre-Rendering & Data Fetching

• معرفی ماژول Module Introduction

• مشکل برنامه‌های React سنتی (و واکشی داده‌ها) The Problem With Traditional React Apps (and Data Fetching)

• NextJS چگونه صفحات را آماده و پیش رندر می کند How NextJS Prepares & Pre-renders Pages

• معرفی Static Generation با "getStaticProps" Introducing Static Generation with "getStaticProps"

• پیش‌فرض NextJS به‌صورت پیش‌فرض! NextJS Pre-renders By Default!

• افزودن "getStaticProps" به صفحات Adding "getStaticProps" To Pages

• اجرای کد سمت سرور و استفاده از سیستم فایل Running Server-side Code & Using the Filesystem

• نگاهی به پشت صحنه A Look Behind The Scenes

• استفاده از تولید استاتیک افزایشی (ISR) Utilizing Incremental Static Generation (ISR)

• ISR: نگاهی به پشت صحنه ISR: A Look Behind The Scenes

• نگاهی دقیق تر به "getStaticProps" و گزینه های پیکربندی A Closer Look At "getStaticProps" & Configuration Options

• کار با پارامترهای دینامیک Working With Dynamic Parameters

• معرفی "getStaticPaths" برای صفحات پویا Introducing "getStaticPaths" For Dynamic Pages

• استفاده از "getStaticPaths" Using "getStaticPaths"

• "getStaticPaths" و واکشی از قبل پیوند: پشت صحنه "getStaticPaths" & Link Prefetching: Behind The Scenes

• کار با صفحات بازگشتی Working With Fallback Pages

• بارگذاری پویا مسیرها Loading Paths Dynamically

• صفحات بازگشتی و صفحات "یافت نشد". Fallback Pages & "Not Found" Pages

• معرفی "getServerSideProps" برای رندر سمت سرور (SSR) Introducing "getServerSideProps" for Server-side Rendering (SSR)

• استفاده از "getServerSideProps" برای رندر سمت سرور Using "getServerSideProps" for Server-side Rendering

• "getServerSideProps" و زمینه آن "getServerSideProps" and its Context

• صفحات پویا و "getServerSideProps" Dynamic Pages & "getServerSideProps"

• "getServerSideProps": پشت صحنه "getServerSideProps": Behind The Scenes

• معرفی واکشی داده های سمت مشتری (و زمان استفاده از آن) Introducing Client-Side Data Fetching (And When To Use It)

• پیاده سازی واکشی داده های سمت مشتری Implementing Client-Side Data Fetching

• نکته ای درباره useSWR A Note About useSWR

• با استفاده از "useSWR" NextJS Hook Using the "useSWR" NextJS Hook

• ترکیب Pre-Fetching با Client-Side Fetching Combining Pre-Fetching With Client-Side Fetching

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

زمان پروژه: پیش نمایش صفحه و واکشی داده ها Project Time: Page Pre-rendering & Data Fetching

• معرفی ماژول Module Introduction

• آماده سازی Preparations

• افزودن تولید سایت ایستا (SSG) در صفحه اصلی Adding Static Site Generation (SSG) On The Home Page

• بارگیری داده ها و مسیرها برای صفحات پویا Loading Data & Paths For Dynamic Pages

• بهینه سازی واکشی داده ها Optimizing Data Fetching

• کار بر روی صفحه "همه رویدادها". Working on the "All Events" Page

• استفاده از رندر سمت سرور (SSR) Using Server-side Rendering (SSR)

• افزودن واکشی داده های سمت مشتری Adding Client-Side Data Fetching

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

بهینه سازی برنامه های NextJS Optimizing NextJS Apps

• معرفی ماژول Module Introduction

• تجزیه و تحلیل نیاز به ابرداده "سر". Analyzing the Need for "head" Metadata

• پیکربندی محتوای "سر". Configuring the "head" Content

• افزودن محتوای "سر" پویا Adding Dynamic "head" Content

• استفاده مجدد از منطق در داخل یک کامپوننت Reusing Logic Inside A Component

• کار با فایل "_app.js" (و چرا) Working with the "_app.js" File (and Why)

• ادغام "سر" محتوا Merging "head" Content

• فایل "_document.js" (و چه کاری انجام می دهد) The "_document.js" File (And What It Does)

• نگاهی دقیق تر به تصاویر ما A Closer Look At Our Images

• بهینه سازی تصاویر با مولفه و ویژگی "تصویر بعدی". Optimizing Images with the "Next Image" Component & Feature

• نگاهی به مستندات "تصویر بعدی". Taking A Look At The "Next Image" Documentation

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

افزودن کد Backend با مسیرهای API (Fullstack React) Adding Backend Code with API Routes (Fullstack React)

• معرفی ماژول Module Introduction

• "مسیرهای API" چیست؟ What are "API Routes"?

• نوشتن اولین مسیر API ما Writing Our First API Route

• آماده سازی فرم Frontend Preparing the Frontend Form

• تجزیه درخواست ورودی و اجرای کد سمت سرور Parsing The Incoming Request & Executing Server-side Code

• ارسال درخواست به مسیرهای API Sending Requests To API Routes

• استفاده از مسیرهای API برای دریافت داده Using API Routes To Get Data

• استفاده از مسیرهای API برای پیش رندر کردن صفحات Using API Routes For Pre-Rendering Pages

• ایجاد و استفاده از مسیرهای پویا API Creating & Using Dynamic API Routes

• کاوش در روش های مختلف ساختار فایل های مسیر API Exploring Different Ways Of Structuring API Route Files

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

زمان پروژه: مسیرهای API Project Time: API Routes

• معرفی ماژول Module Introduction

• شروع راه اندازی و یک چالش برای شما! Starting Setup & A Challenge For You!

• افزودن مسیر خبرنامه Adding a Newsletter Route

• افزودن مسیرهای API نظرات Adding Comments API Routes

• اتصال Frontend به مسیرهای API نظرات Connecting the Frontend To the Comments API Routes

• راه اندازی یک پایگاه داده MongoDB Setting Up A MongoDB Database

• اجرای پرس و جوهای MongoDB از داخل مسیرهای API Running MongoDB Queries From Inside API Routes

• درج نظرات در پایگاه داده Inserting Comments Into The Database

• دریافت داده از پایگاه داده Getting Data From The Database

• اضافه کردن Error Handling Adding Error Handling

• بیشتر رسیدگی به خطا More Error Handling

• نکته پایانی در مورد اتصالات MongoDB A Final Note On MongoDB Connections

• خلاصه ماژول Module Summary

• بهبود: دریافت نظرات برای یک رویداد خاص Improvement: Getting Comments For A Specific Event

• منابع ماژول Module Resources

کار با حالت گسترده برنامه (React Context) Working with App-wide State (React Context)

• معرفی ماژول Module Introduction

• وضعیت هدف ما و پروژه شروع Our Target State & Starting Project

• ایجاد یک React Context جدید Creating a New React Context

• اضافه کردن حالت متن Adding Context State

• استفاده از داده های زمینه در کامپوننت ها Using Context Data In Components

• مثال: راه اندازی و نمایش اعلان ها Example: Triggering & Showing Notifications

• مثال: حذف اعلان ها (به صورت خودکار) Example: Removing Notifications (Automatically)

• راه حل چالش Challenge Solution

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

مثال برنامه کامل: یک وبلاگ کامل از A تا Z بسازید Complete App Example: Build a Full Blog A to Z

• معرفی ماژول Module Introduction

• راه اندازی صفحات اصلی Setting Up The Core Pages

• شروع کار با صفحه اصلی Getting Started With The Home Page

• اضافه کردن مولفه "قهرمان". Adding The "Hero" Component

• اضافه کردن طرح بندی و ناوبری Adding Layout & Navigation

• زمان اضافه کردن یک ظاهر طراحی و یک لوگو Time To Add Styling & A Logo

• شروع کار روی قسمت "پست های ویژه". Starting Work On The "Featured Posts" Part

• افزودن یک شبکه پست و موارد پست Adding A Post Grid & Post Items

• ارائه داده های پست ساختگی Rendering Dummy Post Data

• افزودن صفحه "همه پست ها". Adding the "All Posts" Page

• کار بر روی صفحه "جزئیات پست". Working On The "Post Detail" Page

• رندر کردن Markdown به عنوان JSX Rendering Markdown As JSX

• افزودن فایل های Markdown به عنوان منبع داده Adding Markdown Files As A Data Source

• افزودن توابع برای خواندن و واکشی داده ها از فایل های Markdown Adding Functions To Read & Fetch Data From Markdown Files

• استفاده از داده های Markdown برای رندر کردن پست ها Using Markdown Data For Rendering Posts

• ارائه صفحات و مسیرهای پست پویا Rendering Dynamic Post Pages & Paths

• رندر کردن عناصر HTML سفارشی با React Markdown Rendering Custom HTML Elements with React Markdown

• رندر کردن تصاویر با مولفه "تصویر بعدی" (از Markdown) Rendering Images With The "Next Image" Component (From Markdown)

• رندر کردن قطعه کد از Markdown Rendering Code Snippets From Markdown

• آماده سازی فرم تماس Preparing The Contact Form

• افزودن مسیر API تماس Adding The Contact API Route

• ارسال داده از مشتری به مسیر API Sending Data From The Client To The API Route

• ذخیره پیام ها با MongoDB در یک پایگاه داده Storing Messages With MongoDB In A Database

• افزودن بازخورد رابط کاربری با اعلان‌ها Adding UI Feedback With Notifications

• افزودن داده های "سر". Adding "head" Data

• افزودن یک فایل "_document.js". Adding A "_document.js" File

• استفاده از پرتال های React Using React Portals

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

استقرار برنامه های NextJS Deploying NextJS Apps

• معرفی ماژول Module Introduction

• ساختن برنامه های NextJS: گزینه های شما Building NextJS Apps: Your Options

• مراحل کلیدی استقرار Key Deployment Steps

• بررسی و بهینه سازی کد ما Checking & Optimizing Our Code

• فایل پیکربندی NextJS و کار با متغیرهای محیطی The NextJS Config File & Working With Environment Variables

• اجرای آزمایشی ساخت و کاهش اندازه کد Running a Test Build & Reducing Code Size

• یک مثال استقرار کامل (به Vercel) A Full Deployment Example (To Vercel)

• یادداشتی در مورد Github و اعتبارنامه های مخفی A Note On Github & Secret Credentials

• با استفاده از ویژگی "صادرات". Using the "export" Feature

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

افزودن احراز هویت Adding Authentication

• معرفی ماژول Module Introduction

• پروژه شروع ما Our Starting Project

• احراز هویت (در برنامه‌های React و NextJS) چگونه کار می‌کند؟ How Does Authentication Work (In React & NextJS Apps)?

• باید بخوانید: نسخه راست بعدی اعتبار را نصب کنید Must Read: Install the Right next-auth Version

• با استفاده از کتابخانه "next-auth". Using The "next-auth" Library

• افزودن مسیر API ثبت نام کاربر Adding A User Signup API Route

• ارسال درخواست های ثبت نام از فرانت اند Sending Signup Requests From The Frontend

• بهبود ثبت نام با آدرس های ایمیل منحصر به فرد Improving Signup With Unique Email Addresses

• افزودن «ارائه‌دهنده تأیید اعتبار» و منطق ورود کاربر Adding the "Credentials Auth Provider" & User Login Logic

• ارسال یک درخواست "ورود به سیستم" از The Frontend Sending a "Signin" Request From The Frontend

• مدیریت جلسه فعال (On The Frontend) Managing Active Session (On The Frontend)

• افزودن خروج کاربر Adding User Logout

• افزودن محافظ صفحه سمت مشتری (محافظت مسیر) Adding Client-Side Page Guards (Route Protection)

• افزودن محافظ صفحه سمت سرور (و زمان استفاده از کدام رویکرد) Adding Server-Side Page Guards (And When To Use Which Approach)

• محافظت از صفحه "Auth". Protecting the "Auth" Page

• با استفاده از مؤلفه ارائه دهنده جلسه «next-auth». Using the "next-auth" Session Provider Component

• تجزیه و تحلیل بیشتر الزامات احراز هویت Analyzing Further Authentication Requirements

• محافظت از مسیرهای API Protecting API Routes

• اضافه کردن منطق "تغییر رمز عبور". Adding the "Change Password" Logic

• ارسال یک درخواست "تغییر رمز عبور" از فرانت اند Sending a "Change Password" Request From The Frontend

• خلاصه ماژول و مراحل نهایی Module Summary & Final Steps

• منابع ماژول Module Resources

اختیاری: خلاصه NextJS Optional: NextJS Summary

• معرفی ماژول Module Introduction

• NextJS چیست؟ What is NextJS?

• ویژگی کلیدی: رندر صفحات (پیش از) سمت سرور Key Feature: Server-side (Pre-) Rendering of Pages

• ویژگی کلیدی: مسیریابی مبتنی بر فایل Key Feature: File-based Routing

• ویژگی کلیدی: ساخت برنامه های Fullstack با سهولت Key Feature: Build Fullstack Apps With Ease

• ایجاد یک پروژه NextJS و راه اندازی IDE Creating a NextJS Project & IDE Setup

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• افزودن صفحات اول به پروژه Adding First Pages To The Project

• افزودن صفحات/مسیرهای تودرتو Adding Nested Pages / Paths

• ایجاد صفحات پویا Creating Dynamic Pages

• استخراج داده های مسیر پویا Extracting Dynamic Route Data

• پیوند بین صفحات Linking Between Pages

• پیش به سوی یک پروژه بزرگتر! Onwards To A Bigger Project!

• آماده سازی صفحات پروژه ما Preparing Our Project Pages

• ارائه فهرستی از جلسات (ساختگی). Rendering A List Of (Dummy) Meetups

• افزودن فرم برای افزودن جلسات Adding A Form For Adding Meetups

• اجزای فایل & Wrapper "_app.js". The "_app.js" File & Wrapper Components

• ناوبری برنامه ای Programmatic Navigation

• اضافه کردن اجزای سفارشی و استایل با ماژول های CSS Adding Custom Components & Styling With CSS Modules

• چگونه پیش رندر صفحه NextJS واقعاً کار می کند How NextJS Page Pre-Rendering Actually Works

• معرفی واکشی داده برای تولید صفحه (getStaticProps) Introducing Data Fetching For Page Generation (getStaticProps)

• بیشتر تولید سایت استاتیک (SSG) با getStaticProps More Static Site Generation (SSG) With getStaticProps

• کاوش getServerSideProps Exploring getServerSideProps

• کار با پارامترهای مسیر پویا در getStaticProps Working With Dynamic Path Params In getStaticProps

• صفحات پویا و getStaticProps و getStaticPaths Dynamic Pages & getStaticProps & getStaticPaths

• معرفی مسیرهای API Introducing API Routes

• اتصال و جستجو در پایگاه داده MongoDB Connecting & Querying a MongoDB Database

• ارسال درخواست های HTTP به مسیرهای API Sending HTTP Requests To API Routes

• دریافت داده از پایگاه داده (برای پیش نمایش صفحه) Getting Data From The Database (For Page Pre-Rendering)

• دریافت اطلاعات و مسیرهای جزئیات Meetup Getting Meetup Detail Data & Paths

• افزودن ابرداده "سر" به صفحات Adding "head" Metadata To Pages

• استقرار پروژه های NextJS Deploying NextJS Projects

• کار با صفحات بازگشتی و استقرار مجدد Working With Fallback Pages & Re-Deploying

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

• جایزه! Bonus!