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

549,000 تومان
555 دانشجو
۱۵ ساعت و ۱۰ دقیقه
ثبت نام در دوره

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 فرانت کست

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

پیش‌نیاز دوره آموزش Next.js درک مفاهیم React و جاوااسکریپت است. اگر با کتابخانه React آشنا هستید و قصد مرور و یادآوری مفاهیم را دارید، دوره آموزش 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 سبد خرید
۵۲. تابع افزودن به سبد خرید
۵۳. تعداد محصولات در سبد خرید
۵۴. بررسی تعداد محصولات
۵۵. توسعه صفحه سبد خرید
۵۶. جدول محصولات
۵۷. نمایش محصولات سبد خرید
۵۸. حذف محصول از سبد خرید
۵۹. ریدایرکت به صفحه سبد خرید
۶۰. محاسبه مجموع قیمت
۶۱. افزودن Button برای Checkout
۶۲. استفاده از JS Cookie
۶۳. اجرای کامپوننت در قسمت Client
۶۴. به روز شدن تعداد محصولات در Header
۶۵. صفحه Login کاربر
۶۶. اعتبار سنجی فرم Login
۶۷. اتصال پروژه به پایگاه داده
۶۸. توسعه Model برای کاربر
۶۹. ذخیره مشخصات کاربر در پایگاه داده
۷۰. استفاده از NextAuth.js
۷۱. پیاده سازی تابع Session
۷۲. تنظیم Providers
۷۳. نصب و استفاده از Bcrypt.js
۷۴. اعتبارسنجی کاربر
۷۵. پیاده سازی تابع Sign in
۷۶. بررسی Session کاربر
۷۷. مدیریت Session
۷۸. استفاده از Headless UI
۷۹. توسعه کامپوننت Dropdown
۸۰. پیاده سازی تابع Logout
۸۱. توسعه Model برای محصول
۸۲. دریافت محصولات از پایگاه داده
۸۳. تغییر نوع داده Documentها
۸۴. دریافت یک محصول از پایگاه داده
۸۵. افزودن به سبد خرید در صفحه اصلی
۸۶. استفاده از پکیج React Tostify
۸۷. توسعه کامپوننت Checkout
۸۸. پیاده سازی فرم Shipping
۸۹. ذخیره داده‌ها در Context
۹۰. استفاده از js-cookie
۹۱. استفاده از State فرم
۹۲. بررسی Login کاربر
۹۳. توسعه صفحه پرداخت
۹۴. انتخاب روش پرداخت
۹۵. استفاده از Context
۹۶. ذخیره روش در Cookie
۹۷. بررسی و رفع خطا Hydration
۹۸. توسعه صفحه ثبت سفارش
۹۹. دریافت مقادیر Shipping از Context
۱۰۰. دریافت محصولات سبد خرید
۱۰۱. محاسبه مبلغ سبد خرید
۱۰۲. توسعه Model برای سفارش
۱۰۳. پیاده سازی API دریافت سفارش
۱۰۴. ذخیره سفارش در پایگاه داده
۱۰۵. پیاده سازی API برای سفارش‌ها
۱۰۶. نمایش لیست سفارش‌ها
۱۰۷. توسعه صفحه تکمیل سفارش
۱۰۸. توسعه صفحه ادمین
۱۰۹. سطح دسترسی Route ادمین
۱۱۰. منو بخش داشبورد
۱۱۱. پیاده سازی API ادمین
۱۱۲. دریافت اطلاعات فروش و کاربران
۱۱۳. افزودن Style به داشبورد ادمین
۱۱۴. توسعه API برای لیست سفارش‌ها
۱۱۵. ارسال درخواست API
۱۱۶. نمایش لیست سفارش‌ها

