آموزش Next.js – دوره جامع

299,000 تومان
218 دانشجو
به روز رسانی: ۸ بهمن ۱۴۰۱
این دوره در حال برگزاری است
ثبت نام در دوره

Next.js یک فریم‌ورک متن باز برای توسعه نرم‌افزارهای تحت وب است. این فریم‌ورک براساس کتابخانه React ساخته شده. React روی مباحث UI و مفاهیمی مثل کامپوننت، state و props تمرکز دارد. از این ‌رو یک کتابخانه به ‌حساب می‌آید که از آن برای پیاده‌سازی UIهای پیچیده‌تر استفاده می‌کنیم. اگر بخواهیم یک برنامه با مقیاس بزرگ‌تر با استفاده از React توسعه دهیم به موارد دیگری از جمله پکیج‌های Routing نیاز خواهیم داشت.

Next.js دارای یکسری ویژگی می‌باشد که یا در React وجود ندارند و یا این که استفاده از آن‌ها در React کمی پیچیدگی بیشتری دارد. همانطور که می‌دانیم فریم‌ورک ابزار بزرگ‌تری نسبت به کتابخانه است در نتیجه امکانات بیشتری می‌تواند داشته باشد. یعنی با استفاده از Next.js می‌توانیم برنامه‌ها با مقیاس بزرگ‌تر را ساده‌تر توسعه دهیم.

نکته مهم این است که Next.js یکسری ویژگی‌های اصلی دارد که مهم‌ترین آن‌ها Server Side Rendering (SSR) است. تفاوت SSR و CSR این است که در SSR کانتنت صفحات سایت روی سرور آماده می‌شوند اما در CSR این اتفاق در سمت کلاینت می‌افتد. این موضوع گاهی اوقات می‌تواند باعث ایجاد چالش‌هایی، از جمله مباحث بهینه‌سازی برای موتورهای جستجو شود.

یک ویژگی دیگر Next.js این است که می‌توانیم ساده‌تر قسمت API برنامه را با استفاده از Node به Next.js اضافه کنیم. در نتیجه می‌توانیم با پایگاه داده به شکل ساده‌تر ارتباط برقرار کنیم. پس می‌توانیم بگوییم این ویژگی Next.js را به یک فریم‌ورک فول‌استک تبدیل می‌کند. همین موضوع می‌تواند باعث شود تا برنامه‌های فول‌استک را خیلی ساده‌تر و استانداردتر پیاده‌سازی کنیم.

بازار کار Next.js

رشد بسیار خوب React و Next.js باعث شده است تا این فریم‌ورک از بازار کار خیلی خوبی برخوردار باشد. همینطور توانایی Next.js در حل چالش‌هایی مانند سئو باعث شده است تا شرکت‌های زیادی به سمت استفاده از این فریم‌ورک بروند. از طرف دیگر استارت‌آپ‌ها با استفاده از Next.js می‌توانند هم از ویژگی‌های React استفاده کنند و هم با کمک ویژگی‌های Next.js بتوانند به یک حالت فول‌استک دست پیدا کنند. از این رو تقاضا برای متخصصین این حوزه بسیار زیاد است.

دوره آموزش Next.js فرانت کست

دوره آموزش Next.js فرانت کست از پایه‌ای‌ترین مفاهیم شروع شده و به صورت قدم به قدم طراحی شده است. برای شرکت در این دوره هیچ نیازی به دانش قبلی درمورد Next.js وجود ندارد زیرا آموزش همه مفاهیم به‌طور جامع در این دوره صورت گرفته است. یادگیری در این دوره با انجام تمرین و چالش‌های مختلف به شکل عمیق انجام می‌شود. پس از آن، پروژه دوره شروع می‌شود. پروژه دوره یک فروشگاه پیشرفته فول‌استک می‌باشد که برای توسعه آن از ابزارهای مدرن استفاده کرده‌ایم.

