دوره جامع و پروژه محور Next JS

معرفی دوره

نصب برنامه های موردنیاز

Next.js چیست؟

آشنایی با موتور های جستجو و SEO

مفهوم SSR و تاثیر آن در حل مشکل SEO

تاثیر SSR در سرعت بارگذاری سایت

ایجاد پروژه اولیه

بررسی ساختار و پوشه بندی پروژه

مفهوم File-Based Routing در نکست

ایجاد route های اولیه در نکست

بررسی Nested Route ها در نکست

ویژگی ها فایل _app

ایجاد Dynamic Route در نکست

هوک useRouter و استفاده از آن

بررسی Nested Dynamic Route ها با چند مثال

بررسی Catch All Route

ایجاد صفحه 404

کامپوننت Link و مسیر دهی

مسیر دهی به Dynamic Route ها

مسیردهی با هوک useRouter

خلاصه فصل

استایل های Global در نکست

بررسی CSS Module ها و استفاده از آن

کتابخانه Styled-jsx

Sass در نکست

معرفی پروژه سایت فروش خودرو

ایجاد فایل های اولیه پروژه

اضافه کردن استایل های Global

ایجاد Layout

اضافه کردن صفحه خودرو ها به پروژه

ایجاد کامپوننت Card

ساختن Dynamic Route برای صفحه جزییات خودرو

تکمیل صفحه جزییات خودرو

اضافه کردن قسمت دسته بندی

ایجاد صفحات مربوط به دسته بندی

تکمیل صفحات دسته بندی ها

اضافه کردن قسمت فیلتر با قیمت

پیاده کردن منطق فیلتر قیمت

افزودن صفحه خودرهای فیلتر شده

اتمام صفحه اصلی پروژه

مقدمه

معرفی و استفاده از json-server

مفهوم pre-rendering

مفهوم data-fetching

بررسی کامل مفاهیم Static Site Generatioin(SSG) در نکست

نحوه استفاده از getStaticProps در صفحات SSG

گرفتن دیتا از api در getStaticProps

استفاده از json-server در نکست

جزییات بیشتر از getStaticProps

build گرفتن از پروژه و بررسی آن

کارکردن با Dynamic Parameter ها

دلیل استفاده از getStaticPaths

نحوه استفاده از getStaticPaths

نکات بیشتر در مورد getStaticPaths

بیلد گرفتن از پروژه و بررسی رفتار کامپوننت Link

بررسی fallback با مقدار false

بررسی fallback یا مقدار true

بررسی fallback با مقدار blocking

ISR چیست و دلیل استفاده از آن؟

نحوه ایجاد صفحات ISR و استفاده از revalidate

نحوه استفاده از notFound در getStaticProps

نحوه استفاده از redirect در getStaticProps

آشنایی با Server Side Rendering(SSR)

نحوه استفاده از getServerSideProps

جزییات بیشتر از getServerSideProps

بیلد گرفتن از صفحات SSR و بررسی آن

context در getServerSideProps

بررسی req و res در context

بررسی query در context

ایجاد dynamic route به صورت SSR

استفاده از notFound و redirect در getServerSideProps

بیلد گرفتن از پروژه و بررسی آن

گرفتن دیتا در سمت client با useEffectmp4

نحوه اجرای useEffect در نکست

استفاده از هوک useSWR

ترکیب pre-rendering و client data fetching

معرفی پروژه

ایجاد ساختار پروژه

اضافه کردن layout به پروژه

ایجاد صفحه اصلی

ادامه ایجاد صفحه اصلی

اضافه کردن صفحه منو و فچ کردن دیتا

نشان دادن دیتا ها در صفحه منو

ساخت کامپوننت Card

مشخص کردن route های داینامیک

فچ کردن دیتای صفحات داینامیک

ایجاد صفحه جزییات و نشان دادن دیتا

ادامه صفحه جزییات

پیاده کردن ui صفحه دسته بندی

اضافه کردن query به url در سمت فرانت

فیلتر کردن دیتا به صورت Server-side

آپدیت کردن فرانت بر اساس query

تست کردن پروژه

آنلاین کردن سرور برای api

اضافه کردن فایل .env

دیپلوی کردن پروژه