۱۱۷. بررسی Next.js 13
۱۱۸. نصب Next.js 13
۱۱۹. استفاده از next/fonts
۱۲۰. افزودن داده‌های محصولات
۱۲۱. توسعه کامپوننت محصول
۱۲۲. افزودن Navbar
۱۲۳. بررسی Server و Client کامپوننت‌ها
۱۲۴. بررسی و نصب Redux Toolkit
۱۲۵. توسعه Slice
۱۲۶. بررسی Provider
۱۲۷. توسعه تابع افزودن به سبد خرید
۱۲۸. حذف از سبد خرید
۱۲۹. تعداد محصولات در سبد خرید
۱۳۰. کامپوننت افزودن به سبد خرید
۱۳۱. استفاده از Client کامپوننت
۱۳۲. توسعه صفحه محصول
۱۳۳. توسعه صفحه سبد خرید
۱۳۴. نمایش محصولات سبد خرید

۱۳۵ – پیش‌نیازها
۱۳۶ – بررسی Next.js 14
۱۳۷ – مستندات Next.js 14
۱۳۸ – راه‌اندازی محیط توسعه
۱۳۹ – نصب Next.js
۱۴۰ – بررسی ساختار فایل‌ها
۱۴۱ – استفاده از فونت‌ها
۱۴۲ – مفهوم Routing
۱۴۳ – استفاده از Link
۱۴۴ – سرور و کلاینت کامپوننت‌
۱۴۵ – مفهوم Data Fetching
۱۴۶ – بررسی Caching در نسخه ۱۴
۱۴۷ – مفهوم Server Actions
۱۴۸ – توسعه فرم
۱۴۹ – استفاده از json-server
۱۵۰ – دریافت داده‌ها
۱۵۱ – پیاده سازی توابع سرور
۱۵۲ – بررسی مفهوم Revalidat Data

دیدگاه‌ها:

aliasghar bagheri

بهمن 15, 1402  در  3:01 ب.ظ

سلام استاد وقتتون بخیر
استاد اگه بخوایم با ورژن ۱۴ NextJS یک وبلاگ یا یک سایت بسازیم چه سیستم احراز هویتی پیشنهاد میکنین؟
چون وقتی برای بحث احراز هویت سیستم هایی مثل Clerk یا Kinde استفاده میکنیم اگه کسی با IP ایران بخواد وارد سایت بشه سیستم احراز هویت به خوبی کار نمیکنه و next-auth هم توی ورژن ۵, ورژن Beta هست.
پیشنهادتون برای یک سایت واقعی چیه استاد ؟
با تشکر

مسعود صدری

بهمن 18, 1402  در  12:14 ب.ظ

سلام
وقت شما هم بخیر.
مستندات Next.js برای احراز هویت پکیج NextAuth رو پیشنهاد کرده و تا جایی که من اطلاع دارم با آخرین نسخه (۱۴.۱) هماهنگ هست.
پیشنهاد می‌کنم این لینک رو مطالعه کنید:
https://nextjs.org/learn/dashboard-app/adding-authentication

pouriya sedaghat

بهمن 12, 1402  در  2:10 ق.ظ

سلام استاد
جسارتا امکانش هست نسخه ۱۴ رو عمیق تر بررسی کنید چون قسمت های جدیدی اضافه شده و توی بررسی نسخه ۱۴ گفته نشده

مسعود صدری

بهمن 12, 1402  در  9:03 ب.ظ

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

amirrezaakbari81

آذر 23, 1402  در  2:21 ب.ظ

سلام روزتون بخیر
یه سوال داشتم من تازه می خوام شروع به یادگیری next و گفته شده نسخه ۱۳ از نسخه ۱۲ بسیار متفاوت شده و این دوره با نسخه ۱۲ آموزش داده شده آیا به مشکل می خورم یا خیر ؟
و آیا رفع اشکال با شما وجود داره ؟

مسعود صدری

آذر 23, 1402  در  2:57 ب.ظ

