آموزش Next.js | دوره کامل و قیمت ویژه برای یادگیری نکست جی اس
هیچ ابزاری به اندازه React نمی‌تونه به شما در ساده‌سازی و کارآمد شدن کد نویسی جاوا اسکریپت کمک کنه، اما برای اینکه بتونی کاملاً حرفه‌ای از React در کد نویسی استفاده کنی و حسابی در این حوزه قدرتمند ظاهر بشی قطعاً به مهارت کامل کار با Next.js نیاز داری. Next.js یک بستره که با هدف تکمیل و تقویت تکنولوژی React توسعه پیدا کرده و حالا هر روز که می‌گذره کامل‌تر و قوی‌تر شده. آموزش Next.js برای متخصص React از نون شب هم واجب‌تره، چون می‌تونه از این ابزار قدرتمند برای طراحی بهتر فرانت اند در صفحات وب سایت‌ها استفاده کنه و کامل‌تر از توانایی‌های React بهره‌مند بشه.
اگه اینکه اینجا هستی و داری این مطلب رو می‌خونی، احتمالاً متخصص React آگاهی هستی و برای توسعه کارهات به آموزش نکست جی اس نیاز داری. در کل Next.js از جمله ابزارهای وابسته به توسعه رابط کاربری هست و در سطح دوره جامع آموزش جاوا اسکریپت قرار می‌گیره. خلاصه اگه فکر میکنی در طراحی سایت به کاهش کد نویسی و افزایش سرعت اجرای برنامه‌ها نیاز داری، بهتره که برنامه آموزش Next.js رو جدی بگیری. من علی رضایی در این دوره آموزش یه نقشه راه برات تهیه کردم تا با خیال راحت وارد این فضا بشی و بدون ابهام و قدم به قدم کل ماجرا رو برای اجرای کامل در React یاد بگیری.
Next.js چیه؟ چکار می‌کنه؟
Next.js در تعامل با فضای React شکل گرفته. در واقع یک نوع چارچوب متن باز هست که بر پایه Node.js توسعه پیدا کرده و قراره تا در محیط اجرایی سمت سرو هنگام کد نویسی جاوا اسکریپت کارایی داشته باشه. از طرفی با Next.js امکان تولید صفحات وب ایستا (Static – Site Generation) در ری اکت (React) وجود داره. خلاصه Next.js نوعی چارچوب از قبل کد نویسی شده است که به کاربر کمک می‌کنه در محیط React بهتر و با سرعت بیشتر وب‌سایت های ایستا و پویا طراحی کنه.
وقتی قراره که پروژه‌ای رو داخل React آغاز کنی، به یه سری ابزارها برای مدیریت پروژه و تعریف چارچوب نیاز داری و Next.js بهترین این ابزارها هست. به این ترتیب Next.js ساختاری است که در امتداد کار با React استفاده میشه و برای طراحی وب‌سایت های تعاملی‌تر با حال‌وهوای پویاتر کارایی داره و می‌تونه در کاهش کد نویسی و ساده‌سازی محیط برنامه و افزایش سرعت صفحات سایت تأثیرگذار باشه.
چرا Next.js محبوب هست؟
آیا هنوز هم فکر میکنی که لازمه تا آموزش Next.js رو شروع کنی؟ و یا فکر میکنی که در React به اندازه کافی ماهر شدی و می‌تونی تمام پروژه‌های کد نویسی جاوا اسکریپت رو اجرا کنی؟ ولی چطوره که در کد نویسی کار از ابزارهای مناسب استفاده کنی. یه مکانیک هر چقدر هم ماهر باشه، بدون ابزار کاری از پیش نمی‌بره.
Next.js خیلی محبوب و کاربردی شده، چون یه ابزار مفید و سودمند هست. هیچ کسی از یه مکانیک خرده نمی‌گیره که چرا از ابزار استفاده می‌کنه. ولی همه مکانیک آگاه به ابزارها و با مهارت در کار با این ابزارها رو تحسین می‌کنن. تو هم لازمه که در برنامه‌نویسی سمت کاربر و طراحی رابط کاربری (UI) دست پر حاضر باشی و کامل از مهارت کار با ابزارهای کاربردی مثل Next.js بدونی. آموزش نکست جی اس بهت اجازه میده تا برنامه‌نویس آگاه‌تری باشی. این ابزار محبوب هست؛ چون:
برای رندرینگ سمت سرور (SSR) کارایی داره
Next.js روش بارگذاری صفحات React در سمت سرور رو ساده‌تر می‌کنه. خیلی ساده می‌تونی صفحات React رو از همان ابتدا و با اطلاعات کامل به همراه داده‌های سرور پر کنی تا پس از داینامیک شدن یه محیط آماده HTML رو برای نمایش به کاربر داشته باشی.
امکان Routing ساده و اتوماتیک رو فراهم می‌کنه
شما می‌تونی از طریق Next.js برای خلق صفحات جدید و پوشه‌بندی طبق ساختار Next انجام بدی. داخل Next.js نوعی سیستم Routing ساده اما کاربردی قرار داره که برای مسیریابی اتوماتیک استفاده میشه که ویژگی مفید و حرفه‌ای در صفحه سازی و مسیریابی اتوماتیک است.
از قابلیت پشتیبانی CSR برخوردار هستید
با استفاده از Next.js علاوه بر رندرینگ سمت سرور می‌تونی برای رندرینگ محتوای سمت کلاینت نیز استفاده کنی. همین ویژگی بهت اجازه میده تا بدون نیاز به بارگذاری یا رفرِش مجدد صفحات در لحظه برای تغییرات محتوا اقدام کنی. حرفه‌ای‌ها در توسعه رابط کاربری می‌دونن که این ویژگی تا چه اندازه مفید و کاربردی هست.
امکان پشتیبانی از SSG رو در اختیار داری
SSG (Static Site Generation) قابلیت طراحی صفحات استاتیک هست. حالا این قابلیت به چه کاری میاد؟ این قابلیت Next.js بهت کمک می‌کنه تا بخش‌های محیط سایت رو با استفاده از صفحات استاتیک طراحی کنی. این شکلی هر بار که سایت بالا میاد و صفحات در حال لود شدن هستن، نیازی نیست تا برای همه صفحات درخواست بارگذاری ارسال بشه. همین کار ساده اما خیلی مفید تا حدود زیاد از بار سرو کم می‌کنه و سرعت سایت بالاتر می‌ره.
دامنه کار با Next.js خیلی گسترده‌تر از این موارد هست. به هر حال به عنوان متخصص فرانت اند قطعاً می‌دونی که مهارت در جاوا اسکریپت چه اندازه مهم و کاربردی هست. از طرفی قطعاً می‌دونی که React چقدر می‌تونه کد نویسی در محیط جاوا اسکریپت رو ساده‌تر کنه و حالا باید بدونی که با Next.js می‌تونی کارهای بزرگتر، پویاتر و سرعت کد نویسی بهتری رو داخل React تجربه کنی. برای همین نکات کاربردی و تقویت کار با React هست که خیلی‌ها محیط Next رو دوست دارند. بهت توصیه می‌کنم که آموزش Next.js رو جدی بگیری، اما بهتره که قدم اول رو محکم برداری و با یه دور آموزش حرفه‌ای همراه بشی.
دوره آموزش Next.js برای چه کسانی سودمند است؟
آموزش Next.js یه دوره سطح بالا برای تکمیل مهارت‌های برنامه نویسی سمت کاربر هست. این دوره برای کسانی سودمند است که از مفاهیم پایه و کاربردی در React اطلاع دارن. در کل دوره Next.js رو باید در امتداد پکیج آموزش HTML و پس از کسب مهارت در کد نویسی جاوا اسکریپت معرفی کنیم. این دوره برای تمام افرادی که در زمینه رابط کاربری (UI) وب سایت‌ها فعالیت می‌کنن و تونستن تا سطح کار با React بالا بیان، مفید هست.
در کل اگه طراح فرانت اند هستی و مهارت کار با HTML و CSS رو می‌دونی و قراره تا در کد نویسی جاوا اسکریپت حسابی جلو بری و از طرفی به سرعت عمل در کد نویسی و داشتن ساختارهای پویا در دنیای وب نیاز داری، بهتره که از همین حالا روی دوره آموزش Next.js حساب کنی. از طرف دیگه اگه مدیر سایتی هستی و علاقه داری تا تو مرحله توسعه فرانت اند و خلق رابط کاربری خیلی بیشتر سر از کار در بیاری، خرید دوره نکست جی اس رو بهت پیشنهاد می‌کنم.
چرا دوره Next.js در گروه گاتاکد
فکر میکنی مفاهیم و محیط کار Next.js خیلی سخته؟ و یا فکر میکنی با ساعت‌ها مطالعه با مطالب عمیق و شاید گنگ در این فضا روبرو هستی؟ ولی واقعاً این طور نیست. بهتره بدونی که کل اطلاعات و ابزارها در محیط Next.js رو میشه در چند صفحه خلاصه کرد. اگر هم اندکی از جاوا اسکریپت بدونی و یه مقدار هم React کار کرده باشی، قطعاً می‌تونی مفاهیم Next.js رو تحلیل کنی. اما فکر میکنی تا همین حد برای اجرای پروژه‌های واقعی مطابق با بازار کار کافیه؟
بازار کار از تو پروژه می‌خواد و دیگه براش مهم نیست که چقدر از جاوا اسکریپت و یا Next.js می‌دونی. مهم این هست که بتونی داشته‌های خودت رو در عمل برای یه پروژه حرفه‌ای اجرا کنی. چیزی که من برای تهیه نقشه راه آموزش Next.js در دوره گاتاکد پیش بینی کردم. یادت باشه که مهمترین نکته کسب مهارت عملیاتی هست. برای اینکار یه نقشه راه نیاز داری تا بدونی هر پروژه ازت چی می‌خواد و باید از کجا شروع کنی و در طول پروژه سراغ چه موضوعاتی بری. من خرید دوره نکست جی اس گروه گاتاکد رو بهت توصیه می‌کنم؛ چون اینجا قراره تا با یه نقشه راه همراه من بشی و قدم به قدم با نگاه عملیاتی از سیر تا پیاز Next.js رو یاد بگیری.
در نقشه راه آموزش Next.js قراره چی یاد بگیری؟
قبل از هر چیز باید بدونی که Next.js یه محیط تعاملی با React هست و به نوعی فضای کمکی برای ساده کردن کد نویسی و تعاملی‌تر کردن صفحات وب‌سایت هست. اینجا قرار نیست زبان جدید و یا ساختار جدیدی یاد بگیری، بلکه قراره تا محیط کار با React رو حرفه‌ای‌تر کار کنی. رو این حساب، نقشه راه آموزش Next.js رو تهیه کردم. این مسیر گام به گام به قرار زیر است:
- گام اول؛ آموزش نکات کلی از مفاهیم پایه فرانت اند که برای Next.js سودمند است رو یاد می‌گیری.
- گام دوم؛ آموزش و روش کار با کانسپت‌های اصلی رو یاد می‌گیری، به شکلی که بتونی از همین کانسپت‌ها در پروژه‌های واقعی و کاربردی مطابق با بازار کار استفاده کنی.
- گام سوم؛ وارد فاز عملیاتی می‌شی و قراره تا مرحله به مرحله اصول شکل‌گیری پروژه‌های واقعی رو کار کنی. اصل ماجرا در آموزش Next.js مربوط به همین گام سوم هست. چون تو همین گام هست که می‌تونی از داشته‌های تئوری تا یک نگاه کاملاً عملیاتی رو سپری کنی.
پیش نیاز برای ورود به دوره Next.js
قطعاً علاقه داری تا پس از خرید دوره نکست جی اس تمام و کمال بر مفاهیم این محیط مسلط بشی و بتونی به درستی از قابلیت‌های Next در فضاها مانند React استفاده کنی. همین نکته کافیه بدونی که برای ورود به دوره آموزش نکست جی اس به چه چیزهایی نیاز داری.
اولین پیش نیاز کسب مهارت کافی در فرانت اند و ابزارهای پایه از قبیل CSS و HTML هست. اگه برنامه آموزش CSS رو گذرونده باشی، قطعاً با مفاهیم پایه در محیط کار فرانت اند آشنا هستی. اما در قدم بعدی لازمه تا حتماً دوره آموزش React رو سپری کرده باشی. به هر حال Next.js یه ساختار هست که برای کار و ساده کردن محیط React توسعه پیدا کرده و بدون مهارت کافی در React آموزش نکست جی اس بی معنی و گنگ میشه. خلاصه اگه تو مسیر تبدیل شدن به متخصص نکست جی اس هستی، بهتره که از مباحث HTML آغاز کنی و پس از کسب مهارت کافی در جاوا اسکریپت و React برای خرید دوره نکست جی اس دست به کار شی.
قدم بعدی پس از یادگیری Next.js چیه؟
یادگیری Next.js پایان راه نیست، اما می‌تونه مقصد خیلی خوبی برای افرادی که قصد ورود به بازار کار و تبدیل شدن به متخصصین فرانت اند باشه. در پایان دوره آموزش Next.js گروه گاتاکد تبدیل به متخصص کامل React شدی و به راحتی می‌تونی هر نوع پروژه کد نویسی تو حوزه جاوا اسکریپت رو اجرا و یا مدیریت کنی. البته حتماً باید دست به تمرین داشته باشی و چندین نمونه پروژه عملی رو اجرا کنی و یا پروژه‌های واقعی ساخته شده توسط دیگر برنامه‌نویس‌ها رو تحلیل کنی.
در پایان دوره آموزش نکست جی اس اگر تمرین کافی داشته باشی، یک متخصص فرانت اند کامل هستی و بازار کار پویا و همه‌فن حریف منتظر تو هست. اما اگه بخوای ادامه بدی، راه طولانی و البته هیجانی در پیش داری. پس از این دوره می‌تونی برای تبدیل شدن به فول استک دست به کار بشی و یا بری تو دنیای بک اند و برای لایه های پایین تر سایت آموزش ببینی.
آیا تضمینی هست که Next.js رو خوب یاد بگیری؟
یادگیری موضوعی متفاوت از به کارگیری دانسته‌ها هست و لازمه تا در دوره آموزش Next.js علاوه بر یادگیری مفاهیم و ابزارها هنر کار کردن با این فریم ورک در برنامه‌نویسی فرانت اند رو بلد باشی. اما بدون تعارف یادگیری در گروِ همت خودت هست. من با سال‌ها تجربه در زمینه طراحی سایت و خلق محیط‌های کاربردی فرانت اند، نقشه راه به‌کارگیری از Next.js رو تهیه کردم. بدون اغراق مطمئن هستیم که در تنظیم این دوره به تمام آنچه نیاز داری و آنچه لازمه تا یاد بگیری، اشاره شده و قراره تا محیط کار با این نرم‌افزار رو در فضای کاملاً عملیاتی تجربه کنی. برای یادگیری به چند فاکتور کنار هم نیاز داری:
- از دوره با کیفیت محتوای آموزشی خوب و حرفه‌ای استفاده کنی.
- خودت برای یادگیری مفاهیم علاقمند باشی و مشتاقانه تمرین‌ها رو انجام بدی و حالت‌های مختلف کار با نرم‌افزار رو شبیه‌سازی کنی.
- از پشتیبانی قوی و در دسترس هنگام دوره آموزش برخوردار باشی.
- وقت بزاری و با مرور و تکرار و تمرین مهارت خودت در یادگیری و به‌کارگیری از مفاهیم رو ارتقا بدی.
- از تسلط کافی در محیط جاوا اسکریپت و React برخوردار باشی.
یه بخشی از این شرایط بر عهده من هست تا در دوره آموزش کامل قدم اول اما محکم حرفه‌ای شدن رو برداری. اما در نهایت خودت تضمین یادگیری کامل و کاربردی Next.js هستی. یادت باشه که پس از یادگیری مفاهیم Next.js تازه کار جدی شروع میشه و باید همیشه دست به مطالعه باشی و مستندات به‌روز و رسمی داکیومنت‌های Next.js رو مطالعه کنی.
درآمد و بازار کار متخصص Next.js چطوره؟
یادگیری تنها Next.js بازار کاری نداره. اصلاً قرار نیست تا از این نرم‌افزار (کتابخانه) به شکل انحصاری استفاده کنی، بلکه Next.js ابزاری برای ماهرتر شدن و اجرای کارهای حرفه‌ای‌تر در محیط React وابسته به برنامه‌نویسی جاوا اسکریپت هست. یه جورایی متخصصین React پس از آموزش Next.js تو کار خودشون حرفه‌ای‌تر میشن و می‌تونن رزومه قوی‌تر برای جذب کارفرماهای بهتری داشته باشن. درآمد متخصص React با مهارت کافی در Next.js رقم قابل توجه فراتر از ۳۰ میلیون تومان است. این عدد رقمی نیست که بشه به سادگی از کنارش عبور کرد. البته یادگیری Next.js تازه اول راه برای تبدیل شدن به متخصص همه‌فن حریف دنیای طراحی وب هست.
قیمت دوره Next.js
Next.js فریم ورکی ساده اما کاربردی در محیط برنامه‌نویسی جاوا اسکریپت است که برای ساده‌تر شدن کار با React طراحی شده. پس در کل قرار نیست تا با یک فضای خیلی پیچیده و یا خیلی بزرگ روبه‌رو بشین. اما مهمه که اصول کار با این ابزار رو یاد بگیرین و بتونین به موقع از محیط اون برای ساده‌سازی کارهای کد نویسی استفاده کنین. قیمت دوره Next.js که تهیه کردم در گروه گاتاکد به نسبت از اهداف دوره و جامعیت اون و همچنین تدوین نقشه راه و محیط پویا و کاربردی که ارائه می‌کنه، خوب و به صرفه تنظیم شده. در کل برای خرید دوره نکست جی اس از گاتاکد نگران هزینه‌ها نباشید و مطمئن باشید که ما در گاتاکد شرایط شما در پروژه‌های گوناگون آموزشی رو درک کردیم و می‌دونیم که تا چه اندازه با چالش هزینه روبرو هستید. اینجا قراره تا همه چیز Next.js رو کامل و با کمترین هزینه و نگاه کاربردی مطابق با بازار کار و پروژه‌های واقعی و عملیاتی یاد بگیرین.
معرفی دوره + پاسخ به سوالات متداول
مقایسه React و Next
سئو چیست؟ - نکاتی از سئو برای فرانت‌اند
سئو در پروژه های ری‌اکت
مقایسه CSR و SSR
نقش SSR در پارامتر های موثر بر سئو
ایجاد پروژه Next
بررسی Folder Structure پروژه Next
قابلیت File-System Based Router نکست
ساخت اولین Route در Nextjs
توسعه Nested Route
توسعه Dynamic Route
استفاده از هوک useRouter
ساخت Route های Dynamic - Nested
دسترسی به پارامتر های روت Parent
آشنایی با کامپوننت Link
1 Navigate بین Routeها به صورت Dynamic
آشنایی با Prop های کامپوننت Link
Navigate بین Routeها با ورودی آبجکت (Programmatically)
ریدایرکت کردن یوزر و کار با History مرورگر
توسعه صفحه 404 در پروژه های Nextjs
کاربرد فایل app.js_ چیه؟
کار با Slug
سخن پایانی
بررسی روش های استایل دهی در Next.js
استفاده از روش Global Css
استفاده از روش Css Module
مکانیزم Next.js برای ClassName های یکسان
استفاده از روش Css-in-js
استفاده از Styled-Components در Next.js
استفاده از Bootstrap در Next.js
استفاده از Tailwind در Next.js
استفاده از Sass در Next.js
استایل دهی به Shared-Components - سخن پایانی
مفهوم Pre-rendering و انواع آن
مفهوم Hydration در Pre-rendering
SSR و SSG چطور لود میشن و چه تفاوت هایی دارن؟
Data Fetching در Next.js چطور و کجا انجام میشه؟
استفاده از getStaticProps بدون Data
استفاده از data-fetching در SSG
نکاتی راجع به getStaticProps
پیاده سازی به صورت SSG در روت های Dynamic
استفاده از getStaticPaths
ارسال paths به صورت Dynamic
بررسی SSG در نسخه Build شده پروژه
بررسی قابلیت preFetch کامپوننت Link
بررسی false بودن Fallback
بررسی true بودن Fallback
نمایش صفحه 404 در getStaticProps
ریدایرکت کردن کاربر به صفحه دلخواه در getStaticProps
بررسی blocking بودن fallback
مفهوم ISR
پیاده سازی صفحات به شکل ISR
SSR چیه و کِی استفاده میشه؟
استفاده از getServerSideProps
نکات مهم SSR و تابع getServerSideProps
نکات مهم SSR و تابع getServerSideProps
رندر صفحه بر اساس Query Params
پیاده سازی SSR در Dynamic Routes
بررسی صفحات SSR در نسخه Build پروژه
نمایش صفحه 404 و Redirect کردن کاربر در صفحات Ssr
Client-side rendering در Next.js
استفاده از Json-server به عنوان بک‌اند در پروژه
چه زمانی به CSR نیاز داریم؟
استفاده از CSR در کنار Pre-rendering
معرفی پکیج Swr برای CSR
استفاده از پکیج SWR
سخن پایانی فصل
معرفی فصل و قابلیت Api Route
توسعه اولین Api با متد Get
نحوه دسترسی به متد Request
دسترسی به بادی Request
ارسال رکوئست به Api از طریق فرانت‌اند
توسعه Dynamic Api
آشنایی با Status Code های مختلف
استفاده از فایل json به عنوان دیتابیس با ماژول های fs و path
توسعه Api برای ثبت‌نام کاربر جدید در سایت
توسعه Api حذف کاربر با متد Delete
توسعه Api ویرایش کاربر با متد های Put و Patch
روند ثبت‌نام کاربر در پروژه واقعی
ولیدیشن سمت کلاینت انجام میشه یا سرور؟
استفاده از Slug در توسعه Api
نحوه استفاده از Slug برای هوم‌پیج Api
میشه تو pre-render از Api Route استفاده کرد؟
سخن پایانی فصل
دیتابیس چیست؟
نصب MongoDB و Compass
ایجاد دیتابیس با Mongoose
بررسی connection های ایجاد شده
آشنایی با Model و Schema - ایجاد Model کاربران
ایجاد دیتا در دیتابیس
گرفتن تمام اطلاعات یک Collection
دریافت اطلاعات یک Document
چطور یک Document رو Delete کنیم؟
چطور رو Document رو Update کنیم؟
چطور ObjectID رو Validate کنیم؟
استفاده از دیتابیس در صفحات SSG و SsR
سخن پایانی فصل
توسعه حرفه‌ای‌تر بک‌اند با Next.js
کانفیگ های پیشرفته Schema در Mongoose
مفهوم timestamps
مفهوم Relation در دیتابیس
پیاده سازی Model مدرس‌ها
توسعه Relation از نوع One-To-Many
آشنایی با متد Populate
انتخاب یا حذف فیلد های مورد نظر
انواع Relation در دیتابیس (Reference Vs Embedded)
پیاده سازی Model کامنت‌ها
توسعه Virtual Relation
استفاده از پکیج Fastest-Validator
آشنایی با MongoSH در Compass
مفهوم Middleware چیست؟
پیاده سازی Middleware برای تعیین سطح دسترسی
محدود کردن Middleware به صفحات خاص
کاربرد فایل env چیه؟ - سخن پایانی
معرفی فصل - قراره چی‌کار بکنیم؟
آناتومی توکن JWT
مکانیزم اصولی احراز هویت کاربر
اتصال به دیتابیس و توسعه مدل User
شروع توسعه Api برای ثبت نام کاربر
بررسی استفاده یا عدم استفاده از Username برای کاربران قبلی
Hash کردن پسورد کاربر
ساخت توکن هنگام ثبت نام کاربر
ذخیره سازی توکن در کوکی های مرورگر به شکل HttpOnly
تعیین اولین کاربر به عنوان ادمین
ثبت نام کاربر از طریق فرم کلاینت
نمایش خطا های مناسب طبق Response
توسعه Api لاگین کاربر
وریفای پسورد و جنریت کردن توکن
اتصال فرم لاگین کلاینت به Api
وریفای توکن در داشبورد کاربر
نمایش اطلاعات کاربر وارد شده در داشبورد
توسعه GetMe Api
نمایش منو های سایدبار بر اساس role کاربر
انجام Route Protection در سرور
انجام Route Protection در کلاینت
مفهوم RBAC در احراز هویت کاربر
توسعه قابلیت Logout در نکست
سخن پایانی
معرفی فصل و پروژه
آماده سازی کانفیگ های اولیه
ایجاد Model تودوها
ایجاد Api برای ایجاد Todo
توسعه Api برای دریافت تودو های یک کاربر
ایجاد تودوی جدید برای کاربر از طریق فرم کلاینت
دریافت اطلاعات و تودو های کاربر لاگین شده
نمایش اطلاعات کاربر لاگین شده در پنل کاربری
نمایش تغییرات Todoها به شکل Realtime
توسعه Api برای حذف تودو توسط کاربر
حذف Todo توسط کاربر از طریق کلاینت
پیاده سازی Logout - سخن پایانی
معرفی پکیج Next-Auth
پیاده سازی کانفیگ های اولیه
ایجاد Credentials
توسعه قابلیت لاگین با Next-Auth
ذخیره سازی دیتا در Payload توکن
محافظت از Route از طریق Server
تعیین سطح دسترسی به شکل RBAC در پنل ادمین
توسعه قابلیت Logout با Next-Auth
نمایش لینک های سایدبار بر اساس role کاربر
محافظت از Route از طریق Client
محافظت از Apiها در سمت سرور - سخن پایانی
معرفی فصل
توسعه مدل Otp
خرید پنل پیامک
ایجاد Pattern در FarazSms
توسعه Api برای ارسال Sms
تعیین محدودیت زمانی در وارد کردن کد یک‌بار مصرف
ارسال کد ورود در قالب Sms از طریق فرم لاگین
نمایش نتیجه ارسال Sms به کاربر
توسعه Api برای وریفای کردن کد دریافتی از کاربر
دریافت کد ارسالی و وریفای آن موقع لاگین - سخن پایانی
معرفی فصل
پیاده سازی تقویم و Date Picker - سخن پایانی
استفاده از کامپوننت Image
ویژگی های دیگه‌ای از کامپوننت Image
Prop های پیشرفته Image
استفاده از کامپوننت Head
استفاده از Head در صفحات Ssr
ست کردن کانفیگ های گلوبال Head در _app.js
آشنایی با فایل next.config.js - انواع ریدایرکت دیفالت
آشنایی با basePath
کانفیگ های env
ریدایرکت کاربر از طریق Server
ایجاد Module Path های کاستوم (Absolute Imports)
کاربرد فایل _document.js
پکیج React-toastify
پکیج React-hot-toast
پیاده سازی قابلیت Remember Me - تمرین
مفهوم رفرش توکن - تمرین
قابلیت Static Export نکست - سخن پایانی
پیاده سازی اطلاعات داینامیک مربوط به سئو در Next.js
معرفی Next-v13
آشنایی با App Router
پیاده سازی Dynamic Route
پیاده سازی Nested Route
استفاده از قابلیت Route Group
پیاده سازی Slug در App Router
کاربرد فایل layout.js
پیاده سازی Nested Layout
مفهوم Server Component و Client Component
اگه همه چی سمت سرور رندر میشه، پس Client Component چیه؟
کِی باید از کدوم استفاده کنیم؟ (کلاینت کامپوننت و سرور کامپوننت)
آشنایی با cache جدید نکست
بررسی نسخه SSG در نسخه build پروژه
پیاده سازی SSR در App Router
پیاده سازی ISR در App Router
پیاده سازی سرور کامپوننت و کاینت کامپوننت به صورت Nested
چرا نباید layout رو Client Component کنیم؟
چرا بهتره Client Componentها رو در Leaf قرار بدیم؟
افزایش پرفورمنس پروژه با ارسال اصولی prop به Client Component
مفهوم Streaming Server Rendering
آشنایی با loading.js
loading.js دقیقا کجا Wrap میشه؟
layout چطور stateش رو حفظ می‌کنه؟
آشنایی با فایل template.js
Error Handling در Next.13
استفاده از متد generateStaticParams
توسعه بک‌اند با Next.13
نحوه دسترسی به Body رکوئست
استفاده از Dynamic Params در Api
پیاده سازی Search Params در Api
روش های کار با Cookieها
پیاده سازی Metadata
داینامیک سازی Metadata
استفاده از فونت های گوگل در Next.13
ریفکتور کردن Api ثبت نام
ریفکتور کردن Api لاگین کاربر
پیاده سازی صفحه تودوها
انتقال Client Componentها به leaf
توسعه صفحه لاگین
اتصال صفحه لاگین به بک‌اند
محدود کردن دسترسی کاربران به صفحه تودوها
توسعه Api ایجاد تودو
ایجاد Todo از طریق کلاینت
داینامیک کردن دیتاها بر اساس کاربر وارد شده
توسعه قابلیت Signout
ارسال اصولی props از سرور کامپوننت به کلاینت کامپوننت
Realtime کردن Todos - تمرین - سخن پایانی
رونمایی از پروژه نهایی
آماده سازی Folder Structure و نصب Dependencyها
آماده سازی کانفیگ های اولیه
توسعه Navbar پروژه
پیاده سازی بنر با Swiper
توسعه Metadata و موارد لازم برای سئو
توسعه تمپلیت آخزین محصولات با افکت Aos
توسعه سکشن پروموت مقالات
توسعه تمپلیت Footer
توسعه قابلیت Sticky بودن Navbar
توسعه Helper Function برای Scroll To Top
توسعه صفحه لاگین و ثبت‌نام
توسعه فرم دریافت کد Sms موقع لاگین و ثبت‌نام
توسعه صفحه فراموشی رمز عبور
پیاده سازی کانفیگ های دیتابیس و توسعه مدل User
توسعه Utility های احراز هویت کاربر
توسعه Api برای ثبت‌نام کاربر
اعتبارسنجی دیتا با RegEx
توسعه ثبت‌نام کاربر از طریق فرم ثبت‌نام
پیاده سازی ولیدیشن موقع ثبت‌نام کاربر در کلاینت
توسعه Api برای لاگین کاربر
اتصال فرم لاگین به بک‌اند
نمایش لینک های Navbar بر اساس احراز کاربر
توسعه صفحات About و 404
توسعه صفحه جزئیات محصول
توسعه Model برای محصولات و کامنت‌ها
توسعه Api برای دریافت جزئیات محصولات
توسعه Api برای ثبت کامنت برای محصولات
اتصال صفحه جزئیات محصول به بک‌اند
داینامیک کردن امتیاز محصولات بر اساس کامنت های ثبت شده
ثبت کامنت از طریق کلاینت
پیاده سازی نمایش محصولات مرتبط
توسعه Model علاقه مندی‌ها
نمایش لیست علاقه مندی های هر کاربر
بهینه سازی پروژه و افزایش سرعت لود
توسعه قابلیت افزودن به علاقه‌مندی‌ها
بهینه سازی دیتابیس
توسعه صفحات قوانین و ارتباط با ما
قابلیت ارسال پیام توسط کاربر در صفحه تماس با ما
پیاده سازی نقشه با Leaflet
توسعه Layout پنل کاربری
نمایش فعالیت های کاربر در صفحه پیشخوان پنل
پیاده سازی Protection برای ورود به پنل کاربری
نمایش علاقه مندی های کاربر
دیباگ و بهینه سازی پروژه
توسعه قابلیت حذف محصول از علاقه مندی‌ها
توسعه قابلیت حذف محصول از علاقه مندی‌ها
نمایش وضعیت کامنت های ثبت شده کاربر در پنل کاربری
توسعه قابلیت خروج از اکانت (Logout)
توسعه قابلیت تغییر اطلاعات اکانت توسط کاربر
توسعه Model تیکت‌ها
توسعه Api برای ایجاد تیکت
نمایش دپارتمان‌ها به صورت داینامیک
نمایش واحد های مربوطه برای ارسال تیکت
توسعه قابلیت ثبت تیکت
نمایش همه تیکت های ثبت شده کاربر
نمایش پاسخ های داده شده به تیکت‌ها
الگوریتم ثبت و مدیریت تیکت و پاسخ تیکت
پیاده سازی ریزه کاری های پنل کاربری
مشخص کردن تیکت های پاسخ داده شده
توسعه پیشخوان پنل مدیریت
پیاده سازی آمار فروش و نرخ رشد به شکل نمودار با Recharts
توسعه قابلیت عدم دسترسی افراد عادی به پنل مدیریت
توسعه قابلیت خروج از اکانت
پیاده سازی صفحه مدیریت کاربران در پنل مدیریت
تغییر سطح دسترسی کاربران توسط مدیر
حذف کاربران توسط مدیر
بن کردن کاربران توسط مدیر
نمایش تیکت های ثبت شده در پنل مدیریت
قابلیت پاسخگویی به تیکت‌ها توسط مدیر
مدیریت کامنت های ثبت شده برای محصولات توسط مدیر
تایید یا رد کردن کامنت‌ها توسط مدیر
پیاده سازی Model تخفیف محصولات
توسعه Api برای ایجاد کد تخفیف توسط مدیر
نمایش کد های تخفیف ایجاد شده در پنل مدیریت
ایجاد کد تخفیف جدید توسط مدیر
پیاده سازی قابلیت سبد خرید
نمایش محصولات موجود در سبد خرید کاربر
استفاده از کد تخفیف توسط کاربر هنگام خرید محصول
اعمال درصد کد تخفیف روی مبلغ کل سبد خرید
مدیریت تعداد دفعات استفاده شده از کد تخفیف
ذخیره سازی اطلاعات کاربر در مرورگر جهت Ux بهتر موقع ثبت کامنت
ارسال کد یک‌بار مصرف به شکل Sms موقع ثبت‌نام و لاگین
توسعه Api برای وریفای Otp
ایجاد Access Token موقع لاگین با کد یک‌بار مصرف (Sms)
عدم دسترسی افراد عادی به Api های مهم پروژه
نمایش محصولات سایت در پنل مدیریت
نحوه پیاده سازی آپلودر در نکست
قابلیت آپلود عکس برای هر محصول
ایجاد محصول جدید توسط مدیر
نمایش پاسخِ داده شده به تیکت کاربر
پیاده سازی رفرش توکن
تسک هایی برای دانشجو - سخن پایانی
ثبت شناسه ایرنیک
خرید هاست Node.js
ایجاد Node.js App در هاست
دپلوی پروژه
ایجاد دیتابیس Mongodb روی هاست و اتصال پروژه به آن
اتصال از لوکال به دیتابیس سرور - سخن پایانی
بررسی قابلیت Turbopack
رفتار و ویژگی های فرم در مرورگر
آشنایی با Server Action
استفاده از دیتا های Closure در Server Action
استفاده از Server Action در Client Component
ارسال Parameter به Server Action
مدیریت Submit شدن فرم با هوک useFormStatus
آشنایی با revalidatePath
Reset کردن فرم
مدیریت نتیجه Submitting با هوک useFormState
استفاده از متد های نکست داخل Server Action - سخن پایانی
نصب و راه اندازی پروژه
استفاده از Typeها در Props
استفاده از Typeها در state
نقش تایپ اسکریپت در Api Route - سخن پایانی
توسعه و تست Open Gragh در Local
تست Open Graph بعد از دپلوی پروژه - سخن پایانی
کانفیگ ریداکس در Next
ایجاد Data در Store
دریافت و نمایش همه اطلاعات موجود در Store
حذف اطلاعات از Store - سخن پایانی
ریفکتور پروژه به نکست 14 - سخن پایانی
