توضیحات
NEXT.Js یا NEXT طی چندسال اخیر برای تکمیل و تقویت تکنولوژی React وارد میدون شد و سعی کرد تمام نواقص یا محدودیت های اون رو پوشش بده تا هیچ شک و شبهه ای در قدرت ری اکت برای طراحی صفحات وب باقی نمونه. به عبارتی اومده تا با ویژگی فول استک بودن، React رو فراتر از یک تکنولوژی فرانت اند جا بندازه و از طریق ترکیب اون با Node Js در بک اند، به شما کمک کنه یک پروژه کامل و صفر تا صد وب رو به بهترین شکل طراحی و پیاده سازی کنید.
اگر در برنامه نویسی دنبال کاهش کدهای برنامه، سرعت اجرای فوق العاده وب سایت، فول استک بودن تکنولوژی و همینطور پشتیبانی اون هستید، NEXT یکی از بهترین گزینه های موجود روی میز شما خواهد بود چون علاوه بر داشتن تمام مزایای ری اکت، اکثر ایراداتی که توسعه دهنده های تکنولوژی های رقیب به اون وارد میکردن رو پوشش داده و حتی فراتر از اونها عمل کرده.
در ادامه به طور خلاصه ویژگی های اصلی که باعث افزایش قدرت و محبوبیت NEXT در بین توسعه دهنده ها شده رو باهم بررسی خواهیم کرد. با ما همراه باشید…
- رندرینگ سمت سرور (SSR)
- پشتیبانی از CSR (Client-Side Rendering)
- Routing ساده و اتوماتیک
- پشتیبانی از Static Site Generation (SSG)
تو این دوره قراره چی یاد بگیریم؟
به طور خلاصه در این دوره شما هر آنچه برای مسلط شدن به NEXTJS نیاز داشته باشید به شما آموزش داده میشه. یعنی ابتدا یه سری نکات کلی در مورد سئو در فرانت اند به شما آموزش داده میشه که توصیه میکنیم حتما این قسمتهای اول رو که رایگان هم هستن ببینید تا علاوه بر اصلاح و تکمیل تسلط شما به این موضوع، آمادگی خوبی برای مطالب بعدی پیدا کنید.
در مرحله بعد کانسپت های اصلی و اساسی NEXTJS رو به صورت کامل و عمیق آموزش می بینید به صورتی که بتونید در پروژه های واقعی و کاربردی ازشون استفاده کنید. در واقع در این مرحله هست که به صورت عمیق با NEXTJS و قدرت اون آشنا خواهید شد.
بعد از اینکه تونستید با کانسپت های اصلی NEXTJS آشنا بشید، وارد مرحله جذاب پروژه های عملی میشید و اونجا با چهار تا مینی پروژه مطالب رو مرور خواهید کرد. بعد از اون یک پروژه خیلی خوب توسعه میدید تا مطمئن بشیم به تسلط کامل رسیدید.
این دوره برای چه کسانی مناسب هست؟
دوره جامع NEXT برای دو دسته از دانشجوها خیلی مفید و کاربردی هست.
دسته اول کسانی که در حال حاضر در سطح متوسط و پیشرفته با React کار میکنن
دسته دوم کسانی که قبلا دوره NEXT در جاهای دیگه رو گذروندن اما به هر دلیل خوب مسلط نشدن یا نتونستن از مطالب اون دوره استفاده کنن
اگر جزو یکی از این دوتا دسته هستید، این دوره جامع برای شما تولید شده و اونقدر به دانش و تجربیات شما اضافه میکنه که هر ایده و طرحی تو ذهنتون بیاد رو به راحتی بتونید پیاده سازی کنید یا حتی بخش هایی از پروژه های دیگران رو که از نظر شما جذاب و خلاقانه هستن، در پروژه خودتون بسازید.
چرا سبزلرن بهترین گزینه برای یادگیری هست ؟
ما با سیاست خاصی که در انتخاب استاد، تدوین محتوای آموزشی، قیمت گذاری دوره ها و پشتیبانی موثر در نظر گرفتیم میتونیم این تضمین رو به شما بدیم که در طول دوره آموزش، هیچ کمبودی در هیچ زمینه ای احساس نکنید. بیاید چند مورد از ویژگی های مهم دوره آموزش NEXT سبزلرن رو باهم بررسی کنیم.
- پشتیبانی رایگان و مادامالعمر
- پروژه محور بودن دوره
- منتورشیپ بودن دوره
بعد از اتمام دوره به چه نتیجه ای می رسیم؟
بعد از سال ها تجربه و پرورش صدها برنامه نویس می تونیم به جرات اعلام کنیم که کامل ترین و بهترین دوره آموزش NEXT در اختیار شماست و غیر از اون به هیچ منبع و استاد دیگه ای نیاز نخواهید داشت. با بهترین کیفیت، بهترین مدرس و بهترین پشتیبانی! دوره ای که صدها دانشجو داشته و میزان رضایت اون هارو میتونید در قسمت کامنت های صفحه محصول ببینید. باعث افتخار هست که تونستیم تا این حد نظرات مثبت دانشجویان با شرایط تخصصی و سنی مختلف رو به دست بیاریم. حتما می دونید که محبوبیت سبزلرن به خاطر جامع بودن و عمیق بودن دوره های اون هست و حتی یک دوره عادی و معمولی در سبزلرن پیدا نمی کنید. دوره آموزش NEXT هم از این قاعده مستثنی نیست. شما بعد از دیدن این دوره و مسلط شدن به مباحث هم میتونید در سطح حرفه ای فریلنسری پروژه بگیرید و هم با داشتن امتیاز تسلط به NEXT در اولویت استخدام شرکت ها قرار بگیرید چون به شدت تقاضای اون در بازار کار زیاد هست. ” البته طبیعیه اول کار ذهنتون مقاومت کنه چون تا الان سبزلرنی آموزش ندیدید اما بعد از پایان آموزش خودتون این حس رو پیدا خواهید کرد. البته با کمک و همراهی خود شما! ”این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟
تسلط خیلی خوب روی
ری اکتمهم ترین پیش نیاز این دوره حساب میشه.
همچنین از اونجایی که برای یادگیری ری اکت هم باید کاملا به
HTML CSSو همینطور
جاوا اسکریپتمسلط باشید، پس انتظار میره که این موارد رو هم در سطح قابل قبولی کار کرده و چند پروژه خوب با اونها توسعه داده باشید تا بتونید حداکثر بهره برداری رو از دوره NEXT تجربه کنید.
اگه از دانشجوهای قدیمی سبزلرن باشید که میدونید اما اگه جدیدا افتخار میزبانی از شمارو پیدا کردیم، بدونید که هم دوره HTML و هم CSS در سبزلرن رایگان هستن و در واقع مهمون ما هستید برای شروع یک مسیر هیجانانگیز در زندگی حرفه ای خودتون. این هم از دغدغه پیش نیازهای اولیه!
چطور میتونم پروژه دانشجویان قبلیتون رو ببینم ؟
مدرس هر دوره معمولا صفحه خودش رو در شبکه اجتماعی با شما به اشتراک میگذاره. شما میتونید با دنبال کردن اون با کلی دانشجو و پروژه ای که توسط اونها انجام شده آشنا بشید تا ادعای سبزلرن در مورد کیفیت آموزش ها از جمله
آموزش NEXTبه شما اثبات بشه.
کسانی که مثل خودتون روز اولی داشتن و کلی تردید و نگرانی تو ذهنشون بود اما الان و با ادامه مسیر یادگیریشون در بقیه حوزه ها، به برنامه نویس های حرفه ای تبدیل شدن که هر شرکتی آرزوی همکاری با اونهارو داره . چون از دانشگاه شریف برنامه نویسی یعنی سبزلرن فارغ التحصیل شدن.
وقتی این دوره رو دیدم قدم بعدیم چیه؟
برای شروع قدم بعدی با مشورت گرفتن از طریق پشتیبانی دوره و به اشتراک گذاشتن جزئیاتی از سطح علمی و تجربی، شرایطی شخصی و شغلی خودتون، میتونید بهترین قدم رو برای شروع یادگیری انتخاب کنید و پیش برید.
اما به طور کلی حتما بعد از پایان دوره و توسعه پروژه ها، نمونه کارهای خودتون رو از طریق بخش پشتیبانی برای مدرس دوره ارسال کنید تا از لحاظ فنی بررسی بشه و نظر و راهنمایی دقیقی از ایشون دریافت کنید که میتونه کلی از آزمون و خطاهای آینده شمارو کم کنه.
توصیه سبزلرن اینه که وقتی یک دوره کامل رو می گذرونید، دیگه وقت تمرین کردن و پروژه ساختن هست. حتی میتونید پروژه هایی که تو ذهنتون هست یا دیگران ساختن رو بنویسید تا کاملا مطمئن بشید به حد کافی از تسلط رسیدید و یه رزومه قابل قبول تدوین کنید. بلافاصله بعد از این روزها می تونید با اعتماد به نفس کامل وارد بازار کار بشید و از این آموزشها پول های درشت بسازید که اون موقع هزینه دوره در مقابل اونها کاهی به کوهه!
چه تضمینی هست که خوب و کامل یاد بگیرم؟
چندین دلیل هست که معمولا باعث نتیجه گیری عالی شما از دوره آموزش NEXT میشه :
- کیفیت محتوای آموزشی و مدرس دوره
- اشتیاق و علاقه مندی بالا برای یادگیری
- پشتیبانی در دسترس و قوی در حین آموزش
- مرور و تمرین مطالب و انبار نکردن اونها برای روز مبادا !
- تسلط نسبی به زبان انگلیسی، جاوا اسکریپت و React
- مطالعه منظم و کامل مستندات رسمی NEXT (داکیومنت)
این تخصص از لحاظ درآمدی چطوره ؟
وقتی یک زبان برنامه نویسی یا فریم ورک خاصی روند توسعه خیلی خوبی می گیره، به دنبالش کاربرد و رواج اون هم در کشورها بیشتر میشه. بعدش چه اتفاقی میفته؟! تقاضای متخصص اون زبان در بازار زیاد میشه. بعدش ؟
چون میزان تقاضا نسبت به افراد متخصص این حوزه خیلی بیشتر هست، پس حقوق ها هم در سطح بالایی تعیین میشه. به عنوان مثال برنامه نویس React و NEXT بسته به بزرگی شهر محل سکونت یا پروژه بین 30 تا 60 میلیون تومن ماهانه دریافت می کنه که 4 تا 8 برابر یک حقوق عادی اداره کار درنظر گرفته شده. هرچند معمولا حقوق و دستمزد متخصص NEXT بیشتر از React هست چون تکنولوژی مدرن تری محسوب میشه و آینده جاوا اسکریپت رو در زمینه برنامه نویسی وب رقم میزنه.
پس بدونید که آینده این تخصص از لحاظ درآمدی هم فوق العادست به شرطی که به مهارت بالایی برسید.
مدرس این دوره چه کسی هست و چه مزیتی نسبت به دیگران داره؟
مدرس این دوره استاد سعیدی راد هست که با تجربه بالا و سابقه طولانی که در زمینه برنامه نویسی (به خصوص جاوا اسکریپت) داره، مطالب رو به ساده ترین شکل ممکن بیان می کنه طوری که خودتون هم نخواید یاد بگیرید، آخرش یاد میگیرید. ایشون انتخاب شده چون اعتقاد داریم مدرسی که اطلاعاتش به روز هست و مستقیما با بازار کار جاوا اسکریپت و کل تکنولوژی های زیرشاخه اون سروکار داره، سبکش با مدرس عادی و تئوری محور متفاوته. (مثل اکثر اساتیدی که در دانشگاه داشتیم!)
یکی از خصلت های ویژه ایشون اهمیت به پشتیبانی فنی دانشجوهاست و تا حد امکان به صورت مستقیم مشکلات و سوالات اون هارو در پلتفرم های مختلف جواب میده. آقای سعیدی راد هم مثل بقیه اساتید سبزلرن یه راست وارد اصل مطلب میشه و شاخ و برگ اضافی و خسته کننده در آموزش های ایشون نمی بینید و این یعنی
بهترین آموزش NEXTرو در کنار ایشون تجربه می کنید.
اگر هم قبلا دوره جامع آموزش جاوا اسکریپت رو با ایشون گذرونده باشید پس قطعا با کیفیت و سبک جذاب تدریس اون آشنا هستید.
مدت دوره کمه یا زیاد؟ آپدیت هم میشه؟
مدت دوره
آموزش NEXTهم مثل بقیه دوره های سبزلرن، کاملا متناسب با موضوع و تنوع مطالب اون تعیین شده و با هر تغییری که در دنیای تکنولوژی و مطالب آموزشی اتفاق میفته، طبیعتا برنامه آموزشی سبزلرن هم متناسب با اون آپدیت میشه. بیشتر زمان این دوره مربوط به کدنویسی و پروژه های تمرینی هست. برای همینه که با قاطعیت میگیم این دوره صفر تا صد محسوب میشه.
از طرف دیگه مدرسین هر دوره به دلیل آپدیت بودن با شرایط تکنولوژی و بازار کار، در اولین فرصتی که آپدیت یا اصلاح خاصی کشف کنن، حتما فایل های جدید رو به عنوان آپدیت در اختیار تیم پشتیبانی سبزلرن قرار میدن تا به پنل کاربری دانشجوها اضافه بشه. بنابراین خیالتون از بابت پویا بودن و به روز بودن مطالب دوره هم راحت راحت باشه!
اگر با سوال یا مشکلی مواجه شدم، پشتیبانی می کنید؟
100%
رایگان، سریع، راحت!
ما در سبزلرن اعتقاد داریم تا زمانی که دانشجو در عمل نتونسته یک پروژه رو صفر تا صد با محتوای دوره پیاده سازی کنه، پس هنوز یادگیریش تموم نشده و تا رسیدن به این مرحله، علاوه بر اساتید، تیم پشتیبانی هم در دسترس شما هست تا هر سوال یا ابهامی داشتید به شما کمک کنه.
ما کاملا درک می کنیم ورود به دنیای برنامه نویسی بدون داشتن پشتیبان در دسترس به عنوان یک دوست قابل اعتماد، در یادگیری و رسیدن به نتیجه چقدر سخته. برای همین با تمام وجود در کنارتون هستیم تا به هر تخصصی که دوست دارید برسید. تمام قد!!!!
یادگیری NEXT در ادامه مسیر شغلی و تخصصی چه کمکی به من میکنه؟
گفتیم که جاوا اسکریپت یکی از زبان های پرکاربرد و رایج دنیای امروز هست که تخصص های مختلف داره. یعنی وقتی خود جاوا اسکریپت خام رو یاد گرفتید، بعد از اون با یادگیری استفاده از انواع کتابخانه ها و فریمورکهای مبتنی بر جاوا اسکریپت مثل React و بعد همین NEXT که جزو مدرن ترین تکنولوژی های این حوزه هستن، میتونید مستقیما وارد بازار کار شده و انواع پروژه های کوچک و بزرگ رو به بهترین شکل و کاملا استاندارد بنویسید. یادتون باشه با تکنولوژی هایی طرف هستید که در غول هایی مثل فیسبوک و اینستاگرام از اونها استفاده میشه …
” یاد گرفتن و تسلط به NEXT به معنی پادشاهی در حوزه برنامه نویسی وب و جاوا اسکریپت هست چون علاوه بر فول استک بودن، مزیت های فوق العاده ای در سرعت و انعطاف پذیری داره که کار روی برای رقبای دیگه سخت میکنه.”
مطالب دوره واقعا صفر تا صد هست و نیاز به دوره و استاد دیگه ای نخواهیم داشت؟
اساسا یک دوره آموزشی خوب باید در حدی جامع و کامل باشه که دانشجو بین سایت ها و دوره های مختلف سردرگم نشه. سبزلرن هم با همکاری و همفکری اساتید، مطالب آموزشی رو طوری طراحی کرده که بعد از پایان اون دوره، نیاز خاصی به دورههای مشابه دیگه نخواهید داشت.
برای اطمینان از کیفیت، ما به طور مستمر محتوای آموزشی رو با منابع و داکیومنت های رسمی و همینطور نیاز بازار کار تطبیق میدیم تا هم از لحاظ کامل بودن و هم ترتیب یادگیری در بهترین حالت ممکن باشه. برای همین هست که دورههای سبزلرن تقریبا تمام سرفصل های اصلی رو شامل میشه و دانشجوها هرچیزی که برای تبدیل شدن به یک برنامهنویس حرفهای نیاز دارن رو آموزش می بینن.
این دوره طوری طراحی شده که با صرف کمترین زمان به نتیجه مطلوب می رسید و
pdf آموزش NEXTهم در اختیارتون قرار میگیره تا راحت تر بتونید هرجا و در هر زمانی به مطالعهی اون بپردازید.
برای یادگیری و تسلط کامل باید شبانه روزی تمرین کنم؟
تمرین شبانه روزی و بی وقفه ممکنه روزهای اول به خاطر انگیزه و اشتیاق باشه اما به مرور زمان و با آثار مخربی که به سلامتی جسمی و روحی شخص وارد میکنه، جای خودش رو به خستگی و بی حوصلگی میده. تعادل در همه چیز خوبه حتی تمرین!
روزی چند ساعت باید وقت بگذارم تا خوب یاد بگیرم؟
این سوال در مورد هر درس و رشته ای غلط هست چون هر شخصی نسبت به آمادگی ذهنی، علاقه، پشتکار و زمانی که برای آموزش اختصاص میده، تعیین میکنه هر درسی رو در چه زمانی یاد بگیره. بنابراین نمیشه یک نسخه واحد برای همه پیچید اما یه قانون قطعی وجود داره. هرچقدر زمانی که میذارید با چاشنی تمرکز و اشتیاق همراه باشه، فاصله شما تا رسیدن به هدف نهایی هم کوتاه تر خواهد بود. حالا فرقی نمیکنه
آموزش NEXTباشه یا کاراته یا آشپزی!
به قول شاعر :
رهرو آن نیست که گهی تند و گهی خسته رود رهرو آن است که آهسته و پیوسته رود…
این دوره گارانتی هم داره؟!
اولین تضمین، نظر دانشجویان قبلی هست که میتونید کاملا شفاف مطالعه کنید. دومین تضمین رایگان بودن بخش های اول اون هست که هیچ ریسکی برای شما ایجاد نمیکنه. بنابراین می تونید با خیال راحت و بدون دغدغه فقط روی آموزش دیدن تمرکز کنید و قبل از پرداخت هزینه، با سبک تدریس و کیفیت کلی دوره آشنا بشید.
ما سال هاست که در زمینه آموزش برنامه نویسی، هزاران دانشجوی عزیز مثل شمارو تحویل جامعه نرم افزار و توسعه وب دادیم و همیشه سعی کردیم با رفع نواقص و خطاها، بهترین شرایط رو فراهم کنیم. با این وجود اگر به هر دلیلی از کیفیت آموزش ها راضی نبودید می تونید خیلی راحت به پشتیبانی تیکت بزنید و وجه پرداختی خودتون رو پس بگیرید. این حق شماست!
هرچند همین که سبزلرن این امکان رو فراهم کرده تا موقتا کاربران بتونن بخش های اول دوره
آموزش NEXTرو به صورت رایگان ببینن، خودش دلیلی بر حسن نیت و اعتماد ما به کیفیت دوره در مقابل بقیه آموزش های موجود هست.
شرکت نکنم چه چیزی رو از دست میدم؟
شما یا قصد دارید به صورت تخصصی وارد برنامه نویسی وب بشید یا نه! اگر چنین قصدی ندارید و صرفا برای تحقیق یا احیانا کنجکاوی دنبال آموزش هستید که جای خود!
اما اگه قصد حرفه ای شدن و متخصص شدن در یکی از حوزه های برنامه نویسی به خصوص برنامه نویسی وب رو دارید، سهل انگاری در تکمیل آموزش تکنولوژی های تخصصی مثل NEXT به عنوان ترمز برای شما عمل میکنه و پیشرفتتون رو به تاخیر میندازه.
” چون دنیای تکنولوژی و برنامه نویسی خیلی سریع درحال پیشرفت و پوست اندازیه و اگه نتونید با این جریان خروشان همراه بشید قطعا نهایت موفقیت شما کارمندی عادی یا فریلنسری در پروژه های کوچیک و متوسط هست که سال به سال هم کمتر و کمتر خواهند شد. اما اگه متخصص بهروزی باشید، مثل یه توپ شناور در استخر، هرچقدر هم تکنولوژی جدید بیاد و تنوع بیشتر بشه، شما اتوماتیک در بالاترین سطح باقی میمونید و حرف اول رو در بازار می زنید. ”
در این دوره چه پروژه هایی تمرین می کنیم؟
- پروژه ToDoList همراه با بک اند کاملی که باهم توسعه میدیم.
- Task management : یک مدیر گروه زمانی که چندتا کاربر یا کارمند داره میتونه برای هر کدوم از این کارمندان تسک یا ماموریت مشخص کنه.
- مینی پروژه pagination هم پروژه بعدی هست که به طور کامل توسعه داده میشه.
- یک پروژه املاکی کامل و فوق العاده که شامل صفحه اصلی، صفحه دسته بندی محصولات و صفحه جزئیات محصول میشه.
- پروژه نهایی و بزرگ دوره هم یک CMS فروشگاه قهوه هست که به صورت اختصاصی طراحی و توسعه خواهیم داد.
کلام آخر
توضیحات دوره انقدر جامع و شفاف بود که بعید میدونیم جای سوال و ابهامی برای شما باقی مونده باشه اما به طور خلاصه و برای یادآوری، به شما میگیم که این دوره با یک استاد حرفه ای و کاربلد، مطالب کامل و بیانی ساده ضبط شده که یادگیری اون میتونه راه شمارو برای ادامه مسیر برنامه نویسی وب هموارتر کنه.
از اونجایی که NEXT یک غول تمام عیار و فول استک بر پایه جاوا اسکریپت و ری اکت هست، با ویژگی های فنی جذاب و سرعت و انعطافپذیری فوقالعاده ای که داره، به نوعی مکمل React برای پوشش دادن نقاط ضعف و همینطور مدیریت بخش بکاند اون محسوب میشه و به شدت مورد استفاده پروژه های بزرگ و کوچیک قرار گرفته. بنابراین واضحه که یادگیری اون میتونه سکوی پرتابی برای شما باشه تا خودتون رو با شرایط بازار کار وفق بدید و زندگی مالی فوقالعاده ای رو تجربه کنید.
تیم سبزلرن هم که همه چیز رو آماده کرده و همه مقدمات لازم رو از صفر تا استخدام برای شما تدارک دیده تا در یک محیط کاملا حرفه ای، پویا و تعاملی، به روزترین آموزش هارو دریافت کرده و به یک Web Developer واقعی و کامل تبدیل بشید. پس اصلا معطل نکنید و همین الان اولین جلسات رو بصورت رایگان شروع کنید…
هرسوالی داشتید همینجا بپرسید تا مشاوران سبزلرن در کمترین زمان ممکن به شما جواب بدن
جلسات
معرفی دوره + پاسخ به سوالات متداول
مقایسه 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
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 - سخن پایانی
معرفی پروژه
اماده سازی Folder Structure اصولی برای پروژه
ایجاد Layout صفحات
تکمیل صفحه Home Page پروژه
ایجاد کامپوننت Home
توسعه Route جزئیات ملک
توسعه صفحه لیست ملک های املاکی
توسعه قابلیت سرچ کاربر بین ملکها
مرتب سازی ملکها توسط کاربر
استفاده از FontAwesome در Next.js
نمایش Pagination املاک به صورت داینامیک
توسعه لاجیک Pagination
سخن پایانی
مفهوم 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
دسترسی به request و response در صفحات SSR
رندر صفحه بر اساس Query Params
پیاده سازی SSR در Dynamic Routes
بررسی صفحات SSR در نسخه Build پروژه
نمایش صفحه 404 و Redirect کردن کاربر در صفحات Ssr
Client-side rendering در Next.js
استفاده از Json-server به عنوان بکاند در پروژه
چه زمانی به CSR نیاز داریم؟
استفاده از CSR در کنار Pre-rendering
معرفی پکیج Swr برای CSR
استفاده از پکیج SWR
سخن پایانی فصل
معرفی پروژه سایت کافه
آماده سازی Folder Structure
نصب Dependency های پروژه
توسعه ماژول Navbar
پیاده سازی اسلایدر با پکیج Swiper
توسعه تمپلیت About برای Homepage
توسعه تمپلیت Services
داینامیک سازی آیکونها
نیازسنجی پروژه ک تنظیم دیتابیس با Json-server
Fetch کردن خدمات کافه از سرور
توسعه تمپلیت و قابلیت عضویت خبرنامه
توسعه تمپلیت منوی کافه و رزرو آنلاین
توسعه ماژول Footer و تمپلیت کامنتها
توسعه صفحه About به صورت SSG
توسعه صفحه خدمات به صورت SSG
توسعه صفحه منوی کافه به صورت ISR
توسعه صفحات رزرو آنلاین و گواهیها به صورت ISR
توسعه صفحه ارتباط با ما به صورت SSG و ارسال اطلاعات به سرور
توسعه قابلیت Global Search در Navbar
توسعه صفحه نمایش نتیجه سرچ به صورت SSR
توسعه صفحه جزئیات محصول
نمایش امتیاز محصول به صورت Star
نمایش کامنت های ثبت شده برای هر محصول به صورت ISR
سخن پایانی
معرفی فصل و قابلیت 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
سخن پایانی فصل
معرفی فصل
نیازسنجی پروژه و ایجاد Model های مورد نیاز
ایجاد Api ایجاد دوره در سایت
ایجاد دوره توسط مدیر/مدرس سایت در فرانتاند
نمایش نتیجه ایجاد دوره با Swal
دریافت و نمایش لیست همه دوره های برگزار شده
توسعه Api حذف دوره توسط مدیر/مدرس
توسعه Api ویرایش اطلاعات دوره
استفاده از Api ویرایش دوره در فرانتاند پروژه
ایجاد ارتباط فرانتاند و بکاند به شکل Realtime
توسعه Api برای سرچ گلوبال در سایت
آماده سازی صفحه نمایش نتایج سرچ
نمایش نتیجه سرچ گلوبال به مدیر/مدرس
سخن پایانی
معرفی فصل - قراره چیکار کنیم؟
کانفیگ های پیشرفته 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 برای ورود به پنل کاربری
نمایش علاقه مندی های کاربر
دیباگ و بهینه سازی پروژه
توسعه قابلیت حذف محصول از علاقه مندیها
آشنایی با TurboPack
نمایش وضعیت کامنت های ثبت شده کاربر در پنل کاربری
توسعه قابلیت خروج از اکانت (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 - سخن پایانی
معرفی درگاه زرین پال - ایجاد Model پرداختها
دریافت لینک پرداخت با مبلغ مشخص از زرین پال
ذخیره اطلاعات پرداخت در دیتابیس
اعتبارسنجی نتیجه پرداخت کاربر
مکانیزم اصولی سبد خرید و پرداخت - تست درگاه پرداخت - سخن پایانی
ریفکتور پروژه به نکست 14 - سخن پایانی
پیش نیاز ها
پشتیبانی
این دوره مجهز به «سبزبات» ربات هوشمند مبتنی بر هوش مصنوعی است.
اگر در حین مشاهده جلسات دوره با سوال یا ابهامی مواجه شدید، میتوانید پرسش خود را از سبزبات بپرسید و در همان لحظه پاسخ دریافت کنید. در صورتی که نیاز به توضیح بیشتر یا پاسخ تخصصی مدرس داشتید، کافی است از سبزبات بخواهید تا سوال شما را به مدرس دوره ارجاع دهد تا مستقیماً توسط مدرس پاسخ داده شود.
نظرات
