آموزش JS بعدی: راهنمای کامل توسعه دهنده

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

از اینجا شروع کنید! Get Started Here!

• نحوه یادگیری سریع NextJS How to Learn NextJS Quickly

• بررسی اجمالی پروژه Project Overview

• مسیریابی مبتنی بر فایل File-Based Routing

• اضافه کردن مسیرهای اضافی Adding Additional Routes

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

• رابط کاربری مشترک با Layouts Common UI with Layouts

• استراتژی ساختار پروژه Project Structure Strategy

• میانبر واردات مطلق مسیر Absolute Path Import Shortcut

• فایل های تصویری Image Files

• افزودن تصاویر Adding Images

• بیشتر در مورد کامپوننت تصویر More on the Image Component

• افزودن یک مؤلفه ارائه قابل استفاده مجدد Adding a Reusable Presentation Component

• اضافه کردن یک ظاهر طراحی شده Adding Some Styling

• استقرار تولید با Vercel Production Deployment with Vercel

• به انجمن ما بپیوندید! Join Our Community!

• نمودارهای دوره Course Diagrams

تغییر داده ها با جهش Changing Data with Mutations

• نمای کلی برنامه App Overview

• راه اندازی پروژه Project Setup

• افزودن یک صفحه ایجاد Adding a Create Page

• ایجاد یک مشتری Prisma Creating a Prisma Client

• افزودن فرم ایجاد Adding a Creation Form

پخش جریانی محتوا با اجزای سرور React Streaming Content with React Server Components

• معرفی عملیات سرور Introducing Server Actions

• شیرجه عمیق تر به اقدامات سرور A Deeper Dive into Server Actions

• اجزای سرور در مقابل اجزای مشتری Server Components vs Client Components

• واکشی داده ها با اجزای سرور Fetching Data with Server Components

• اضافه کردن مسیرهای پویا Adding Dynamic Paths

• واکشی سوابق خاص Fetching Particular Records

• صفحات سفارشی یافت نشد Custom Not Found Pages

• بارگیری خودکار اسپینرها Automatic Loading Spinnners

• چند کار سریع A Few Quick Tasks

• استایل نمایش صفحه Styling the Show Page

• پیوند دادن به صفحه ویرایش Linking to the Edit Page

• نمایش کامپوننت کلاینت در کامپوننت سرور Showing a Client Component in a Server Component

• افزودن ویرایشگر موناکو Adding the Monaco Editor

• مدیریت تغییرات ویرایشگر Handling Editor Changes

اقدامات سرور با جزئیات عالی Server Actions in Great Detail

• اقدامات سرور در اجزای سرویس گیرنده Server Actions in Client Components

• اقدامات سرور در یک فایل جداگانه Server Actions in a Separate File

• گزینه هایی برای فراخوانی اقدامات سرور از مؤلفه های سرویس گیرنده Options for Calling Server Actions from Client Components

• فراخوانی یک اقدام سرور از یک مؤلفه مشتری Calling a Server Action from a Client Component

• حذف رکورد با اکشن سرور Deleting a Record with a Server Action

فرم های سرور با قلاب UseFormState Server Forms with the UseFormState Hook

• درک UseFormState Hook Understanding the UseFormState Hook

• UseForm State in Action UseForm State in Action

• افزودن اعتبار سنجی فرم Adding the Form Validation

• Gotchas در اطراف رسیدگی به خطا Gotchas Around Error Handling

درک سیستم ذخیره سازی Next Understanding Next's Caching System

• رفتار فوق العاده غیر منتظره Super Unexpected Behavior

• سیستم کش مسیر کامل The Full Route Cache System

• چه چیزی یک مسیر استاتیک یا پویا را می سازد What Makes a Static or Dynamic Route

• زمان استفاده از هر کنترل کش When to Use Each Cache Control

• راهنما، صفحه من در حال نمایش داده های قدیمی است! Help, My Page is Showing Old Data!

• فعال کردن کش با GenerateStaticParams Enabling Caching with GenerateStaticParams

• ذخیره مسیرهای پویا Caching Dynamic Routes

احراز هویت با Next-Auth Authentication with Next-Auth

• بررسی اجمالی پروژه Project Overview

• کتابخانه های مهم در پروژه ما Critical Libraries in Our Project

• نصب و راه اندازی NextUI NextUI Installation and Setup

• فایل طرحواره پریسما Prisma Schema File

• راه اندازی پایگاه داده Database Setup

• راه اندازی OAuth OAuth Setup

• تنظیم بعدی تأیید Next-Auth Setup