بررسی api route و مفاهیم آن

آشنایی با route های مختلف در فولدر api

ایجاد api با درخواست GET

گرفتن دیتا از api های ایجاد شده

ایجاد api با درخواست POST

کلیاتی در مورد http status code ها

ایجاد api با درخواست DELETE

ایجاد api با درخواست PUT

بررسی Dynamic api route

ایجاد api با درخواست PATCH

بررسی Catch All api Route

بررسی استفاده همزمان از api route و pre-rendering

مقدمه

ایجاد پروژه اولیه

ایجاد api با متد post برای دریافت دیتا از فرانت

معرفی دیتابیس mongodb

نحوه ایجاد cluster در mongoDB

بررسی ipها و accessها در دیتابیس

اتصال به دیتابیس با mongoose

بهینه کردن کدها

مفهوم schema و model

ایجاد اولین model

ذخیره دیتا در database

هندل کردن error ها

بررسی تایپ های مختلف schema

گرفتن تمام دیتا ها از دیتابیس

گرفتن یک دیتای خاص از دیتابیس

ایجاد ui برای آپدیت دیتا

آپدیت کردن دیتا در دیتابیس

حذف کردن دیتا از دیتابیس

اتصال به دیتابیس در getStaticProps

اتصال به دیتابیس در getServerSideProps

معرفی پروژه

ایجاد پروژه اولیه

اضافه کردن layout

ایجاد دیتابیس و اتصال برنامه به آن

ایجاد مدل Customer

ایجاد api با متد post برای گرفتن دیتا

تست کردن api ها با استفاده از Postman

اضافه کردن صفحه افزودن customer

توسعه فانکشن های ذخیره و کنسل

توسعه کامپوننت FormInput

توسعه کامپوننت ItemList

توسعه فانکشن های ItemList

ریفکتور کردن کامپوننت FormInput

ایجاد کامپوننت Form

ایجاد صفحه اصلی به صورت SSR و اتصال به دیتابیس

نشان دادن customer ها در صفحه اصلی

توسعه دادن api دیلیت و حذف customer از دیتابیس

توسعه دادن api برای ویرایش کردن دیتای کاربران در دیتابیس

توسعه دادن api برای گرفتن یک customer خاص

توسعه صفحه edit و گرفتن دیتای customer

ارسال دیتای ویرایش شده به سرور

صفحه جزییات و client side data fetching

معرفی کامپوننت Head

بررسی title و متاتگ ها در Head

داینامیک کردن کامپوننت Head در Next

جلوگیری از تکرار Head

نحوه استفاده از Image

چرا باید از Image استفاده بکنیم؟

ریسپانسیو کردن Image

خرجی گرفتن از پروژه Next به صورت Html

redirect در Next

بررسی فایل _document در Next

تغییر زبان پروژه Next به فارسی

بررسی module path در Next

بررسی sitemap

فایل robots.txt و ارتباط با موتور های جستجو

مقدمه

بررسی مفاهیم Authentication و Authorization

jwt چیست؟

cookie چیست؟

بررسی فرآیند احراز هویت

ایجاد مدل User و ارتباط با دیتابیس

ایجاد api برای ثبت نام(Sign Up)

ایجاد فرم ثبت نام در فرانت

ایجاد api برای ورود به حساب کاربری(Login)

مقایسه پسورد اصلی و پسورد hash شده در دیتابیس

ایجاد jwt در سرور

ذخیره کردن jwt در cookie

ایجاد فرم ورود در فرانت

بررسی روش های محافظت از صفحات

ایجاد api برای احراز هویت و محافظت از صفحات در فرانت

احراز هویت و محافظت از صفحات در سمت client

احراز هویت و محافظت از صفحات در سمت server

ایجاد api برای خروج از حساب کاربری(Logout)

ایجاد گزینه خروج از حساب کاربری در سمت client

نشان دادن المان ها در سایت بر اساس احراز هویت

بررسی احراز هویت در api route ها

ایجاد api برای تکمیل اطلاعات کاربر

پیاده کردن فرم تکمیل اطلاعات در سمت client

مقدمه

اضافه کردن فانکشن های موردنیاز

اضافه کردن مدل User

ایجاد api برای ثبت نام