پیش‌نیاز دوره آموزش Next.js درک مفاهیم React و جاوااسکریپت است. اگر با کتابخانه React آشنا هستید و قصد مرور و یادآوری مفاهیم را دارید، دوره آموزش React – دوره فشرده را به شما پیشنهاد می‌کنیم. اما اگر هیچ دانش قبلی از React و مباحث مربوط به کامپوننت، state و props ندارید پیشنهاد ما آموزش React و Redux – دوره جامع می‌باشد که چالش‌ و پروژه‌ محور بوده و همه مفاهیم مربوط به React را شامل می‌شود. همینطور برای جاوااسکریپت هم دوره آموزش جاوااسکریپت – دوره جامع فرانت کست را پیشنهاد می‌کنیم.

آموزش Next.js یک دوره منتور محور است. به این معنی که اگر در هر مرحله از یادگیری به مشکل برخورد کردید می‌توانید در روزهای غیر تعطیل از طریق واتس‌اپ مشکل خود را با مدرس دوره درمیان بگذارید تا در سریع‌ترین زمان ممکن آن را باهم بررسی کرده و برطرف نمایید.

مدرس دوره

مسعود صدری مدرس و توسعه دهنده نرم افزار، فارغ‌ التحصیل از رشته مهندسی نرم‌افزار، برنامه نویسی را از سال ۱۳۹۱ به شکل حرفه‌ای شروع کرده است. او در سال‌هایی که در حوزه برنامه نویسی حرفه‌ای فعالیت داشته، با شرکت های نرم افزاری و تیم‌های استارتاپی همکاری داشته و بیشتر بر روی فریلنسیگ تمرکز کرده است. او سال‌ها به عنوان برنامه نویس فریلنسر مشغول به کار بوده و همین امر باعث شده تا نیازهای بازار کار را به خوبی بشناسد و تجربه‌های زیادی در این زمینه کسب کند.

مسعود صدری تدریس را از سال ۱۳۹۴ به شکل حرفه‌ای، با آموزشگاه مجتمع فنی تهران شروع کرده و همیشه جزء یکی از برترین مدرسان برنامه نویسی بوده است. سپس تصمیم به برگزاری دوره‌های برنامه نویسی در دانشکده مهندسی برق و کامپیوتر دانشگاه تبریز گرفته که مورد استقبال بسیار خوب دانشجویان قرار گرفت. فعالیت‌های او در دانشگاه تبریز، به عنوان مدرس دانشگاه ادامه داشته و اکنون تدریس کارگاه‌های مبانی برنامه سازی و برنامه سازی پیشرفته را برعهده دارد. نهایتا از سال ۱۳۹۷ تدریس آنلاین هم به لیست فعالیت‌های آموزشی او اضافه شده است.

تمام تلاش مسعود صدری این است که نیازهای بازار کار را بصورت دقیق تحلیل کند و براساس روند پیشرفت محبوبیت یک تکنولوژی و نیازهای بازار کار جامع‌ترین و به‌روزترین سرفصل‌ها را برای تکنولوژی‌های مختلف آماده کند تا افرادی که به این حوزه علاقمند هستند بتوانند مطالب را به بهترین و ساده‌ترین زبان ممکن یاد بگیرند و بطور مستقیم وارد بازار کار شوند.

پشتیبانی دوره

یکی از موضوعات بسیار مهم در فرانت کست پشتیبانی دوره‌ها می‌باشد که برعهده مدرس دوره است. مدرس به عنوان یک منتور از ابتدای مسیر قدم به قدم، تا زمانی که دانشجو تمامی مطالب را بصورت کامل یاد بگیرد، همراه اوست. ما بر این باور هستیم که هیچ شخصی بهتر از مدرس دوره نمی‌تواند پاسخگوی سوالات دانشجویان باشد. از این رو، در فرانت کست مدرس خود را موظف می‌داند تا در تمامی روزهای هفته، به جز روزهای تعطیل، سوالات دانشجویان را بررسی کند. برای پشتیبانی و دریافت مشاوره می‌توانید از راه‌های ارتباطی نوشته شده در وب‌سایت استفاده کنید.

