آموزش The Next.js 13 Bootcamp - راهنمای کامل برنامه نویس

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

معرفی Introduction

• طرح کلی دوره Course Outline

• راه اندازی دوره Course Setup

مسیریابی و ناوبری مبتنی بر فایل File Based Routing and Navigation

• [حتما بخوانید] - یک پیام مهم [MUST READ] - AN IMPORTANT MESSAGE

• یک برنامه بعدی ایجاد کنید Create a Next App

• کاوش در فایل ها و پوشه ها Exploring the Files and Folders

• اضافه کردن Tailwind CSS Adding Tailwind CSS

• دو گزینه شما Your Two Options

• تعریف صفحاتی که می خواهیم Defining the Pages We Want

• آشنایی با مسیریابی مبتنی بر فایل Understanding File Based Routing

• ایجاد آن صفحات Creating Those Pages

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

• دو روش پیمایش بین مسیرها The Two Ways of Navigating Between Routes

• مؤلفه پیوند The Link Component

• ناوبری برنامه ای با قلاب userRouter Programmatic Navigation With the useRouter Hook

اجزای بعدی (سرور و مشتری) Next Components (Server and Client)

• پاک کردن کد ما با کامپوننت ها Cleaning Our Code With Components

• بازسازی صفحات ما Refactoring Our Pages

• چند بازسازی بیشتر Some More Refactoring

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

• بررسی اینکه کدام مؤلفه ها باید مشتری و کدام یک سرور باشند Exploring Which Components Should Be Client and Which Should Be Server

تعریف صفحه آرایی و Head Meta Defining Page Layouts and Head Meta

• کد ما خیلی خشک نیست Our Code is Not Very DRY

• قرار دادن اجزای مورد استفاده جهانی در چیدمان ریشه Placing Universally Used Components in the Root Layout

• اجزای تو در تو Nested Components

• به روز رسانی Head Meta برای هر صفحه Updating the Head Meta for Each Page

واکشی داده ها در اجزای سرور Fetching Data in Server Components

• یک درس کوچک SQL A Little SQL Lesson

• اتصال به پایگاه داده Postgres Connecting to a Postgres Database

• تعریف طرحواره SQL ما Defining Our SQL Schema

• کاشت پایگاه داده ما Seeding Our Database

• چگونه داده ها را در اجزای سرور واکشی می کنیم How We Fetch Data in Server Components

• واکشی داده ها در یک مؤلفه سرور Fetching Data in a Server Component

• یک درس کوچک TypeScript A Little TypeScript Lesson

• ارائه داده های واکشی شده Rendering the Fetched Data

• یک خطای رایج که ممکن است با آن مواجه شوید A Common Error You Might Encounter

• واکشی یک رستوران توسط Slug Fetching a Restaurant By Slug

• پر کردن داده ها در صفحه رستوران Populating the Data in the Restaurant Page

• واکشی منوی رستوران Fetching the Restaurant's Menu

وقت آن است که دستان خود را کثیف کنید Time to Get Your Hands Dirty

• چالش 1 - پارامترهای پرس و جو را اضافه کنید Challenge 1 - Add Query Params

• راه حل برای چالش 1 Solution for Challenge 1

• چالش 2 - رستوران ها را بر اساس مکان واکشی کنید Challenge 2 - Fetch Restaurants By Location

• راه حل برای چالش 2 Solution for Challenge 2

• چالش 3 - جمع کردن داده ها Challenge 3 - Populating Data

• راه حل برای چالش 3 Solution for Challenge 3

• چالش 4 - واکشی داده ها برای Side NavBar Challenge 4 - Fetching Data for Side NavBar

• راه حل برای چالش 4 Solution for Challenge 4

• چالش 5 - افزودن پارامترهای پرس و جو Challenge 5 - Adding Query Params

• راه حل برای چالش 5 Solution for Challenge 5

• چالش 6 - فیلتر کردن توسط پارامترهای پرس و جو Challenge 6 - Filtering By Query Params

• راه حل برای چالش 6 Solution for Challenge 6

• چالش 7 - تعریف مدل کاربر و بررسی Challenge 7 - Defining the User and Review Model

• راه حل برای چالش 7 Solution for Challenge 7

• چالش 8 - واکشی داده های نظرات Challenge 8 - Fetching Reviews Data

• راه حل برای چالش 8 Solution for Challenge 8

• اضافه کردن یک جزء ستاره ها Adding a Stars Component

• چیزهای بیشتر در مورد اجزای ستاره... More Star Components Stuff...

رسیدگی به وضعیت های بارگیری و خطا Handling Loading and Error States

• مقدمه ای بر وضعیت بارگیری Introduction to Loading State

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

• نادیده گرفتن حالت بارگذاری پیش فرض Overriding the Default Loading State

• رسیدگی به وضعیت های خطا Handling Error States

• رسیدگی به ایالات یافت نشد Handling Not Found States

پیاده سازی احراز هویت Implementing Authentication

• احراز هویت چیست؟ What is Authentication

• افزودن رابط کاربری Material Adding Material UI

• افزودن محتوای مدال Adding the Modal Content

• تکمیل عملکرد مودال Completing the Modal Functionality

• مراحل پیاده سازی احراز هویت Steps to Implement Authentication

• ایجاد نقطه پایانی Creating an Endpoint