• نظریه پشت OAuth The Theory Behind OAuth

• Wrapping Auth در عملکردهای سرور Wrapping Auth in Server Actions

• وارد شوید، از سیستم خارج شوید و وضعیت احراز هویت را بررسی کنید Sign In, Sign out, and Checking Auth Status

• فرآیند طراحی اولیه Upfront Design Process

• چرا Path Helpers؟ Why Path Helpers?

• پیاده سازی راهنما Path Helper Implementation

• ایجاد ساختار مسیریابی Creating the Routing Structure

• حذف عملکردهای سرور Stubbing Out Server Actions

• برنامه ریزی استراتژی های اعتباربخشی مجدد Planning Revalidating Strategies

• ساخت هدر Building the Header

• نمایش دکمه های ورود و خروج Displaying the Sign In and Sign Out Buttons

• فعال کردن خروج از سیستم Enabling Sign Out

• مسائل مربوط به ذخیره سازی بیشتر More Caching Issues

• کش استاتیک هنگام استفاده از Auth Static Caching While Using Auth

• ایجاد موضوعات Creating Topics

• ایجاد فرم Popover Creating a Popover Form

• دریافت اطلاعات فرم Receiving Form Data

• افزودن اعتبار سنجی فرم با Zod Adding Form Validation with Zod

• یادآوری در قلاب UseFormState Reminder on the UseFormState Hook

• رفع خطاهای نوع UseFormState Fixing UseFormState Type Errors

• در اینجا نوع FormState ما است Here's Our FormState Type

• نمایش خطاهای اعتبارسنجی Displaying Validation Errors

• رسیدگی به خطاهای فرم عمومی Handling General Form Errors

• رسیدگی به خطاهای پایگاه داده در فرم ها Handling Database Errors in Forms

استفاده از داده ها - پرس و جوهای پایگاه داده Using Data - Database Queries

• نمایش اسپینرهای در حال بارگذاری با UseFormStatus Showing Loading Spinners with UseFormStatus

• واکشی و فهرست کردن محتوا از Prisma Fetching and Listing Content from Prisma

• داربست صفحه نمایش موضوع Scaffolding the Topic Show Page

• نمایش فرم ایجاد Displaying a Creation Form

• اعمال اعتبارسنجی برای ایجاد پست Applying Validation to Post Creation

• بررسی وضعیت احراز هویت Checking Authentication Status

• ارسال ارگ های اضافی به یک اکشن سرور Passing Additional Args to a Server Action

• ایجاد رکورد Creating the Record

• چند فایل پروژه A Few Project Files

• ادغام چند فایل Merging a Few Files

• ملاحظات در مورد مکان واکشی داده ها Considerations Around Where to Fetch Data

• واکشی داده ها در اجزای کودک Data Fetching in Child Components

• واکشی داده های توصیه شده Recommended Data Fetching

• تعریف در والدین، واکشی در کودک Define in Parent, Fetch in Child

• نام های نوع جایگزین و تعاریف پرس و جو Alternative Type Names and Query Definitions

• با استفاده مجدد دیوانه نشوید Don't Go Crazy With Reuse

• ایجاد نظر Comment Creation

• رندر بازگشتی کامپوننت ها Recursively Rendering Components

• واکشی فهرست بزرگ Fetching the Big List

ذخیره سازی با درخواست ذخیره سازی Caching with Request Memoization

• پرس و جوهای مکرر DB Multiple Repeated DB Queries

• معرفی کوئری های تکراری Introducing Duplicate Queries

• درخواست حفظ کردن Request Memoization

• کپی کردن درخواست ها با کش Deduplicating Requests with Cache

پیاده سازی قابلیت جستجو Implementing Search Functionality

• اضافه کردن در جریان کامپوننت Adding in Component Streaming

• استریم با Suspense Streaming with Suspense

• اضافه کردن یک اسکلت بارگیری Adding a Loading Skeleton

• پست های برتر در صفحه اصلی Top Posts on the HomePage

• بازگشت به ورودی جستجو Back to the Search Input

• نکات مربوط به QueryStrings در Next Notes on QueryStrings in Next

• دسترسی به رشته Query Accessing the Query String

• تغییر مسیر از یک اقدام سرور Redirecting From a Server Action

• دریافت رشته Query در یک جزء سرور Receiving the Query String in a Server Component

• اجرای جستجو Running the Search

• هشدار رندر سمت مشتری De-Opt to Client The De-Opt to Client Side Rendering Warning

• بسته شدن! Wrap Up!

مکمل - React Primer Supplement - React Primer