گارانتی بازگشت وجه

ما در فرانت کست به دوره‌ها و محتوایی که آماده شده است ایمان کامل داریم و معتقد هستیم اگر دانشجویان براساس مسیر یادگیری که آماده کرده‌ایم پیش بروند قطعا به هدفی که دارند دست پیدا می‌کنند. مهم‌ترین هدف ما این است که دانشجویان در کمال آرامش و بدون کوچکترین استرسی یادگیری را شروع کنند. به همین جهت، گارانتی بازگشت وجه برای تمامی دوره‌های غیررایگان درنظر گرفته‌ایم. اگر شما به هر دلیل از ادامه دادن مسیر منصرف شوید، می‌توانید تا ۳۰ روز بعد از ثبت‌ نام برای بازگشت وجه درخواست بدهید. ما بدون هیچ سوالی تمام هزینه‌ای که برای یادگیری خود سرمایه‌گذاری کرده بودید را عیناً به حساب شما بازمی‌گردانیم.

سرفصل‌ها

۱. پیش‌نیازهای دوره
۲. ساختار دوره و پشتیبانی
۳. بررسی Next.js
۴. امکانات Next.js
۵. راه اندازی محیط توسعه
۶. بررسی ساختار Next App

۷. بررسی Routing در Next.js
۸. مقادیر Static در Routeهای زیرمجموعه
۹. مقادیر Dynamic در Routeها
۱۰. استفاده از Routeهای زیرمجموعه
۱۱. دریافت مقادیر مسیرها
۱۲. بررسی کامپوننت Link
۱۳. استفاده از Routeهای Dynamic
۱۴. نمایش صفحات بر اساس متد
۱۵. افزودن صفحه ۴۰۴
۱۶. جمع بندی مفاهیم

۱۷. فرآیند Pre-render
۱۸. بررسی تابع getStaticProps
۱۹. اجرای کد سمت سرور
۲۰. استفاده از پارامترهای Dynamic
۲۱. بررسی تابع getStaticPaths
۲۲. صفحات Fallback
۲۳. نمایش داینامیک مسیرها
۲۴. بررسی و استفاده از getServerSideProps
۲۵. پارامتر Context در getServerSideProps
۲۶. پیاده سازی صفحات داینامیک
۲۷. ارسال درخواست API از قسمت Client
۲۸. اجرای درخواست‌های API سمت Server
۲۹. جمع‌بندی مفاهیم

۳۰. توسعه API Routes
۳۱. پیاده سازی فرم فرانت‌اند
۳۲. توسعه API برای درخواست POST
۳۳. ارسال درخواست به API
۳۴. ذخیره داده‌ها در فایل
۳۵. استفاده از API برای دریافت داده‌ها
۳۶. دریافت داده‌ها در Server
۳۷. مقادیر Dynamic در API Routes
۳۸. نصب و راه اندازی MongoDB
۳۹. ذخیره داده‌ها در پایگاه داده
۴۰. دریافت داده‌ها از پایگاه داده
۴۱. جمع‌بندی مفاهیم

۴۲. بررسی به روز رسانی Next.js 13
۴۳. ساختار پروژه
۴۴. نصب و راه‌اندازی Tailwind
۴۵. کامپوننت Layout
۴۶. پیاده سازی Header و Footer
۴۷. توسعه کامپوننت Product
۴۸. نمایش محصولات در صفحه اصلی
۴۹. پیاده سازی صفحه محصول
۵۰. نمایش جزییات محصول
۵۱. توسعه Context سبد خرید
۵۲. تابع افزودن به سبد خرید
۵۳. تعداد محصولات در سبد خرید

دیدگاه‌ها:

meysam192

بهمن 9, 1401  در  9:36 ق.ظ

