آموزش دوره جامع Full-Stack Next.js 15 - طراحی پلتفرم وبلاگ چندکاربره - آخرین آپدیت

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

شروع کار Getting Started

• دموی اپلیکیشن App Demo

• پیش نیازها Prerequisites

• مقایسه React و Next.js React vs Next.js

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

• لایوت اصلی و صفحه خانگی RootLayout and Homepage

• افزودن فونت‌های گوگل Adding Google Fonts

• توابع cn The cn Function

• مقدمه‌ای بر TailwindCSS TailwindCSS Intro

نوار ناوبری، صفحات و لایوت‌ها NavBar, Pages and Layouts

• تنظیمات اولیه Initial Setup

• کامپوننت Container The Container Component

• تغییر دهنده تم (Theme Toggle) Theme Toggle

• طراحی لوگو The Logo

• مقدمه‌ای بر Shadcn و استایل اینپوت جستجو Shadcn Intro & Search Input Style

• استایل بخش اعلان‌ها Notifications Style

• استایل دکمه کاربر UserButton Style

• افزودن صفحات و صفحات تو در تو Adding Pages & Nested Pages

• افزودن صفحات پویا (Dynamic) Adding Dynamic Pages

• افزودن لایوت‌های تو در تو Adding Nested Layouts

• لینک کردن صفحات Linking Pages

• پوش کردن کدها در گیت‌هاب Push Code to Github

فرم‌های React Hook Form React Hook Form

• مقدمه‌ای بر TypeScript Intro to Typescript

• کامپوننت Input قابل استفاده مجدد Reusable Input Component

• فرم ورود The Login Form

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

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

• کامپوننت احراز هویت اجتماعی Social Auth Component

• فرم ثبت نام The Register Form

پریزما و دیتابیس Prisma and Database

• راه‌اندازی Prisma Setting Up Prisma

• ایجاد دیتابیس Postgres Creating a Postgres Database

• طراحی مدل کاربر (User Schema) User Schema

• سرور اکشن ثبت نام Register Server Action

• فراخوانی سرور اکشن Calling The Server Action

• کامپوننت Alert The Alert Component

احراز هویت با Auth.js Authentication in Auth.js (Previously Next-Auth)

• تنظیمات Authjs Authjs Setup

• میدل‌ور (Middleware) Middleware

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

• ورود کاربر Login User

• خروج کاربر Logout User

• تغییر مسیر کاربر (Redirect) Redirect User

• به‌روزرسانی نشست (Session) Update Session

• ورود با گیت‌هاب Continue With Github

• ورود با گوگل Continue With Google

تایید ایمیل و بازیابی رمز عبور Verify Email and Reset Password

• تایید خودکار ایمیل OAuth Auto Verify Oauth Email

• سفارشی‌سازی خطای عدم اتصال اکانت Customize Account not Linked Error

• تولید توکن تایید ایمیل Generate Email Verification Token

• ارسال ایمیل تایید Send Verification Email

• صفحه تایید ایمیل Email Verification Page

• ارسال ایمیل بازیابی رمز عبور Send Password Reset Email

• فرم بازیابی رمز عبور Password Reset Form

• افزودن نقش کاربر و UserId به نشست Add User Role & UserId to Session

ساخت، ویرایش، لیست و فیلتر وبلاگ‌ها Blogs Create, Edit, List & Filter

• ساخت فرم وبلاگ Creating Blog Form

• راه‌اندازی Edgestore (آپلود تصویر در React) Setup Edgestore (Image upload in React)

• آپلود تصویر کاور Upload Cover Image

• نمایش، جایگزینی و حذف تصویر کاور Show, Replace and Remove Cover Image

• انتخاب تگ‌ها Select Tags

• ویرایشگر BlockNote BlockNote Editor

• اتصال محتوای ویرایشگر به استیت React Hook Form Set Editor Content to React Hook Form State

• نمایش خطاهای فرم وبلاگ Show Blog Form Error

• انتشار وبلاگ Publish Blog

• ذخیره وبلاگ به عنوان پیش‌نویس Save Blog As Draft

• دریافت وبلاگ‌های منتشر شده Get Published Blogs

• استایل لیست و جزئیات وبلاگ‌ها Style Blogs List and Details

• ویرایش وبلاگ و فیلترها Edit Blog and Filters

واکنش‌ها و لایک وبلاگ‌ها Blogs Reactions

• سرور اکشن لایک (Clap) وبلاگ Clap Blog Server Action

• به‌روزرسانی UI به صورت Optimistic Optimistic UI Update

• نشان کردن (Bookmark) وبلاگ Bookmark Blog

• رفع مشکلات ناوبری Fix Navigation Issues

• صفحه نشان‌شده‌ها (Bookmarks) Bookmarks Page

بخش نظرات Comments Section

• طراحی مدل نظرات (Comments Schema) Comments Schema

• سرور اکشن نظرات Comments Server Action

• فرم نظرات Comments Form

• افزودن پیام‌های Toast Adding Toast Message

• لیست نظرات List Comments

• کارت نمایش نظر Comments Card

• واکنش به نظرات Comments Reaction

• افزودن پاسخ‌ها Add Replies

• لیست پاسخ‌ها List Replies

• حذف نظر Delete Comment

• لایک کردن نظرات Clap Comments

• نمایش تعداد نظرات Show Comments Count

• حذف وبلاگ (بخش اول) Delete Blog Part 1

• حذف وبلاگ (بخش دوم) Delete Blog Part 2

پروفایل کاربر User Profile

• سرور اکشن پروفایل کاربر User Profile Server Action

• دریافت وبلاگ‌های کاربر Get User Blogs

• صفحه‌بندی وبلاگ‌های پروفایل کاربر User Profile Blogs Pagination

• سرور اکشن ویرایش کاربر Edit User Server Action

• فرم ویرایش کاربر Edit User Form

• ویرایش ایمیل کاربر Edit User Email

• حذف کاربر (بخش اول) Delete User Part 1

• حذف کاربر (بخش دوم) Delete User Part 2

دنبال کردن و لغو دنبال کردن کاربران Follow & Unfollow Users

• مدل دیتابیس دنبال کردن (Follow) Follow Prisma Schema

• مسیر API دنبال کردن Follow API Route

• اجرای Prisma Generate Run Prisma Generate

• دکمه دنبال کردن (ارسال درخواست API) Follow Button (Make API Request)

• لیست دنبال‌کنندگان و دنبال‌شوندگان List Followers and Followings

اعلان‌های لحظه‌ای و استقرار پروژه Realtime Notifications & Deployment

• مدل دیتابیس اعلان‌ها Notifications Schema

• ایجاد اعلان‌ها Create Notifications

• دریافت اعلان‌ها Get Notifications

• لیست و باز کردن اعلان‌ها List & Open Notifications

• علامت گذاری اعلان‌ها به عنوان خوانده شده Mark Notifications as Read

• راه‌اندازی سرور Socket Setup Socket Server

• ارسال اعلان‌ها Send Notifications

• پنل مدیریت ساده Simple Admin Dashboard

• استقرار اپلیکیشن (Deployment) App Deployment

• نحوه اجرای کدهای منبع How To Run The Source Codes