آموزش Mastering Next.js - ساخت Airbnb Clone از ابتدا (2024)

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

مقدمه Introduction

• اطلاعات مفید Useful Info

• Github Repo Github Repo

آموزش Next.js Next.js Tutorial

• اطلاعات مهم!!! Important Info !!!

• نصب کنید Install

• فایل ها و پوشه ها Files and Folders

• صفحه اصلی Home Page

• ایجاد صفحات Create Pages

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

• مسیرهای تو در تو Nested Routes

• CSS CSS

• اطلاعات Tailwind (اختیاری) Tailwind Info (optional)

• مولفه طرح Layout Component

• کامپوننت نوار ناوبری Navbar Component

• فونت ها Fonts

• فراداده Metadata

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

• شمارنده Counter

• واکشی داده ها Fetch Data

• Refactor Refactor

• در حال بارگذاری کامپوننت Loading Component

• مولفه خطا Error Component

• چیدمان تو در تو Nested Layout

• صفحه پویا Dynamic Page

• تصویر محلی Local Image

• تصاویر از راه دور Remote Images

• تصاویر واکنش گرا Responsive Images

• گزینه های مسیریابی بیشتر More Routing Options

• اقدامات سرور - اطلاعات Server Actions - Info

• صفحه اقدامات - راه اندازی Actions Page - Setup

• فایل اقدامات Actions File

• ذخیره کاربر Save User

• واکشی کاربران Fetch Users

• حافظه پنهان را مجدداً تأیید کنید و تغییر مسیر دهید Revalidate Cache and Redirect

• UseFormStatus Hook UseFormStatus Hook

• UseFormState Hook UseFormState Hook

• دکمه حذف Delete Button

• ورودی پنهان شد Input Hidden

• روش Bind Bind Method

• گردانندگان مسیر - اطلاعات Route Handlers - Info

• راهنمای مسیر - GET Route Handler - GET

• Route Handlers - Params Route Handlers - Params

• گردانندگان مسیر - POST Route Handlers - POST

• میان افزار Middleware

• ساخت محلی Local Build

• حافظه پنهان Cache

پروژه HomeAway HomeAway Project

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

• برنامه New Next.js را نصب کنید Install New Next.js Application

• دیگ بخار را بردارید Remove Boilerplate

• ایجاد صفحات Create Pages

• Shadcn/ui Library را نصب کنید Install Shadcn/ui Library

• کامپوننت دکمه Shadcn/ui Shadcn/ui Button Component

• بیشتر Shadcn/ui Components را نصب کنید Install More Shadcn/ui Components

• ساختار نوار ناوبری Navbar Structure

• اجزای لوگو و NavSearch Logo and NavSearch Components

• تغییر تم با Shadcn/ui Change Theme with Shadcn/ui

• راه اندازی حالت تاریک با Shadcn/ui Setup Dark Mode with Shadcn/ui

• کامپوننت کشویی پیوندها LinksDropdown Component

• راه اندازی و سفارشی کردن Clerk Auth Provider Setup and Customize Clerk Auth Provider

• مولفه SignOutLink SignOutLink Component

• کامپوننت کشویی پیوندها LinksDropdown Component

• ایجاد نمایه - راه اندازی Create Profile - Setup

• مؤلفه FormInput FormInput Component

• مولفه SubmitButton SubmitButton Component

• کامپوننت FormContainer FormContainer Component

• Refactor ایجاد نمایه Refactor Create Profile

• کتابخانه زود Zod Library

• اطلاعات مهم!!! Important Info !!!

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

• راه اندازی پریسما Prisma Setup

• Prisma و Supabase را وصل کنید Connect Prisma and Supabase

• نمونه های خام Prisma Prisma Crud Examples

• مدل Profile ایجاد کنید وProfileAction را ایجاد کنید Create Profile Model and createProfileAction

• عمل واکشی تصویر نمایه Fetch Profile Image Action

• تغییر ایجاد صفحه نمایه Modify Create Profile Page

• واکشی نمایه کاربر Fetch User Profile

• به روز رسانی صفحه نمایه Update Profile Page

• روش Zod SafeParse Zod SafeParse Method

• ValidateWithZodSchema - تابع Helper ValidateWithZodSchema - Helper Function

• ورودی تصویر Image Input

• ظرف ورودی تصویر Image Input Container

• تصوير زود اعتبارسنجي Image Zod Validation

• سطل و کلید سوپا بیس Supabase Bucket and Keys

• تصویر آپلود سوپا بیس Supabase Upload Image

• به روز رسانی عملکرد تصویر نمایه - کامل شد Update Profile Image Action - Complete

• طرح واره اموال Property Schema

• ایجاد صفحه دارایی - راه اندازی Create Property Page - Setup

• ورودی قیمت Price Input

• ورودی دسته ها Categories Input

• توضیحات ورودی Description Input