سلام
وقت بخیر
همون طور که در سرفصل‌ها نوشته شده، در دوره نسخه‌های ۱۲، ۱۳ و ۱۴ آموزش داده شدند.
بررسی مفاهیم نسخه ۱۴ رو به صورت رایگان در کانال یوتوب هم می‌تونید ببینید.
بله رفع اشکال با خودم هست، اگر سوالی بود می‌تونید در تلگرام به اکانت MasoodSadri پیام بدید.

alidlt

آذر 8, 1402  در  2:48 ق.ظ

سلام استاد عزیز
بر روی دوره ها کد تخفیفی قرار میدید که چند تا دوره رو تهیه کنم؟
با تشکر

مسعود صدری

آذر 8, 1402  در  1:10 ب.ظ

سلام
تخفیف بعدی اوایل زمستان هست.
لطفا کانال تلگرام رو دنبال کنید: t.me/frontcast

arks1358

آذر 5, 1402  در  1:48 ب.ظ

سلام وقت بخیر
بعنوان یک متخصص ممنون می شم به سوالات زیر پاسخ دهید.
۱- تو این پروژه از چه دیتا بیسی استفاده می شه
۲- backend پروزه در خود Next پیاده سازی می شه یا اینکه می تونیم backend رو با nodejs و express تولید کنیم و در next استفاده کنیم. پیشنهاد شما در این خصوص لطفا ..
۳- آیا با Next میشه سیستم های مالی رو پیاده سازی کرد پیشنهاد شما برای این منظور چیه …

مسعود صدری

آذر 5, 1402  در  9:50 ب.ظ

سلام
وقت شما هم بخیر
البته من متخصص نیستم، صرفا تلاش می‌کنم تا مفاهیم رو یاد بگیرم.
۱. از پایگاه داده MongoDB استفاده کردیم.
۲. فریم‌ورک Next.js یک ابزار توسعه Full Stack هست، فرانت‌اند و بک‌اند رو در کنار هم می‌تونید توسعه بدید.
۳. نرم افزارهای تحت وب با هر موضوعی رو می‌تونید با استفاده از Next.js توسعه بدید.

محمد طهرابی

آبان 26, 1402  در  12:05 ب.ظ

سلام وقت شما بخیر
ساخت بک اند با نکست ما رو از همه لحاظ بی نیاز می کنه و آیا میشه بکندهای حرفه ای و بی نیاز به دیگر زبان های بک اند مثل نود و… زد؟
در کل آیا میشه بک اند یک سایت بزرگ مثل دی جی کالا رو با نکست زد که هم پرفورمنس خوبی داشته باشه هم امنیت و…
یا نه فعلا انقدر پیشرفت نکرده که بشه بک اند های حرفه ای باهاش زد؟
ممنون

مسعود صدری

آذر 5, 1402  در  9:53 ب.ظ

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

sajjadr7

آبان 18, 1402  در  10:49 ب.ظ

سلام وقت بخیر در حال حاضر که نسخه ۱۴ اومده و مباحثی که داخل این دوره هست حتی از نسخه ۱۲ هست ایا مفید هست هنوز؟ چه زمانی آپدیت هارو قرار میدید ؟ آیا همه مطالب next پوشش داده شدند من دنبال یک دوره خوب هستم الان این سوال ها برام پیش اومد

مسعود صدری

آبان 18, 1402  در  11:29 ب.ظ

سلام
وقت شما هم بخیر.
پیشنهاد می‌کنم مفاهیم نسخه ۱۲ رو هم بررسی کنید، اما به نظرم تمرکز اصلی باید برای نسخه ۱۴ باشه.
ما تلاش می‌کنیم تا این دوره رو همیشه بر اساس مستندات Next.js به روز نگه داریم و به روز رسانی‌ها برای دانشجوهای قبلی دوره رایگان خواهند بود.
مفاهیم نسخه ۱۴ تا حدود دو هفته آینده به دوره اضافه می‌شن.
اگر سوالی بود می‌تونید در تلگرام به اکانت MasoodSadri پیام بفرستید.

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