دوره متخصص Next.js

آموزش پروژه محور نکست (Next.js) به همراه نکست 13 در قالب پروژه های متنوع ارائه شده است. هدف ما درک عملکرد نکست در پروژه پیچیده دوره است.

۴۴:۱۱:۰۰
۲۴۴ جلسه
۱۱۵۶ دانشجو
۵  از  ۱۰  رای
روش دریافت: اسپات پلیر
تاریخ انتشار :۱۴۰۱/۱۱/۱۵
آخرین بروزرسانی:۱۴۰۳/۲/۴
پشتیبانی: دائمی تلگرام

توضیحات دوره

آموزش پروژه محور نکست (Next.js) به همراه نکست 13 در قالب پروژه های متنوع ارائه شده است. هدف ما درک عملکرد نکست در پروژه پیچیده دوره است.

نکست جی اس (Next.js) چیست ؟

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

آیا با یادگیری نکست، از ریکت بی نیاز میشیم ؟

قطعا خیر! تمام مفاهیم ریکت مثل (کامپوننت، life cylcle کامپوننت ها، هوک ها، استیت و...) همچنان در Next.js استفاده میشه. پس ریکت دقیقا پیش نیاز Next.js هست و برای تسلط خوب در Next.js باید ابتدا ریکت را خوب فرا بگیرید.

آیا باید همیشه از نکست استفاده بشه ؟

خیر! هدف مهم نکست جی اس بهبود عملکرد برنامه (performance) و بهینه سازی برای موتور های جست و جو (SEO) هست. از آنجایی که سئو هدف مهم هر کسب و کاری هست، پس هر برنامه ای که نیاز به سئو داشته باشه، اولین انتخاب شما قطعا نکست خواهد بود. اما در برنامه های داخل سازمانی یا پنل های ادمین و کاربر و یا هر برنامه ای که نیازی به سئو نداشته باشه، استفاده از ریکت مشکلی ایجاد نخواهد کرد.

چرا باید Next.js را یاد بگیریم؟

همانطور که بالاتر اشاره کردم، هدف هر برنامه ای ارائه خدمات به کاربراش هست و باید برنامه شما به دست کاربر هدف برسه. بهینه سازی در موتورهای جست و جو مثل گوگل، قطعا بهترین کانال برای پیدا کردن مخاطب هدف هست و این یعنی سئو. یکی از هدف های استفاده از نکست جی اس بهبود سئو و عملکرد برنامه هست و این جذابیت این فریمورک را روز به روز بیشتر میکند.

چرا این دوره آماده شد؟

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

وجه تمایز این دوره چی هست؟

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

چه مباحث پیشرفته ای در دوره آموزش داده شده است؟

ابتدا تمام مفاهیم مهم Next.js آموزش داده می شود. در طی پروژه ها؛ فرآیند هایی از قبیل Nested dynamic routes, Filter, Search, Sort, Category, Pagination Authentication, Authorization, SSR, SSG, Dynamic SSR/SSG, به صورت کاملا کاربردی گفته شده است.

آیا همین دوره نکست کافی خواهد بود؟

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

پشتیبانی دوره به چه صورتی هست؟

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

وبینارهای دوره به چه صورت هست؟

اگه دانشجو احساس کنه، کسی کنارش هست که کل مسیر رو رفته با اطمینان خاطر بیشتری یاد میگیره، در این مسیر تجربه های خودم رو بهش میگم و نمیذارم مسیر اشتباهی بره و یادگیری براش لذت بخش خواهد شد. این دوره یک وبینار داره که در طول دوره برگزار میشه. در این وبینارها مسائل مربوط به فرایند استخدامی، رزومه سازی، نمونه کار و سوالات فنی دانشجویان جواب داده میشه.

ساختار کلی پروژه های دوره به چه صورتی هست؟