• ورودی کشورها Countries Input

• ورودی شمارنده Counter Input

• ورودی امکانات Amenities Input

• ایجاد ملک Create Property

• واکشی خواص Fetch Properties

• صفحه اصلی - راه اندازی Home Page - Setup

• فهرست دسته ها Categories List

• لیست خالی Empty List

• کانتینر خواص Properties Container

• PropertyCard - راه اندازی PropertyCard - Setup

• PropertyCard - ساختار PropertyCard - Structure

• رتبه بندی املاک Property Rating

• دکمه جابجایی موارد دلخواه Favorites Toggle Button

• نام و پرچم کشور Country Name and Flag

• در حال بارگیری کارت ها Loading Cards

• کامپوننت NavSearch NavSearch Component

• دکمه ورود به سیستم مورد علاقه Favorites SignIn Button

• واکشی مورد دلخواه Fetch Favorite

• موارد دلخواه تغییر فرم Favorites Toggle Form

• موارد دلخواه - عملکرد Toggle Favorites - Functionality

• صفحه مورد علاقه Favorites Page

• صفحه جزئیات ملک - راه اندازی Property Details Page - Setup

• جزء خرده نان Breadcrumbs Component

• کامپوننت دکمه اشتراک گذاری Share Button Component

• کامپوننت ظرف تصویر Image Container Component

• جزء تقویم Calendar Component

• جزء جزئیات ملک Property Details Component

• کامپوننت UserInfo UserInfo Component

• کامپوننت توضیحات Description Component

• کامپوننت امکانات رفاهی Amenities Component

• جزء نقشه ملک Property Map Component

• اشکال سوپا بیس!!! Supabase Bug !!!

• استقرار برنامه در Vercel Deploy Application on Vercel

• مدل نظرات Reviews Model

• RatingInput Component RatingInput Component

• کامپوننت ارسال نظرات SubmitReviews Component

• قابلیت SubmitReview SubmitReview Functionality

• واکشی نظرات Fetch Reviews

• رندر نظرات Render Reviews

• کامپوننت کارت نقد و بررسی ReviewCard Component

• واکشی و حذف نظرات کاربران Fetch and Delete User Reviews

• مؤلفه IconButton IconButton Component

• صفحه نظرات Reviews Page

• نظرات در حال بارگذاری مؤلفه Reviews Loading Component

• PropertyRating Component - کامل PropertyRating Component - Complete

• اجازه بازبینی Allow Review

رزرو Booking

• مدل رزرو Booking Model

• اجزای رزرو Booking Components

• کتابخانه زستند Zustand Library

• کانتینر رزرو/تقویم - راه اندازی اولیه Booking Container / Calendar - Initial Setup

• محاسبه مجموع Calculate Totals

• فرم رزرو Booking Form

• مؤلفه رزرو را تأیید کنید Confirm Booking Component

• ایجاد اقدام رزرو Create Booking Action

• دوره های مسدود شده Blocked Periods

• تاریخ های غیر فعال Disabled Dates

• واکشی رزرو و حذف رزرو Fetch Bookings and Delete Booking

• صفحه رزرو Bookings Page

• حذف رزرو Delete Booking

• در حال بارگذاری جزء جدول Loading Table Component

کل برنامه Entire App

• واکشی و حذف توابع اجاره Fetch and Delete Rentals Functions

• صفحه اجاره Rentals Page

• عملکرد جزئیات اجاره واکشی Fetch Rental Details Function

• ویرایش صفحه اجاره Edit Rentals Page

• امکانات ورودی Gotcha Amenities Input Gotcha

• به روز رسانی توابع اجاره Update Rental Functions

• صفحه رزرو - راه اندازی Reservation Page - Setup

• واکشی رزرو Fetch Reservations

• صفحه رزرو - کامل شد Reservations Page - Complete

• صفحه مدیریت - راه اندازی Admin Page - Setup

• صفحه مدیریت - میان افزار Admin Page - Middleware

• صفحه مدیریت - بارگیری مولفه ها Admin Page - Loading Components

• صفحه مدیریت - کانتینر آمار Admin Page - Stats Container

• صفحه مدیریت - واکشی داده های نمودار Admin Page - Fetch Chart Data

• صفحه مدیریت - ظرف نمودار Admin Page - Chart Container

• راه راه - راه اندازی Stripe - Setup

• نوار - صفحه پرداخت Stripe - Checkout Page

• Stripe - مسیر پرداخت Stripe - Payment Route

• Stripe - تأیید مسیر Stripe - Confirm Route

• Stripe - Refactor Queries Stripe - Refactor Queries

• آمار رزروها Reservations Stats

• استقرار رفع اشکال !!! Deploy Bug Fix !!!

• راه اندازی Atlas - ویدیو اختیاری !!! Atlas Setup - Optional Video !!!

پاداش Bonus

• پاداش Bonus