ممنونم از لطفتون. شما تا ایجا که پیش رفتیم واقعا اینقدر شمرده و مفهومی پیش رفتید که جای سوالی از مفاهیم نمونده.
طبق پیشنهادتون ریویو کردن مفاهیم پیشرفته js و یک مقدار جزوه نویسی مفاهیم جدید جلسه ۱۹ برای بخاطر سپردن واقعا کمک کرد برای گذروندن این مرحله از کار.

مسعود صدری

بهمن 9, 1401  در  4:21 ب.ظ

خواهش می‌کنم.
باز هم اگر سوالی بود در خدمتم.

meysam192

بهمن 8, 1401  در  8:26 ب.ظ

استاد رسیدم فصل “بررسی Pre-render در Next.js”
همه چیز جدید و ارتباط برقرار کردن باهاشون سخته واقعا

مسعود صدری

بهمن 8, 1401  در  11:46 ب.ظ

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

رامین مجیدی

بهمن 8, 1401  در  12:51 ب.ظ

با عرض سلام و وقت بخیر ، قسمت های جدید که امروز آپلود شده لینکشون مشکل داره و خطای ۴۰۴ میده لطفا بررسی کنید با تشکر.

مسعود صدری

بهمن 8, 1401  در  5:26 ب.ظ

سلام
وقت بخیر.
ممنون که اطلاع دادید. مشکلی پیش اومده بود که برطرف شده.
لطفا مجدد امتحان کنید.

rezadianaty

بهمن 6, 1401  در  7:49 ق.ظ

درود بر شما جناب صدری گرامی. پیشنهاد میکنم اگر امکانش براتون هست بجای redux از redux toolkit استفاده کنید. چون در خود سایتش پیشنهاد کرده که اینکار رو بکنیم و اینکه من در آموزش هایی که در جاهای مختلف مثلا یوتیوب و یودمی دیدم تقریبا دارن به همین سمت میرن. سپاس از شما.

مسعود صدری

بهمن 6, 1401  در  4:34 ب.ظ

سلام
ممنونم از پیشنهادتون.
در این دوره تمرکز ما روی مفاهیم Next.js هست. به همین دلیل برای مدیریت State از Context کتابخانه React استفاده می‌کنیم.
بررسی مفاهیم Redux Toolkit باعث پیچیدگی بیشتر دوره خواهد بود و ما رو از هدف اصلیمون که پیاده سازی یک پروژه Fullstack با Next.js هست دور می‌کنه.
برای Redux Toolkit یک دوره مجزا خواهیم داشت.

frontendjalal

بهمن 5, 1401  در  8:18 ق.ظ

سلام استاد عزیز
ادامه دوره کی بارگذاری میشه؟

مسعود صدری

بهمن 5, 1401  در  12:55 ب.ظ

سلام
شنبه ۸ بهمن.

amirrezaakbari81

بهمن 3, 1401  در  5:02 ب.ظ

سلام خدمت استاد گرامی
یه سوال داشتم آیا با NEXT می شود بخش BACKEND پروژه رو پوشش داد یا نیاز به NODE و EXPRESS هستش تا بتونیم یه پروژه دینامیک داشته باشیم تا رو سرور ببریم
با تشکر از شما

مسعود صدری

بهمن 3, 1401  در  9:50 ب.ظ

سلام
بله امکان پذیر هست.
لطفا عناوین فصل API Routes رو مطالعه کنید.

meysam192

بهمن 2, 1401  در  3:11 ب.ظ

سلام استاد من یک نظر دیگه هم دارم برای پروژه این دوره.
در پروژه دوره آیا فریمورکی برای طراحی فرانت پروژه استفاده و اموزش داده میشه ؟
مثلا اگر یجورایی ادامه اموزش بوت استراپ باشه که در یک پروژه کامل چطور ui سایت باهاش زده میشه.
بعنوان مثال خودم با شما بوت استراپ رو یاد گرفتم اما در یک پروژه کامل استفاده ازش هنوز گنگ و نامفهوم هست برای من.
اینکه یه پروژه کامل داریم در این دوره خیلی خوبه
اینکه مدیریت پنل سایت داشته باشیم عالیه تجربه زدنش
و اینکه کار با یه فریمورک ui در یه پروژه کامل داشته باشیم یه نعمته استاد برای دانشجو.
واین پروژه خیلی کمک میتونه بکنه برای شروع کار در بازار.مخصوصا بحث فری لنسری.
ممنون