• نکته ای در مورد سخنرانی های زیر A Note About the Following Lectures

• بیایید یک برنامه بسازیم! Let's Build an App!

• سوالات انتقادی Critical Questions

• چند سوال انتقادی دیگر A Few More Critical Questions

• تنظیم گره Node Setup

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

• Create React App چیست؟ What is Create React App

• نمایش محتوای اصلی Showing Basic Content

• JSX چیست؟ What is JSX?

• چاپ متغیرهای جاوا اسکریپت در JSX Printing JavaScript Variables in JSX

• عبارات مختصر JSX Shorthand JSX Expressions

• چیدمان اجزای معمولی Typical Component Layouts

• سفارشی کردن عناصر با لوازم جانبی Customizing Elements with Props

• تبدیل HTML به JSX Converting HTML to JSX

• استفاده از Styling در JSX Applying Styling in JSX

• استخراج کامپوننت ها Extracting Components

• بررسی اجمالی سیستم های ماژول Module Systems Overview

• چیت شیت برای JSX Cheatsheet for JSX

• بررسی اجمالی پروژه Project Overview

• ایجاد اجزای اصلی Creating Core Components

• معرفی سیستم های Props Introducing the Props Systems

• تصویر حرکت داده ها Picturing the Movement of Data

• افزودن لوازم جانبی Adding Props

• استفاده از ساختارشکنی استدلال Using Argument Destructuring

• React Developer Tools React Developer Tools

• متداول ترین اشتباه پراپس Most Common Props Mistake

• تصاویر برای برنامه Images for the App

• از جمله تصاویر Including Images

• مدیریت قابلیت دسترسی به تصویر Handling Image Accessibility

• بررسی نحوه عملکرد CSS Review on How CSS Works

• افزودن کتابخانه های CSS با NPM Adding CSS Libraries with NPM

• انبوهی از HTML! A Big Pile of HTML!

• آخرین بیت از یک ظاهر طراحی شده Last Bit of Styling

مکمل - TypeScript Primer Supplement - TypeScript Primer

• نکته ای در مورد سخنرانی های زیر A Note About the Following Lectures

• نمای کلی TypeScript TypeScript Overview

• راه اندازی محیط Environment Setup

• اولین برنامه A First App

• اجرای کد TypeScript Executing TypeScript Code

• یک تغییر سریع One Quick Change

• گرفتن خطاها با TypeScript Catching Errors with TypeScript

• گرفتن خطاهای بیشتر! Catching More Errors!

• انواع Types

• بیشتر در مورد انواع More on Types

• نمونه هایی از انواع Examples of Types

• کجا از انواع استفاده می کنیم Where Do We Use Types

• Annotations and Inference را تایپ کنید Type Annotations and Inference

• حاشیه نویسی با متغیرها Annotations with Variables

• حاشیه نویسی های تحت اللفظی شی Object Literal Annotations

• حاشیه نویسی در اطراف توابع Annotations Around Functions

• درک استنتاج Understanding Inference

• نوع "هر". The "Any" Type

• تعمیر نوع "Any". Fixing the "Any" Type

• اولیه سازی با تاخیر Delayed Initialization

• وقتی استنباط کار نمی کند When Inference Doesn't Work

• بیشتر در مورد حاشیه نویسی در اطراف توابع More on Annotations Around Functions

• استنتاج پیرامون توابع Inference Around Functions

• حاشیه نویسی برای توابع ناشناس Annotations for Anonymous Functions

• باطل و هرگز Void and Never

• تخریب ساختار با حاشیه نویسی Destructuring with Annotations

• حاشیه نویسی در اطراف اشیاء Annotations Around Objects

• آرایه ها در TypeScript Arrays in TypeScript

• چرا آرایه های تایپ شده؟ Why Typed Arrays?

• انواع متعدد در آرایه ها Multiple Types in Arrays

• زمان استفاده از آرایه های تایپ شده When to Use Typed Arrays

• تاپل ها در TypeScript Tuples in TypeScript

• تاپل ها در عمل Tuples in Action

• چرا تاپل ها؟ Why Tuples?

• رابط ها Interfaces

• حاشیه نویسی های نوع طولانی Long Type Annotations

• رفع حاشیه نویسی با رابط ها Fixing Annotations with Interfaces

• نحو در اطراف رابط ها Syntax Around Interfaces

• توابع در رابط ها Functions in Interfaces

• استفاده مجدد از کد با رابط ها Code Reuse with Interfaces

• طرح کلی با رابط ها General Plan with Interfaces