دو تا پروژه کامل در این دوره آموزش داده می شود. پروژه اول که یک پروژه Note-App هست که هم فرانت و هم بک اند با خود Next.js توسعه داده شده است. پروژه دوم هم که خیلی پیچیده تر است، دقیقا شبیه صفحه مقالات و محصولات سایت `فرانت هوکس` هست. تمام ریزه کاری مثل دسته بندی، مرتب سازی، صفحه بندی و حتی ایجاد نظرات هم آموزش داده شده است

این دوره برای چه افرادی مفید هست؟

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

وجه تمایز تدریس شما چی هست؟

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

بخاطر مبلغ دوره، نمیخواهم در این دوره شرکت نمایم. پیشنهاد شما چیست؟

به دست آوردن هر چیزی بهایی دارد؛ خیلی از هزینه های زندگی به ما برنمیگرده اما شما توی این دوره روی ارتقاء کیفیت زندگی خودتان سرمایه گذاری می کنید. از امروز شروع کنید و روی رشد خودتان و مهارتتان سرمایه گذاری کنید. هر چیز ارزشمندی می‌خواهید به دست بیاورید باید ابتدا بهای آن را بپردازید.

جلسات دوره

۱Next.js چیست ؟
۸
دانلود ویدیو
۲نصب Next.js و بررسی script ها
۶
دانلود ویدیو
۳بررسی ساختار یک برنامه Next.js
۵
دانلود ویدیو
۴Routing در نکست
۹
دانلود ویدیو
۵Dynamic Routes in Next.js
۶
دانلود ویدیو
۶Nested Dynamic Routes in Next.js
۱۱
۷Catch All Routes in Next.js
۱۳
۸Link Component in Next.js
۱۲
۹Not found page (404) in Next.js
۵
۱معرفی فصل
۲
۲why SSR is needed?
۱۰
۳What is Dynamic Rendering?
۱۲
۴SEO issue in Javascrip Apps
۱۴
۱بررسی سناریوهای pre-rendering & data fetching
۱۵
۲Inspecting Static Generation Build
۱۳
۳Running Static generation builds
۱۲
۴Dynamic SSG pages
۱۵
۵SSG with GetStaticPaths
۲۰
۶getStaticPaths fallback false
۷
۷getStaticPaths fallback true
۱۶
۸getStaticPaths fallback blocking
۶
۹Pros & Cons of SSG
۱۲
۱۰Incremental Static Re-generation
۱۸
۱Server Side Rendering (SSR)
۱۳
۲Dynamic SSR pages
۱۴
۳Client-side Data fetching in Next.js
۷
۱معرفی Api Routes
۶
۲بک اند خود نکست یا بک اند جدا ؟
۱۳
۳Api end points in Api Routes
۱۳
۱get all todos from Api Routes
۱۲
۲delete todo from Api Routes
۱۲
۳Changing the App UI
۸
۴creating Mongo DB Cloud
۸
۵Adding Mongo DB Client and Todo Model
۱۰
۶Get & Post Todo To Api Routes and Mongo DB
۰
۷Delete todo from Mongo DB
۱۴
۸Dynamic SSR page for todo
۱۵
۱Combine Client-side and Server-side data fetching
۹
۱Edit Todo from Api Routes & Mongo DB
۱۸
۲Toggle todo in Master Todo Page
۱۱
۳Edit in single todo page
۶
۱اهمیت Layout و ساختار Containers
۱۱
۲Add Layout in Application
۱۱
۱Absolute import in Next.js
۱۰
۱بررسی Authentication & Authorization in Next.js
۷
۲َAuthentication using Next-Auth with GitHub
۱۳
۳Signin & Signout actions in Next-Auth
۵
۴Client-Side Authentication in Next.js
۸
۵Guard : Securing pages on the client-side
۷
۶Server-side Authentication in Next.js
۷
۷Guard : Securing pages on the Server-side
۶
۸Guard : Securing Api Routes
۳
۱Storing User data in Mongo DB
۱۰
۲Adding access-token to user session
۱۰
۱ایجاد پست و دسته بندی با postman
۱۷
۲بررسی Api End point های بک اند پروژه
۹
۳نصب تیلویند در برنامه
۴
۴ایجاد Layout پروژه
۱۳
۵توسعه desktop category
۱۱
۶desktop sort bar
۱۱
۷اضافه کردن فونت به برنامه
۷
۸اضافه کردن container به برنامه
۵
۱توسعه کلیات قسمت بلاگ ها
۹
۲اضافه کردن تصاویر پست ها
۱۵
۳توسعه مشخصات پست ها
۷
۴برطرف کردن مشکل عنوان های طولانی
۸
۵استخراج کامپوننت PosList و گرفتن اطلاعات پست ها
۱۸
۶توسعه کامپوننت Desktop Category
۸
۷توسعه کامپوننت MobilePostCategory
۴
۸استخراج کامپوننت ها و بررسی categorySlug
۱۱
۹توسعه صفحه داینامیک CategorySlug
۱۱
۱توسعه صفحه تک پست (Single Post Page)
۱۴
۲گرفتن اطلاعات تک پست از بک اند بر اساس post slug
۱۳
۳بررسی مدل ایجاد صفحه تک پست (SSG or SSR)
۸
۴استفاده از پلاگین typography
۱۴
۵اضافه کردن دکمه های تعامل با پست
۱۶
۶اضافه کردن دکمه های انتشار پست در شبکه های اجتماعی
۹
۷ایجاد لینک انتشار در شبکه های اجتماعی
۸
۸استفاده از کامپوننت react-copy-to-clipboard
۱۴
۹ایجاد پست های مرتبط
۱۳
۱توسعه ایجاد فرم نظرات
۱۱
۲توسعه singleComment
۱۷
۳ایجاد کامپوننت ارسال نظرات
۶
۴نشان دادن نظرات تودرتو (nested comments)
۱۶
۱اهمیت فرم ها ؟ Formik دیگر چیست ؟
۵
۲مدیریت استیت های فرم ها
۵
۳رفع خطای همیشگی استیت در فرم ها
۳
۴اضافه کردن onSubmit به فرم ها
۳
۵مدیریت استیت ها به کمک فرمیک
۱۰
۶ارسال اطلاعات به سرور توسط فرمیک
۵
۷اعتبار سنجی فرم ها به کمک فرمیک
۱۰
۸نشان دادن خطا به کاربر در آن واحد
۷
۹اضافه کردن yup به پروژه
۵
۱۰بهنیه کردن ویژگی های Formik
۳
۱۱اضافه کردن فیلد های دیگه و استفاده از Yup Schema
۱۵
۱۲اعتبار سنجی در لود اولیه کامپوننت
۸
۱۳اضافه کردن radio button به فرم
۹
۱۴ست کردن اطلاعات از قبل موجود در فرم
۷
۱۵گرفتن اطلاعات از بک اند و ست کردن آن ها در فرم
۷
۱۶استخراج کامپوننت Input
۱۰
۱۷استخراج کامپوننت Radio button group
۶
۱۸استخراج کامپوننت select - option
۹
۱۹استخراج کامپوننت CheckBox
۱۷
۲۰ارسال اطلاعات فرم به پایگاه داده
۵
۱اضافه کردن آیکون تعاملی به پست ها
۱۳
۲ایجاد کامپوننت Layout
۶
۳ایجاد فرم SignUp
۱۶
۴ارسال اطلاعات کاربر به سمت بک اند
۱۲
۵ایجاد AuthContext
۱۱
۶اضافه کردن useReducerAsync
۱۰
۷اضافه کردن آبجکت asyncActionHandlers
۱۵
۸create signup async action
۹
۹persist user in app and logout user
۱۲
۱۰رفع مشکل navbar
۵
۱۱send user cookie in getServerSideProps
۸
۱۲refactor http request code
۶
۱create push function
۱۰
۲مرتب سازی پست ها
۱۸
۳استایل دسته بندی انتخاب شده
۸
۴صفحه بندی (pagination data)
۱۵
۵pagination component
۵
۶ایجاد پراپس های قسمت نظرات پست ها
۱۲
۷ارسال نظرات به بک اند
۱۱
۱ریداکس اصلا چی چیه ؟ چرا مهمه ؟
۶
۲سه مفهوم اصلی در ریداکس
۵
۳سه اصل مهم در ریداکس
۵
۴ایجاد اکشن در ریداکس
۴
۵مفهوم reducer در ریداکس
۴
۶ساخت store و متدهای store
۱۰
۷اضافه کردن استیت جدید به ریداکس
۶
۸ترکیب reducer ها
۴
۹اضافه کردن redux-logger
۶
۱۰ایجاد اکشن های async
۱۲
۱۱اضافه کردن redux-thunk به redux
۹
۱۲اضافه کردن ریداکس به ریکت
۷
۱۳ایجاد store در ریکت
۳
۱۴استفاده از استیت گلوبال در برنامه
۷
۱۵useSelector and useDispatch
۸
۱۶اضافه کردن استیت جدید به استوری ریداکس
۹
۱۷adding redux logger
۳
۱۸adding redux devtools
۷
۱۹adding payload to action
۸
۲۰adding async action
۶
۲۱dispatch async action and get data
۱۵
۱نصب ریداکس در ریکت
۶
۲اضافه کردن store ریداکس در نکست
۱۱
۳اجرای اکشن های سمت سرور و سمت کاربر
۱۴
۴استفاده از اکشن HYDRATE
۲۱
۵فصل یازدهم : احراز هویت پروژه Next-App با Redux
۶۰
۶اضافه کردن کدهای مربوط به استیت user
۱۳
۷اضافه کردن userSignupReducer
۱۲
۸اجرای اکشن signin
۱۱
۹اجرای اکشن signout
۱۰
۱۰لود اطلاعات کاربر
۷
۱کامپوننت ImageX چیه؟
۱۶
۲بررسی placeholder و loading در Image
۶
۳بررسی Layout و width در Image
۱۱
۴کامپوننت Script در نکست
۸
۵بررسی فرآیند Dynamic Rendering
۱۵
۱کامپوننت Head در نکست و مدیریت متاتگ ها در سئو نکست
۱۶
۲بررسی کتابخانه Next-SEO
۱۱
۳ایجاد sitemap در نکست
۱۷
۱فرآیند اسقرار یا deployment چیه؟
۱۳
۲دیپلوی اپلیکیشن روی vercel
۱۱
۳دیپلوی بر روی سرویس های ابری رانفلر و لیارا
۱۶
۱Next.js 13 overview
۴
۲Adding app directory
۹
۳layout.js file
۵
۴Nested page - nested layout
۶
۵PostList component
۸
۶Nested dynamic routes
۹
۷error.js, loading.js and not-found.js file
۹
۸pre-rendering technique: ISR, SSR, SSR
۱۲
۹dynamicParams : alternative of fallback
۷
۱۰client components and client hooks
۱۵
۱۱Route Groups
۱۲
۱۲SEO and page metadata in Next 13
۱۳
۱۳Suspense and streaming UI
۱۶
۱۴next-fonts : new Approach
۱۹
۱ویدئو معرفی پروژه دوره
۱۲
دانلود ویدیو
۲Config tailwind in project
۸
۳Investigation the backend of project
۱۲
۴Testing backend API
۱۳
۵Testing User Flow in postman
۱۱
۶Create App layout
۱۰
۷Create auth page
۱۴
۸Style TextField Component
۴
۹SendOTPForm Component
۱۶
۱۰Adding react-hot-toast
۶
۱۱Adding react-query
۱۴
۱۲Improve SendOTPForm component
۵
۱۳CheckOTP component
۱۳
۱۴Improve CheckOTPForm
۹
۱۵Check OTP from API
۸
۱۶complete profile page
۱۹
۱۷Persist user in App
۱۷
۱۸Create new access token based on refresh token
۲۲
۱۹protect /admin and /profile routes
۱۵
۲۰fetch user in middleware
۱۷
۲۱Refactor middlewareAuth Function
۱۱
۱Create multiple layout
۹
۲Create user dashboard
۱۳
۳User info page
۱۹
۴Loading component
۳
۵Update user profile
۱۰
۶logout user from App
۹
۱Shop section info
۶
۲Create categories and products
۱۰
۳Structure categories and products page
۱۲
۴Create categories sidebar
۱۲
۵Filter products based on categories
۱۵
۶Check checkbox based on query string
۱۳
۷Re-fetch page data based on query string
۱۵
۸Fetch products using route segment features
۱۴
۹Parallel and sequential data fetching
۹
۱۰Sort products
۲۰
۱۱Product detail page - SSG
۱۰
۱۲AddToCart component
۱۶
۱۳Improve AddToCart component
۷
۱۴CartItems component
۱۴
۱۵CartSummary component
۷
۱۶Increment and decrement items
۱۵
۱۷Convert numbers to persian numbers
۷
۱۸Create order
۱۲
۱۹Create user payment table
۱۷
۲۰Create dashboard page
۱۱
۲۱Like product
۲۱
۱Create admin panel routes
۱۵
۲Create user table
۱۵
۳Create products table
۱۳
۴Add new product form
۱۴
۵post new product to backend API
۱۸
۶Create edit product page
۱۴
۷Update product data
۲۵
۸Categories table
۱۰
۹Add new category
۱۲
۱۰Update category
۲۶
۱۱Remove product and category
۱۱
۱۲Admin payments table
۹
۱۳Add new coupon form
۱۶
۱۴Coupon expires date -post new coupon
۱۸
۱۵Extract reusable couponForm
۱۴
۱۶Update Coupon
۱۶
۱۷Remove Coupon
۸