• اعتبار سنجی ورودی کاربر Validating the User's Input

• تأیید اینکه کاربر قبلاً یک حساب کاربری ندارد Validating That the User's Doesn't Already Have an Account

• کاوش در راه حل های ذخیره رمز عبور Exploring Password Storage Solutions

• هش کردن رمز عبور ما Hashing Our Password

• ایجاد یک کاربر Creating a User

• ایجاد و ارسال یک توکن وب JSON Creating and Sending a JSON Web Token

• پیاده سازی Sign in Endpoint Implementing the Sign in Endpoint

• شناسایی کاربران با توکن وب Json Identifying Users With Json Web Token

• افزودن میان افزار Adding Middleware

Global State With Context API Global State With Context API

• افزودن اعتبار سنجی سمت مشتری Adding Client Side Validation

• ایجاد یک UseAuth Hook سفارشی Creating a Custom useAuth Hook

• بحث در مورد وضعیت احراز هویت Discussing the Authentication State

• ایجاد یک مؤلفه AuthContext Creating a AuthContext Component

• رسیدگی به وضعیت بارگیری Handling the Loading State

• مدیریت وضعیت خطا Handling the Error State

• ذخیره JWT در کوکی مرورگر ما Saving the JWT to Our Browser's Cookie

• انجام همان کار برای عملکرد ثبت نام Doing the Same Thing For the Signup Function

• تداوم یک دولت معتبر Persisting an Auth State

• رفع مشکل... ببخشید Fixing the Issue... Sorry

• رندر مشروط UI بر اساس وضعیت تأیید Conditionally Rendering UI Based on the Auth State

• پیاده سازی عملکرد خروج Implementing the Logout Functionaility

ساختن یک سیستم در دسترس بودن Building an Availability System

• مقدمه ای بر زمان بندی و در دسترس بودن Intro to Scheduling and Availability

• قوانینی که از آنها پیروی خواهیم کرد The Rules We Will Follow

• رندر کردن گزینه های اندازه مهمانی Rendering the Party Size Options

• ارائه یک مؤلفه DatePicker Rendering a DatePicker Component

• رندر پویا گزینه های زمان Dynamically Rendering the Time Options

• درک بسیاری از روابط Understanding Many to Many Relationships

• تعریف مدل های جدید ما Defining Our New Models

• بررسی اجمالی نقطه پایانی در دسترس بودن The Availability Endpoint Overview

• ساختن نقطه پایانی در دسترس بودن Building the Availability Endpoint

• مرحله 1: تعیین زمان جستجو Step 1: Determining the Search Times

• مرحله 2: واکشی رزروها Step 2: Fetching the Bookings

• مرحله 3: فشرده سازی رزرو Step 3: Compressing the Booking

• مرحله 4: واکشی میزهای رستوران Step 4: Fetching the Restaurant Tables

• مرحله 5: قالب بندی مجدد زمان های جستجو Step 5: Reformatting the Search Times

• مرحله 6: جداول رزرو شده را فیلتر کنید Step 6: Filtering Out the Booked Tables

• مرحله 7: تعیین در دسترس بودن Step 7: Determining the Availability

• مرحله 8: فیلتر کردن بر اساس پنجره زمانی رستوران Step 8: Filtering by Restaurant Time Window

• ساختن قلاب استفادهAvailabilities Building a useAvailabilities Hook

• ذخیره معیارهای رزرو در ایالت Storing the Reservation Criteria in State

• ارائه گزینه های زمان موجود Rendering the Available Time Options

• تبدیل زمان به زمان قابل نمایش Converting the Time to a Displayable Time

ساختن سیستم زمانبندی Building the Scheduling System

• نقطه پایان رزرو The Reservation Endpoint

• مرحله 1: اعتبار سنجی Step 1: Validation

• مرحله 2.0: استخراج منطق در دسترس بودن جدول در تابع خود Step 2.0: Extracting the Table Availability Logic Into it's Own Function

• مرحله 2.5: تعیین جداول موجود Step 2.5: Determining the Available Tables

• مرحله 3: جدول ها را بر اساس صندلی بشمارید Step 3: Count the Tables Based on Seats

• مرحله 4: جداول را برای رزرو تعیین کنید Step 4: Determine the Tables to Book

• مرحله 5: ایجاد رزرو و پیوند آن به جداول Step 5: Creating the Booking and Linking it to the Tables

• رندر دینامیک داده ها برای سربرگ رزرو Dynamically Rendering Data for the Reserve Header

• استخراج پارامترهای پرس و جو Extracting the Query Params

• ذخیره سازی ورودی های ما در ایالت Storing Our Inputs in State

• ایجاد یک useReservation Hook Creating a useReservation Hook

• رزرو از مشتری Making a Reservation From the Client

• نمایش وضعیت موفقیت آمیز Showing a Success State

ضمیمه A - ساخت رابط کاربری Appendix A - Building the UI

• Nav و Header The Nav and Header

• کارت جستجوی نوار و رستوران The Search Bar and Restaurant Card

• صفحه رستوران The Restaurant Page

• عنوان و توضیحات The Title and Description

• گالری تصاویر The Image Gallery

• کارت رزرو The Reservation Card

• صفحه منو The Menu Page

• صفحه جستجو The Search Page

• صفحه رزرو The Reserve Page