سلام استاد خسته نباشید و تشکر برای این دوره جذاب , انشالله سریع وارد نکست 14 بشیم و مثل روند تدریس ریکت سریع بریم توی پروژه خفن مثل پروژه ریکت
دوره آموزش Next.js | فریمورک قدرتمند React
مژده به دانشجویان دوره ریاکت (React) کدیاد
دانشجویان عزیزی که در دوره ریاکت آکادمی کدیاد ثبت نام کرده‌اند، دیگر نیازی به خرید مجدد این دوره ندارد و میتوانند به رایگان در دوره آموزش فریمورک Next.js ثبت نام کنند!
امروزه بسیاری از طراحان برای ساخت وب‌اپلیکیشن‌های مدرن و پیشرفته، از فریمورک نکست جی‌اس استفاده میکنند. اگر به طراحی وب‌اپلیکیشن علاقه دارید، شرکت در دوره آموزش Next.js کدیاد انتخاب خوبی برایتان خواهد بود.
فریمورک Next.js چیست؟
Next.js یک فریمورک ریاکت (React) منبع باز است که بر پایه زبان برنامه نویسی جاوا اسکریپت می‌باشد و برای ساخت وب‌اپلیکیشن‌های پیشرفته کاربرد دارد. در واقع شما میتوانید با استفاده از این فریمورک قدرتمند React وب‌اپلیکیشن‌های پیچیده و خاص را هم بسازید و توسعه دهید.
البته، درست است که این رندر کردن روی سرور اتفاق می‌افتد، اما زیر نظر فرانت می‌باشد! در واقع، Next.js با کمک نود جی اس نیروی پردازشی بهتری را برای فرانت ایجاد میکند که موجب بالا رفتن سرعت رندرینگ میشود و تاثیر فوق‌العاده‌ای روی عملکرد سایت شما و SEO دارد.
استفاده از Next.js چه مزایایی دارد؟
بطور کلی، استفاده از این فریمورک انعطاف‌پذیر مزایای زیادی برای طراحان و توسعه دهندگان دارد. در زیر، برخی از مزایای فریمورک Next.js را به شما معرفی کرده‌ایم:
- بهبود عملکرد و تجربه کاربری UX
- سئوی بهتر
- افزایش سرعت بارگذاری
- کمتر شدن وابستگی به سرور (به دلیل رندر کردن به صورت استاتیک)
- بهینه‌سازی خودکار تصاویر و سایر منابع اپلیکیشن
- پشتیبانی از تایپ‌اسکریپت
لازم به ذکر است که مهم‌ترین ویژگی فریمورک Next.js توانایی برنامه نویسی سمت سرور آن است! در واقع، با یادگیری این فریمورک دیگر نیازی به برنامه نویس بک اند نخواهید داشت و پا به عرصه فول استک دولوپر‌ها خواهید گذاشت.
معروف‌ترین پلتفرم‌ها و شرکت‌هایی که از Next.js استفاده میکنند
در حال حاضر شرکتهای زیادی از این فریمورک برای وب‌اپلیکیشن‌های خود استفاده میکنند. Netflix که برای علاقمندان به تماشای فیلم و سریال کاملا شناخته شده است، از این فریمورک استفاده میکند. تیک‌تاک (TikTok)، هش‌نود (Hashnode)، پلتفرم توییچ موبایل (Twitch Mobile)، پلتفرم استریم و اشتراک ویدیو هولو (Hulu) و صرافی بایننس که معروف‌ترین پلتفرم ارزهای دیجیتال است، از Next.js استفاده میکنند.
مخاطبین دوره آموزش Next.js
این دوره آموزشی برای تمام افرادی که به طراحی وب‌اپلیکیشن علاقه دارند، مناسب است. در هر سطحی که باشید، این دوره به شما برای یادگیری بهتر نکست جی‌اس، کمک فراوانی خواهد کرد.
وبمستران هم میتوانند با استفاده از این فریمورک قدرتمند، به بهبود شرایط سئو و رابط کاربری سایتشان کمک زیادی کنند و برای بهینه‌سازی تصاویر و عملکرد کلی سایت هم از Next.js بهره بگیرند.
پیش‌نیازهای شرکت در دوره آموزش Next.js
مسلما برای یادگیری هر فریم‌ورکی باید حداقل با زبان برنامه نویسی آن آشنای داشت. فریمورک نکست جی اس هم از این قاعده مستثنا نیست.
برای یادگیری Next.js شما باید به زبان برنامه نویسی JavaScript، HTML و CSS تسلط خوبی داشته باشید. همچنین، توانایی کار با فریمورک ریاکت (React) نیز لازم است.
بعد از اتمام دوره Next.js چه چیزی یاد میگیریم؟
شما میتوانید با شرکت در این دوره آموزشی کدیاد و یادگیری مباحث موجود در آن، به راحتی بر روی این فریمورک React مسلط شوید. همین مسئله باعث میشود که بتوانید به طراحی و توسعه وب‌اپلیکیشن‌های مختلف بپردازید.
لازم به ذکر است که با یادگیری نکست جی‌اس امکان حضور در بازار کار مربوط به آن را هم خواهید داشت. میتوانید در شرکتهای مربوطه استخدام شوید و با توسعه و طراحی وب‌اپلیکیشن‌های موردنظر آن‌ها، درآمد خوبی کسب کنید.
شرکت در دوره آموزش Next.js کدیاد
وب‌سایت کدیاد یک آکادمی آموزش برنامه‌نویسی آنلاین با بیش از 70 دوره آموزشی می‌باشد که تقریبا نیمی از آن‌ها رایگان است!
با کدیاد دیگر نیازی به اتلاف وقت خود برای یافتن یک آموزش جامع و مناسب ندارید و میتوانید هر زبان برنامه نویسی که خواستید را بطور رایگان یا با قیمتی منصفانه آموزش ببینید. لازم به ذکر است که با ثبت نام در هر دوره، میتوانید 2 سال پشتیبانی رایگان دریافت کنید و هر سوالی دارید را با کمک مدرس دوره حل کنید.
برخی از دوره‌های کدیاد مانند دوره آموزش فریمورک ریاکت نیز دارای هدایایی هستند، و شما میتوانید با ثبت نام در یک دوره، دوره‌های دیگری را نیز به رایگان دریافت کنید!
بنابراین، فرصت را هدر ندهید و همین حالا به تیم ما بپیوندید.
سرفصل های دوره
آشنایی و مقدمات
چرا باید از Next js استفاده کنیم
00:08:46
چی نیاز داریم؟
00:05:51
ابزارهای پرسش و پاسخ
00:11:09
استارت اولین پروژه
00:09:12
آشنایی با ساختار پروژه Next.js
00:10:09
Routing
آشنایی با مبحث Routing
منتشرشده
00:06:27
پیاده سازی Routing
منتشرشده
00:07:13
page router - داینامیک روت
منتشرشده
00:09:58
page router - آشنایی با catch all routes
منتشرشده
00:06:09
page router - آشنایی با Link و Navigation
منتشرشده
00:09:25
page router - آشنایی با ایجاد لایوت و app.js_
منتشرشده
00:07:08
page router - صفحات ارور شخصی
منتشرشده
00:03:17
app router - آشنایی page و layout
منتشرشده
00:06:08
app router - اضافه کردن قالب HTML به پروژه
منتشرشده
00:05:55
app router - آشنایی با nested routing و dynamic routing
منتشرشده
00:10:46
app router - آشنایی با Server components و Client components
منتشرشده
00:06:53
app router - آشنایی با route group و catch all segments
منتشرشده
00:06:48
app router - آشنایی بیشتر با layout
منتشرشده
00:05:38
app router - آشنایی با metadata
منتشرشده
00:10:24
app router - آشنایی با navigation و Link و Active-Link
منتشرشده
00:08:02
app router - آشنایی با فایل template
منتشرشده
00:05:19
app router - آشنایی با فایل loading
منتشرشده
00:03:34
app router - آشنایی فایلهای error و 404 و metadate
منتشرشده
00:08:14
Deploying
دیپلوی پروژه روی هاست Vercel
منتشرشده
00:05:46
دیپلوی پروژه روی هاست های داخلی نود جی اسی
منتشرشده
00:05:48
دیپلوی پروژه در سرور شخصی
منتشرشده
00:04:05
Pre-rendering & Data Fetching
آشنایی با مفهوم Pre-rendering
منتشرشده
00:05:49
page - آشنایی با SSG
منتشرشده
00:09:05
page - پیاده سازی SSG
منتشرشده
00:08:21
page - پیاده سازی SSG در صفحات داینامیک
منتشرشده
00:11:10
page - پیاده سازی SSG مدیریت fallback
منتشرشده
00:09:53
page - آشنایی با ISR و پیاده سازی json-server
منتشرشده
00:12:59
page - آشنایی با SSR
منتشرشده
00:11:20
page - آشنایی با SWR
منتشرشده
00:12:46
page - استفاده از SSR و Client Side Data Fetching
منتشرشده
00:08:08
app - آشنایی با data fetching در سرور کامپوننت ها (SSG)
منتشرشده
00:09:21
app - آشنایی با data fetching (dynamic params) در سرور کامپوننت ها (SSG)
منتشرشده
00:13:38
app - آشنایی با Server Actions
منتشرشده
00:08:37
app - آشنایی با Time-based revalidation
منتشرشده
00:07:00
app - استفاده از Server Actions
منتشرشده
00:08:40
app - آشنایی با On-Demand Revalidation
منتشرشده
00:11:17
app - انصراف از Data Caching
منتشرشده
00:05:00
استفاده از ابزار دیباگ در VSCode برای عملیات های سمت سرور
منتشرشده
00:09:39
API Routes & Route Handlers
معرفی api در Next.js
منتشرشده
00:02:37
روتینگ در API Routes
منتشرشده
00:12:13
آشنایی با HTTP Methods در API Routes
منتشرشده
00:05:53
آشنایی با Route Handlers
منتشرشده
00:11:36
آشنایی با CORS در پیاده سازی API
منتشرشده
00:08:48
نکات و ابزار های مهم
ترکیب سرور و کلاینت کامپوننت ها
منتشرشده
00:07:13
آشنایی با Context Provider
منتشرشده
00:10:08
آشنایی با مینی پروژه Authentication
منتشرشده
00:05:11
فرم لاگین - ذخیره توکن در کوکی و ریدایرکت در سرور اکشن
منتشرشده
00:09:40
فرم لاگین - ارسال پارامتر به سرور اکشن - وضعیت pending فرم
منتشرشده
00:09:41
فرم لاگین - اعتبار سنجی فرم با zod در سرور اکشن
منتشرشده
00:06:34
فرم لاگین - Google Authentication
منتشرشده
00:12:20
فرم لاگین - آشنایی با Next-Auth (ورد با اکانت GitHub)
منتشرشده
00:09:48
فرم لاگین - ذخیره و استفاده از کوکی ها سمت کاربر
منتشرشده
00:06:48
فرم لاگین - محدودیت دسترسی صفحات با middleware
منتشرشده
00:11:27
بهینه سازی تصاویر با کامپوننت Image
منتشرشده
00:07:56
Routing پیشرفته
چرا Parallel Routes ؟
منتشرشده
00:07:07
آشنایی با Parallel Routes
منتشرشده
00:06:24
آشنایی با navigation در Parallel Routes و Conditional Rendering
منتشرشده
00:06:17
طرح مساله برای یادگیری Intercepting Routes
منتشرشده
00:03:29
آشنایی با Intercepting Routes
منتشرشده
00:05:21
استفاده از Parallel Routes و Intercepting Routes در کنار هم برای یک فیچر جدید
منتشرشده
00:06:46
پیشنیاز های دوره چه چیزهایی هستند؟
- HTML
- CSS
- JavaScript
- React
نظرات دانشجویان
جواد . |
دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React
Ehsan Aryan |
دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React
سلام استاد با تشکر از دوره خوب و تدریس عالیتون. سوالی که داشتم این بود که در ورژن 13 به بعد نکست، مفاهیمی مثل routing تغییر کردن و یه سری مفاهیم جدید مثل server actions اضافه شدن که نکست 13 و 14 رو از ورژن های قبلی جدا میکنن، میخواستم ببینم چه ورژنی از نکست رو قصد دارید آموزش بدید؟
امیررضا فا |
دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React
سلام و احترام خیلی ممنون استاد بابت اموزش ها خوبتون واقعا هر قسمت از ویدیو ها نشون میده وقت زیادی برای ادیت و نحوه بیان تون صرف کردین دوره عالی هست تا اینجای کار همه مباحث خیلی عالی رفتین جلو و سر فصل ها هم خیلی منظم و حرفه ای قسمت بندی شده… ممنون میشم استاد اگر امکانش بود یک قسمتی هم برای استفاده api ها یا دیتابیس mongoDB در next.js یاد بدید .. سپاس
مدرس دوره
قاسم بساکی
7سال فعالیت در زمینه وب، به عنوان فول استک
عاشق برنامه نویسی
عاشق یادگیری
عاشق تدریس و انتقال علم
سوالات متداول
Next.js چیست و چرا از آن استفاده میشود؟
Next.js یک فریمورک ریاکتی است برای ارائه وبسایتها با سرعت بالا و راحتی برنامه نویسان است. این ابزار از ویژگیهایی مانند رندرینگ سمت سرور، pre-rendering و روتینگ فایل بیس بهره میبرد.
چگونه میتوان یک صفحه را با استفاده از Next.js pre-render کرد؟
با استفاده از تابع getStaticProps یا getServerSideProps در Next.js، میتوانید داده‌هایی را از منابع مختلف بخوانید و یک صفحه را پری رندر کنید. این توابع اطلاعات مورد نیاز صفحه را قبل از نمایش به کاربر دریافت میکنند.
چه تفاوتی بین Next.js و React وجود دارد؟
اصلیترین تفاوت این است که Next.js از رندرینگ سمت سرور (Server-Side Rendering) و پری رندرینگ (Pre-rendering) پشتیبانی میکند، در حالی که React بیشتر تمرکز خود را بر روی رندرینگ سمت کاربر (Client-Side Rendering) دارد.
چگونه با استفاده از Dynamic Routing در Next.js کار کنیم؟
با ایجاد یک فایل با الگوی [name].js در پوشه pages, میتوانید روتهای داینامیک با استفاده از URL parameters ایجاد کنید. مثلاً فایل pages/post/[id].js میتواند به روت /post/1 متصل شود.
چطور میتوان با ISR (Incremental Static Regeneration) کار کرد؟
با استفاده از revalidate در تابع getStaticProps میتوانید زمانی که یک کاربر صفحه را درخواست میدهد، دادههای جدید را بازیابی کنید. به عبارت دیگر، میتوانید برای هر فایل مربوط به صفحه ذخیره شده در سرو، یک زمان انقضاء (revalidate) تعیین کنید.
چگونه میتوان دادهها را به شکل یک API در Next.js در دسترس قرار داد (به عنوان تکنولوژی سمت سرور)؟
میتوانید از تابع getServerSideProps یا getStaticProps به همراه استفاده از فایل API در پوشه pages/api استفاده کنید تا دادههای خود را به عنوان یک API در دسترس قرار دهید.
چگونه Routing در Next.js کار میکند؟
Routing در Next.js به صورت خودکار انجام میشود. هر فایل در پوشه pages به معنای یک روت است و نام فایل به معنای یک روت است و نام فایل معین کننده URL مرتبط با آن روت میشود. برای مثال، فایل `pages/about.js` به طور پیشفرض به آدرس `/about` مپ میشود.
بازار کار نکست جی اس چطوره؟
مهارت در Next.js به عنوان یک فریمورک محبوب ریاکت وب، اهمیت زیادی دارد. شرکتهای فناوری و توسعه نرمافزار به دنبال توسعهدهندگانی هستند که توانایی ایجاد و توسعه وبسایتها و برنامههای React با استفاده از Next.js را دارند. Next.js برای پروژههای مختلف از سایتهای وب شخصی تا برنامههای تجاری بزرگ مورد استفاده قرار میگیرد. شرکتهای فناوری مانند Netflix، Uber، Hulu، GitHub و غیره از Next.js برای توسعه برنامهها و وبسایتهای خود استفاده میکنند. و این خود نشانی بر اهمیت بازار کار نکست جی اس است.
چه توانمندیها و مهارتهایی برای یک توسعهدهنده Next.js مورد نیاز است؟
توسعهدهندگان Next.js باید تسلط داشته باشند بر روی React.js، مفاهیم رندرینگ سمت سرور، مدیریت استیت ها، مهارت در استفاده از دادهها (API integration)، توانایی کار با Routing در Next.js، و تجربه در مدیریت استایلها را نیز داشته باشند. که این موارد و کلی مفاهیم بیشتر رو در این دوره باهم یاد میگیریم.
آیا یک توسعهدهنده React میتواند به راحتی به Next.js منتقل شود؟
بله، یک توسعهدهنده React با تسلط بر روی React میتواند به راحتی به Next.js منتقل شود. Next.js از React بر پایهی خودش بنا شده است و افرادی که با React آشنا هستند، به سرعت میتوانند با مفاهیم Next.js آشنا شوند.
آیا مهارت در Next.js در بازار کار ایران هم اهمیت دارد؟
بله، مهارت در Next.js در بازار کار ایران هم اهمیت دارد. با توجه به روند رشد استفاده از React و فریمورک‌های مرتبط در توسعه وب در ایران، توانمندی در Next.js میتواند فرصت‌های شغلی خوبی را به دنبال داشته باشد.
مزایای استفاده از Next.js چیست؟
رندر سمت سرور، سئوی بهتر، عملکرد سریع‌تر، تجربه کاربری روان‌تر و قابلیت مقیاس‌پذیری بالا از مزایای Next.js هستند.