سوالات متداول

Next.js یک فریمورک فول استک متنبی بر ریکت برای تولید بهینه تر اپلیکیشن های تحت وب هست. بله نکست جی اس هم فریمورک هست و هم فول استک!

با Next.js می توان هم فرانت و هم بک اند را همزمان توسعه داد. اما تمرکز نکست جی اس روی فرانت اند هست. اغلب Next.js را برای فرانت به کار میبریم، اما همانطور که از اسمش پیداست یک فریمورک فول استک هست که میتوان داخل خود نکست، بک اند را هم همزمان توسعه داد.

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

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

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

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

قطعا بله، تمام دوره های فرانت هوکس پشتیبانی دارد و وجود یک مربی در سرعت یادگیری شما قطعا اثرگذار هست.

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

شک نکنید که با یادگیری اصولی Next.js یک قدم بزرگی برای تبدیل شدن به برنامه نویسی حرفه ای وب برداشته اید. در قبال تخصص بیشتر شما، خواهان بیشتری در کامیونیتی بسیار عظیم نکست جی اس هست.

۲,۵۸۹,۰۰۰
صاحب محمدی

صاحب محمدی

مدرس دوره

داستان برنامه نویس شدن من برمیگرده به سال 93. همون موقع که برای پروژه های دانشگاه (رشته مهندسی نفت) برنامه نویسی میکردم. کم کم با MATLAB آشنا شدم و بعدا وارد حوزه برنامه نویسی وب شدم و الان حدود 7 ساله که شغل تخصصی من برنامه نویسی وب هست. علاقه من جاوااسکریپت و خاندانش است. به همین دلیل فرانت هوکس رو بنا کردم تا تجربه چند ساله رو در قالب دوره های پروژه محور به علاقه مندان این حوزه انتقال بدم ☘️🤍.

میتوانید دیدگاه خود را ثبت کنید