ایجاد فرم ثبت نام

معرفی لایبرری next-auth

ایجاد روت [...nextauth] برای هندل کردن درخواست ها

بررسی فرم های ایجاد شده توسط nextauth

پیاده کردن فانکشن authorize در nextauth

پروسه ورود به حساب کاربری در nextauth

حراز هویت و سطح دسترسی در سمت client(با هوک useSession)

احراز هویت در سمت server(با getSession)

نحوه خروج از حساب کاربری در nextauth

نشان دادن المان ها در فرانت بر اساس وضعیت احراز هویت

محافظت از api route ها در nextauth

اضافه کردن قسمت تکمیل اطلاعات کاربر

مقدمه

کانفیگ nextauth در پروژه

عملیات ورود به حساب کاربری

عملیات خروج از حساب کاربری

محافظت از صفحات و دسترسی به آن در سمت client

محافظت از صفحات و دسترسی به آن در سمت server

نشان دادن المان های سایت بر اساس احراز هویت

اتصال به دیتابیس mongoDB

معرفی پروژه Todo

راه اندازی پروژه

آشنایی با لایبرری react-icons

پیاده سازی Layout پروژه

ایجاد مدل User

فانکشن های اتصال به دیتابیس و hash کردن پسورد

توسعه api ثبت نام

ایجاد فرم ثبت نام

اتصال فرم ثبت نام به api

توسعه api ورود توسط next-auth

ایجاد فرم ورود

اتصال فرم ورود به api

محدود کردن دسترسی کاربر به فرم ها

ایجاد api با متد POST برای ذخیره todo

ایجاد صفحه اضافه کردن todo

ایجاد کامپوننت RadioButton

ارسال todo به سمت back-end

ایجاد api برای دسته بندی و گرفتن todo ها

گرفتن todo ها از api

نشان دادن تسک ها در UI

ایجاد api برای آپدیت کردن وضعیت todo ها

اضافه کردن button های تغییر وضعیت

آپدیت کردن وضعیت todoها

ایجاد api برای تکمیل اطلاعات کاربر

ایجاد فرم تکمیل اطلاعات

ارسال اطلاعات کاربر به بک اند

ایجاد api برای گرفتن اطلاعات کاربر

نشان دادن اطلاعات کاربر

ایجاد button برای خروج از حساب کاربری

محدود کردن دسترسی صفحه اصلی

تمرین

مقدمه

ایجاد پروژه next.js با آخرین ورژن

بررسی ساختار app directory

بررسی layout.js

بررسی page.js

app router

ایجاد nested route ها

ایجاد dynamic route ها

بررسی nested layout

بررسی کامپوننت های client side و server side

استفاده بهینه از use client

نحوه data fetching در سمت سرور

ایجاد صفحات SSG و SSR و ISR

نحوه استفاده از generateStaticParams

برررسی loading.js

بررسی error.js

ایجاد api به وسیله route handler

هندل کردن searchQuery در api

بررسی api با متد POST

مدیریت metadata ها برای SEO

فونت ها

بررسی sitemap ها

مقدمه

ریداکس چیست؟

درک عمیق مفاهیم و پشت پرده ریداکس

راه اندازی پروژه اولیه

ایجاد action

ایجاد reducer

ایجاد store

نحوه dispatch کردن action ها

اضافه کردن action های دیگر

بررسی payload

اضافه کردن reducer های دیگر

ترکیب reducer ها با هم

بررسی middleware ها در ریداکس

بررسی action های async

redux toolkit چیست؟

راه اندازی پروژه اولیه

بررسی ساختار فولدر های redux toolkit

ایجاد اولین slice

ایجاد store

استفاده از Provider

هوک useSelector

فانکشن selector

هوک useDispatch

استفاده از payload

اضافه کردن slice دیگر به پروژه

اضافه کردن middleware

بحث extraReducer - قسمت اول

بحث extraReducer - قسمت دوم

توسعه async action

تکمیل async action ها

اکستنشن redux devtools

مقدمه

راه اندازی پروژه اولیه

ایجاد slice و store

ایجاد provider و اتصال redux به next

استفاده از redux در app directory

بررسی async action ها

مقدمه

راه اندازی پروژه

بررسی props type ها

