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

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

۴,۵۹۸,۰۰۰
saheb mohamadi | صاحب محمدی

صاحب محمدی

مدرس دوره

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

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