loading...
ثبت نام در دوره
ثبت نام در دوره

دوره آموزش Next.js | فریمورک قدرتمند React

<ul> <li>یادگیری اصول و تکنیک&zwnj;های پیشرفته برای ساخت وب&zwnj;سایت&zwnj;های بهینه و مقیاس&zwnj;پذیر.</li> <li>از ری اکت به Next.js: ساخت وب&zwnj;سایت&zwnj;های SEO-Friendly</li> <li>آشنایی با جدیدترین امکانات Next.js 14</li> <li>ساخت سیستم احراز هویت و وبلاگ با Next.js</li> <li>از مفاهیم پایه تا پیاده&zwnj;سازی حرفه&zwnj;ای برای توسعه&zwnj;دهندگان React.</li> </ul>

قیمت: 690,000 تومان

قیمت ارزی (تتر):

X
ثبت نام در دوره
08 : 44 : 17
65 جلسه
8 فصل
2 سال پشتیبانی

دوره آموزش 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:08:09
    • 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

    سلام استاد خسته نباشید و تشکر برای این دوره جذاب , انشالله سریع وارد نکست 14 بشیم و مثل روند تدریس ریکت سریع بریم توی پروژه خفن مثل پروژه ریکت

    Ehsan Aryan

    Ehsan Aryan | دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React

    سلام استاد با تشکر از دوره خوب و تدریس عالیتون. سوالی که داشتم این بود که در ورژن 13 به بعد نکست، مفاهیمی مثل routing تغییر کردن و یه سری مفاهیم جدید مثل server actions اضافه شدن که نکست 13 و 14 رو از ورژن های قبلی جدا میکنن، میخواستم ببینم چه ورژنی از نکست رو قصد دارید آموزش بدید؟

    امیررضا فا

    امیررضا فا | دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React

    سلام و احترام خیلی ممنون استاد بابت اموزش ها خوبتون واقعا هر قسمت از ویدیو ها نشون میده وقت زیادی برای ادیت و نحوه بیان تون صرف کردین دوره عالی هست تا اینجای کار همه مباحث خیلی عالی رفتین جلو و سر فصل ها هم خیلی منظم و حرفه ای قسمت بندی شده… ممنون میشم استاد اگر امکانش بود یک قسمتی هم برای استفاده api ها یا دیتابیس mongoDB در next.js یاد بدید .. سپاس

    حامد باقری

    حامد باقری | دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React

    دوره بسیار عالی هست و مباحث کاملا گویا بیان شده . ممنون از اقای بساکی عزیز

    زهره ستوده فر

    زهره ستوده فر | دانشجوی دوره دوره آموزش Next.js | فریمورک قدرتمند React

    سلام ، آقای مهندس بساکی ، مبهوت مهارت شما در آموزش nextjs هستم . از طرف خودم تشکر بسیار دارم و آرزوی موفقیت

    مدرس دوره

    قاسم بساکی


    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 هستند.