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

آموزش پروژه محور نکست (Next.js) بر اساس آخرین نسخه نکست (14 و 15) در قالب پروژه های جامع فول استک آماده شده است. هدف ما آموزش به روز ترین قابلیت های Next.js برای پیاده سازی پروژه های واقعی بازار کار است.

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

توضیحات دوره

آموزش پروژه محور نکست (Next.js) بر اساس آخرین نسخه نکست (14 و 15) در قالب پروژه های جامع فول استک آماده شده است. هدف ما آموزش به روز ترین قابلیت های Next.js برای پیاده سازی پروژه های واقعی بازار کار است.

نکست جی اس (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 توسعه داده شده است. پروژه دوم هم که خیلی پیچیده تر است، دقیقا شبیه صفحه مقالات و محصولات سایت `فرانت هوکس` هست. تمام ریزه کاری مثل دسته بندی، مرتب سازی، صفحه بندی و حتی ایجاد نظرات هم آموزش داده شده است

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

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

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

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

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

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

جلسات دوره

۱Introdcution
۵
دانلود ویدیو
۲What is Next.js
۸
دانلود ویدیو
۳Next.js Key Ingredients
۳
دانلود ویدیو
۴SPA Evolution
۳
دانلود ویدیو
۵Installing Next.js
۵
دانلود ویدیو
۶Project Structure
۷
دانلود ویدیو
۱Routing
۷
دانلود ویدیو
۲Nested Routes
۵
۳Dynamic Routes
۶
۴Nested Dynamic Routes
۷
۵Catch All Routes
۷
۶Not-Found Page
۵
۷File Co-location
۶
۸Private Folder
۵
۹Route Groups Part #1
۵
۱۰Layouts
۹
۱۱Multiple Root Layouts with Route Groups
۷
۱۲Multiple Nested Layout
۹
۱۳Static Metadata
۷
۱۴Dynamic metadata
۶
۱۵Link Componnet
۹
۱۶Error Handling
۸
۱۷Loading
۶
۱۸Programmatically Navigate
۴
۱۹Active Link
۵
۱Overview
۳
دانلود ویدیو
۲Client-Side Rendering
۹
۳Server-Side Rendering
۱۰
۴Client-Side VS. Server-Side Rendering
۱۰
۵When to use SSR or CSR
۶
۶SSR Drawbacks
۹
۷Suspense Benefits
۷
۸Suspense Drawbaks
۵
۹Server Component VS. Client Component
۱۰
۱۰React Server Component Benefits
۸
۱۱Adding Favicon
۵
۱۲Adding Metadata
۱۳
۱Blog App Project Overview
۹
دانلود ویدیو
۲Project Backend API
۸
۳Client-side Data fetching in Next.js
۷
۴Test App Flow
۱۳
۵TailwindCSS Configs
۱۳
۶Absolute Import
۷
۷Adding Fonts to Next.js
۱۳
۸Blog App Home Page
۱۳
۹NotFound Page
۷
۱۰Create Nested Layout
۱۰
۱Overview
۱
دانلود ویدیو
۲Fetching Data in Server Components
۱۰
۳Environment Variable
۱۱
۴Streaming With Loading.js
۱۰
۵Streaming With Suspense
۷
۶Intro to Next.js Image Component
۸
۷More on Next.js Image Component
۱۵
۸post Content
۱۱
۹Post Interaction
۱۰
۱۰Dynamic Route Segment
۱۰
۱۱Error Handling - error.js
۴
۱۲Handling Not Found Page
۵
۱۳Generate Metadata for Dynamic Page
۶
۱۴Dynamic VS. Static Rendering
۱۰
۱۵Analyzing Rendering Our App
۵
۱۶Generate Static Params
۸
۱۷Generate Static Params in Our App
۱۵
۱۸Caching - Request Memization
۱۲
۱۹Data Cache in Next.js
۱۵
۲۰Incremental Static Regeneration (ISR)
۱۷
۲۱Cahing in Next.js V15
۷
۲۲Partial Pre-rendering (PPR)
۱۱
۱Overview
۱
دانلود ویدیو
۲Authentication VS. Authorization
۵
۳Create Signin and Signup Routes
۸
۴Adding React-hook-form
۹
۵Validate Form Data
۱۲
۶Signup Api
۱۱
۷Signin Page
۷
۸Add Context to Project
۱۲
۹useContext and useReducer
۱۱
۱۰Load User Data
۹
۱۱Refresh Token and Access Token Process
۱۴
۱۲Handle Refresh Token and Access Token
۱۵
۱۳What is Middleware in Next.js
۸
۱۴Protect Route With Middleware in Next.js
۱۳
۱Server Action Overview
۱
۲Like Post API
۶
۳Set Cookie on Server Action
۱۵
۴Create Category Page
۸
۵Change Fetching Post Method
۶
۶Adding Search Query to URL
۱۴
۷Fetching Based on URL Queries
۱۶
۸Related Post
۶
۹Post Comment Section
۱۵
۱۰Create Modal Component
۱۵
۱۱CommentForm Component
۱۴
۱۲Server Action in Next.js
۱۱
۱۳Create Comment API
۱۵
۱۴useFormStatus
۸
۱۵useFormState
۱۴
۱Admin Panel Overview
۵
۲Create Nested Layout for Dashboard
۱۳
۳Create Darawer
۷
۴Fetch Dashboard Data
۱۶
۵Posts Page
۱۴
۶Post Row
۹
۷Post Row Actions
۷
۸Fetch Latest Posts
۸
۹Adding Suspense for Fetching Data
۱۳
۱۰Search Post
۶
۱۱What is Pagination
۱۰
۱۲Pagination Component
۱۸
۱Admin Panel Part 2 Overview
۴
۲BreadCrumbs
۷
۳Create Post Form
۱۳
۴Adding React Query
۱۰
۵Upload Image
۱۸
۶Submit Create Post
۱۹
۷Create Edit Page
۸
۸Submit Edit Post
۱۸
۹Delete Post
۹
۱۰useDelete Post
۱۰
۱ویدئو معرفی پروژه دوره
۱۲
دانلود ویدیو
۲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
۸
۱Overview
۳
۲Deploy Methods
۷
۳Build Vite.js app
۱۱
۴Deploy on netlify
۷
۵Deploy on vercel
۴
۶Deploy manually
۳
۷Adding domain to liara
۴
۸Create database
۵
۹Deploy backend
۱۲
۱۰Environment variable
۱۰
۱۱Create frontend platform
۶
۱۲Deploy frontend
۹
۱۳Connect to local DB
۳

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

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

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

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

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

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

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

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

جدیدترین نسخه نکست 14 و 15 در این دوره آموزش داده شده. همه ی دوره های فرانت هوکس آپدیت میشه و آپدیت ها به صورت رایگان به پنل شما اضافه میشه

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

۲,۹۸۹,۰۰۰
% ۴۰
۱,۷۹۳,۰۰۰
صاحب محمدی

صاحب محمدی

مدرس دوره

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

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