مسعود صدری

بهمن 2, 1401  در  10:00 ب.ظ

سلام
بله. برای قسمت UI از Tailwind استفاده کردیم.
برای درک بهتر Bootstrap همراه با React دوره‌های جامع React و Redux و آموزش تایپ اسکریپت رو بهتون پیشنهاد می‌کنم.
احتمال زیاد پنل مدیریتی برای پروژه دوره خواهیم داشت.
ممنونم از پیشنهاداتتون.

meysam192

بهمن 2, 1401  در  2:38 ب.ظ

سلام استاد
اینکه اخر هر کلیپ یه جمع بندی میکنید از مطالب گفته شده عالی هستش.
چون تا ایجای کار با شروع پروژه بحث روتینگ رو خیلی قابل درکتر و البته سریعتر میتونیم پیاده سازی کنیم.
بحث حل مشکل seo در ریکت هم اینجا حل شده. داشتن امکان پروداکشن بک اند هم میسر شده.
سوالم این هست: اگر بگیم next.js بهینه شده ریکت هست آیا درسته ؟
اگر جواب بله باشه پس باید گفت یک الزام هست که متخصص ریکت جی اس باید به نکست جی اس مسلط بشه.
دوست دارم نظر شما را بدونم و فکر میکنم برای دیگر بچه های تازه کار ریکتی دید بهتری میده از نکست.
ممنون

مسعود صدری

بهمن 2, 1401  در  9:58 ب.ظ

سلام
خیلی ممنون، خوشحالم که دوره براتون مفید بوده.
فکر نمی‌کنم درست باشه اینطور بگیم، چون Next.js یک چهارچوب هست که با استفاده از کتابخانه React و امکاناتی که ارایه می‌کنه باعث می‌شه بتونیم معماری نرم افزارمون رو به شکل دیگه‌ای پیش ببریم.
این معماری برای بیشتر پروژه‌ها می‌تونه یک گزینه منطقی باشه.
من هم با شما موافقم. مخصوصا اگر جزییات موقعیت‌های کاری برای React رو مطالعه کنید، اکثرا دانش Next.js رو هم لازم دونستند.

ehsan_ahmadi456

دی 28, 1401  در  10:05 ق.ظ

سلام
یه تخفیفی برای دوره نمیزارید تا ما تهیه بکنیم ممنون

مسعود صدری

دی 28, 1401  در  4:11 ب.ظ

سلام
تخفیف بعدیمون برای نوروز هست.

meysam192

دی 28, 1401  در  4:14 ق.ظ

سلام ممنون از شما و دوره خوب شما مهندس
از انجا که در این دوره تمرکز دارید یک پروژه فول استک و واقعی رو اجرا کنید می خواستم بپرسم:
قسمت پنل مدیریت پنل فروشگاهی رو هم پیاده سازی می کنید ؟
چون این دوره هم بک اند هم فرانت را میزنیم نیازه بدونیم چطور پنل مدیریت رو ارتباط بدیم به بک اند که تغیرات رو در فرانت در نهایت اعمال کنیم. درست مثل یک پروژه واقعی کامل.
باتشکر

مسعود صدری

دی 28, 1401  در  4:12 ب.ظ

سلام
ممنونم.
به احتمال زیاد بله.
ولی همون طور که در کامنت‌ها توضیح دادم، با توجه به تغییراتی که در طول توسعه پروژه خواهیم داشت فعلا فیچرها رو نمی‌تونم قطعی بگم.

افزودن دیدگاه جدید