تایپ params در Next

ایجاد api با تایپ اسکریپت

معرفی پروژه

فولدر بندی پروژه

کاستومایز کردن jconfig

اضافه کردن عکس ها و svg ها

تغییر استایل های گلوبال

اضافه کردن فونت فارسی و راست چین کردن پروژه

توسعه header سایت

توسعه footer و layout

نصب لایبرری ها برای احراز هویت

ایجاد مدل User

فانکشن های اتصال به دیتابیس و هش کردن پسورد

ایجاد cluster

توسعه api برای ایجاد حساب کاربری(signup)

استفاده از next-auth در next ورژن 13

پیاده کردن فرم ثبت نام

اتصال فرم ثبت نام به دیتابیس

پیاده کردن فرم ورود

گروه بندی کردن روت ها با route groups

افزودن SessionProvider در next ورژن 13 و نکات آن

احراز هوبیت در header به صورت client side

سکیور کردن صفحه ورود و ثبت نام به صورت server side

راه انداری پنل کاربری

افزودن ساید بار به صفحات پنل کاربری

دکمه خروج از حساب کاربری

ایجاد محدودیت دسترسی به پنل کاربری

صفحه اصلی پنل کاربری

نشان دادن تاریخ عضویت کاربر

صفحه افزودن آگهی در پنل کاربری

کامپوننت TextInput

فانکشن های پرکاربرد e2p و p2e و sp

کامپوننت RadioList

کامپوننت TextList - قسمت اول

کامپوننت TextList - قسمت دوم

افزودن تقویم هجری شمسی با زبان فارسی

ایجاد مدل Profile و ارجاع به مدل User

توسعه api ایجاد آگهی(متد POST) - قسمت اول

توسعه api ایجاد آگهی(متد POST) - قسمت دوم

ارسال دیتای مربوط به آگهی ها به سمت بک اند

افزودن toast و loader

مرتب کردن کد ها

کوئری زدن به دیتابیس و گرفتن آگهی های مربوط به یک کاربر خاص

صفحه آگهی های کاربر در پنل کاربری

کامپوننت Card

کامپوننت DashboardCard

پاس دادن دیتا از سرور به کلاینت

توسعه api برای ویرایش آگهی

توسعه api برای حذف آگهی

صفحه ویرایش آگهی

بهینه کردن تمپلیت AddProfilePage

استفاده از api ویرایش آگهی

قابلیت حذف آگهی در پنل کاربری

صفحه اصلی سایت - قسمت اول

کامپوننت CategoryCard

صفحه اصلی سایت - قسمت دوم

صفحه آگهی ها

توسعه api برای گرفتن لیست آگهی ها

گرفتن آگهی ها از api

پیاده کردن سکشن آگهی هاmp4

کوئری زدن و فیلتر کردن دیتا ها

پیاده کردن sidebar در صفحه آگهی ها

صفحه جزییات آگهی

گرفتن دیتای مربوط به جزییات آگهی

اضافه کردن متن ها به صفحه آگهی

اضافه کردن sidebar به صفحه آگهی

باتن اشتراک گذاری

تعریف ثابت ها و مرتب کردن کد ها

بررسی مکانیسم پنل ادمین

تعریف نقش ها(RBAC)

نشان ندادن آگهی های تایید نشده

شناسایی نقش کاربر

تغییر sidebar برای نقش ادمین

ایجاد محدودیت دسترسی به پنل ادمین

نشان دادن آگهی های منتشر نشده در پنل ادمین

توسعه AdminCard

ایجاد api برای انتشار آگهی

قابلیت تایید و انتشار آگهی برای ادمین

افزودن meta tag های اصلی سایت

تعریف کردن meta tag های پنل کاربر و ادمین

ایجاد meta tag ها به صورت داینامیک و بهینه سازی SEO

مقدمه

بررسی Turbopack

مفهوم Server Action

ایجاد فرم

نحوه ایجاد Server Action در Server component ها

پشت پرده Server Action و درک عمیق آن

ذخیره اطلاعات در دیتابیس

نمایش دیتا ها

بررسی متد revalidatePath

تعریف Server Action در Client component ها

بررسی هوک useFormStatus

متد های redirect و cookies

ریست کردن form