قراره تو این دوره چی یاد بگیرم؟

  • نصب و راه‌اندازی Next.js
  • رندرینگ سمت سرور (SSR)
  • مسیریابی و طرح‌بندی‌ها
  • استایلینگ، فونت‌ها و تصاویر
  • دریافت داده و اعتبارسنجی
  • احراز هویت کاربر و تأیید اطلاعات

سرفصل های دوره

۷ فصل
۵۰ جلسه
۹ ساعت
۱

فصل اول : مقدمات نکست 13

۱۳ قسمت
۰۲:۳۵:۳۷
1

معرفی نکست

رایگان
۰۷:۱۸
4

صفحات و مسیرها (Routes)

۰۶:۵۸
5

بررسی لینک و کامپوننت طرح بندی ها(Layouts)

۱۰:۵۶
6

استایل، فونت و تصاویر

۱۴:۱۸
7

دریافت داده و اعتبار سنجی

۲۳:۰۸
8

بخش پویا (params)

۱۱:۵۶
9

رندر استاتیک

۰۶:۱۳
10

ایجاد یک صفحه 404 سفارشی

۰۹:۵۸
11

بارگیری رابط کاربری و حالت تعلیق

۰۸:۱۶
12

کامپوننت فرم مشتری

۲۲:۳۷
13

ساخت اپلیکیشن

۰۶:۱۶
۲

فصل دوم : اطلاعات بیشتر در مورد مسیرها و طرح‌بندی‌ها

۴ قسمت
۰۰:۲۶:۳۳
۳

فصل سوم : رسیدگی به درخواست های دریافتی

۵ قسمت
۰۰:۲۹:۴۱
۴

فصل چهارم : احراز هویت

۹ قسمت
۰۱:۲۵:۵۸
۵

فصل پنجم : استفاده از دیتابیس

۸ قسمت
۰۱:۲۱:۰۶
۶

فصل ششم : پروژه نهایی گالری تصاویر

۱۰ قسمت
۰۲:۳۵:۵۸
۷

فصل هفتم : دپلوی پروژه نهایی

۱ قسمت
۰۰:۰۹:۵۰

در حوزه طراحی وب، فریمورک‌های متعددی وجود دارد که هرکدام در بخش خاصی، قابل استفاده هستند. React.js یکی از بهترین و مشهورترین فریمورک‌های Front-end در جاوا اسکریپت است که متاسفانه وضعیت و سازگاری بالایی با SEO ندارد؛ همین مشکل باعث شد شرکت Vercel دست به توسعه یک فریمورک برای React.js بزند تا مشکل عدم سازگاری آن با SEO را برطرف کند. فریمورک Next.js این مشکل را حل کرد. در این دوره آموزشی از دانشجویار به آموزش Next.js پرداخته‌ایم تا مسیری هموار برای تبدیل شدن به یک توسعه دهنده Full Stack را هموار کنیم. با شرکت در این دوره، می‌توانید با استفاده از فریمورک React و Next.js، پروژه‌های متعددی را پیاده سازی کنید.

مزیت آموزش Next.js دانشجویار نسبت به دوره های مشابه

  1. محتوای جامع: دوره تمامی مباحث مهم Next.js را پوشش می‌دهد، شامل نصب، رندرینگ سمت سرور، مسیریابی، طرح‌بندی‌ها، استایلینگ، دریافت داده، احراز هویت، ادغام با دیتابیس و دیگر موضوعات پیشرفته.
  2. پروژه‌های عملی: دوره شامل پروژه‌های عملی است، مانند ساخت یک گالری تصاویر، برای تقویت مفاهیم یادگرفته شده.
  3. مسیر یادگیری منظم: دوره یک مسیر یادگیری منظم از مباحث ابتدایی تا موضوعات پیشرفته را فراهم می‌کند.
  4. رویکرد مبتنی بر پروژه: پروژه‌های عملی به شما کمک می‌کنند تا مفاهیم نظری را در مواقع عملی اعمال کنید.
  5. ادغام با Supabase: از Supabase برای تمرینات مربوط به دیتابیس استفاده می‌شود.
  6. سناریوهای واقعی: دوره به مسائل واقعی مانند احراز هویت کاربر، مدیریت فرم‌ها و ساخت گالری تصاویر می‌پردازد.
  7. هدایت در دپلوی: فصل پایانی با راهنمایی در زمینه دپلوی پروژه به اتمام می‌رسد.

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

مباحث پوشش داده شده در دوره آموزش Next.js دانشجویار

  • نصب و راه‌اندازی Next.js
  • رندرینگ سمت سرور (SSR)
  • مسیریابی و طرح‌بندی‌ها
  • استایلینگ، فونت‌ها و تصاویر
  • دریافت داده و اعتبارسنجی
  • پارامترهای پویا (params) و رندرینگ استاتیک
  • مدیریت خطا و وضعیت‌های بارگیری
  • احراز هویت کاربر و تأیید اطلاعات
  • راه‌اندازی و ادغام با دیتابیس (Supabase)
  • ساخت یک پروژه گالری تصاویر رسپانسیو
  • راهنمایی در دپلوی پروژه نهایی

آموزش Next.js دانشجویار مناسب چه افرادیست؟

آموزش Next.js دانشجویار برای تمامی علاقه مندان به این حوزه مناسب است. اما بطور کلی افراد زیر را میتوان مناسب برای این آموزش دید:

توسعه‌دهندگان وب: مناسب برای توسعه‌دهندگان با تجربه ابتدایی در توسعه وب که می‌خواهند دانش خود را با Next.js گسترش دهند.
توسعه‌دهندگان React: مناسب برای توسعه‌دهندگان React که می‌خواهند قابلیت‌های رندرینگ سمت سرور و دیگر ویژگی‌های پیشرفته Next.js را بررسی کنند.

پیش‌نیازهای آموزش Next.js

برای یادگیری Next.js، ابتدا باید به فریمورک React.js مسلط شوید. بنابراین در ابتدا باید زبان‌های پایه در طراحی وب یعنی HTML و CSS را فرا بگیرید. سپس با جاوا اسکریپت آشنا شوید و تا سطح متوسط به آن مسلط شوید. در ادامه، باید دست به کار یادگیری React شده و پس از تسلط، در دوره آموزش Next.js شرکت کرده و به یادگیری مباحث بپردازید.

تسلط اندک به Node.js می‌تواند یک نقطه قوت باشد؛ زیرا از اصول توسعه Back-end با JS مطلع می‌شوید و بهتر با مباحث این حوزه ارتباط برقرار می‌کنید.

برای دسترسی آسان شما عزیزان به این دوره‌ها لینک آموزش مربوطه در زیر قرار گرفته است.

نیازمندی‌های دوره آموزش Next.js

  • ویرایشگر کد: استفاده از یک ویرایشگر کد مانند Visual Studio Code برای تمرین‌های کدنویسی توصیه می‌شود.
  • اتصال به اینترنت: دسترسی به اینترنت برای نصب وابستگی‌ها و دسترسی به منابع خارجی ضروری است.
  • مرورگر: یک مرورگر وب مدرن برای تست و پیش‌نمایش برنامه‌های Next.js.

Next.js چیست؟

Next.js یک فریمورک توسعه یافته بر پایه node.js برای React.js است که امکان استفاده از React برای کدنویسی در back-end را فراهم کرده و به صورت رایگان و متن باز توسعه و منتشر شده است.

Next.js امکانات متعدد و کاربردی برای استفاده از کتابخانه‌های React در اختیار توسعه دهندگان قرار می‌دهد؛ امام مهمترین مزیت آن، این است که پردازش و رندرینگ صفحات Native ساخته شده با React.js را به سمت سرور منتقل می‌کند. این کار از نظر SEO و گوگل، به عنوان یک نکته مثبت در رتبه بندی سایت در نتایج جستجو می‌شود. در ادامه به دلایل اهمیت این فریمورک در توسعه وب با ری‌اکت جی اس پرداخته شده؛ اما قبل از آن، بهتر است بدانیم Next.js یک فریمورک سمت سرور است یا سمت کاربر؟

Next.js فرانت اند است یا بک اند؟

سایت‌های ساخته شده در ری‌اکت، به صورتی طراحی شده‌اند که پردازش کدهای جاوا اسکریپت در مرورگر و سمت کاربر انجام شود. این کار باعث کاهش فشار به سرور سایت و در نتیجه، کاهش مصرف پهنای باند و هزینه می‌شود. این کار مشکلاتی را از نظر SEO در پی داشت که در ادامه به آنها اشاره شده است.

اما با ظهور Next.js، این امکان فراهم شد که پردازش صفحات به جای مرورگر، در سرور انجام شود. بنابراین می‌توان گفت که Next JS یک فریمورک سمت سرور برای React.js است. از سوی دیگر، می‌توان اینطور گفت که فریمورک next.js، ری‌اکت را که یک فریمورک Front-end است، به یک فریمورک Full Stack تبدیل می‌کند!

با توجه به این موارد، اگر به React مسلط هستید، با شرکت در دوره آموزش Next.js تبدیل به یک توسعه دهنده فول استک می‌شوید. چرا که می‌توانید با استفاده از ری‌اکت، توسعه فرانت اند را انجام داده و سپس از Next.js برای Back-end پروژه خود استفاده کنید.

چرا Next.js مهم است؟

Next.js به دلیل عدم سازگاری React با Technical SEO توسعه یافت. سایت‌ها و برنامه‌هایی که با استفاده از ری‌اکت ساخته شده بودند، از فناوری Dynamic Rendering استفاده می‌کردند. در این روش، براساس نوع بازدید کننده، نوع خاصی از رندر صفحات انجام می‌شد. برای مثال، اگر به عنوان یک کاربر وارد یک سایت ساخته شده با React.js می‌شدید، سایت درون مرورگر رندر می‌شد (CSR) و اگر یک ربات خزنده گوگل وارد سایت می‌شد، صفحات ابتدا در سرور رندرگیری شده و سپس نمایش داده می‌شدند (SSR). با مفهوم SSR در ادامه آشنا خواهیم شد.

رندر شدن صفحات با روش CSR هزینه‌های زیادی برای گوگل در پی داشت؛ به همین دلیل این شرکت، این روش را منسوخ شده اعلام کرده و توسعه دهندگانی که از ری‌اکت استفاده می‌کردند را با چالشی جدی مواجه کرد. در این زمان، شرکت Vercel دست به توسعه یک فریمورک بر پایه Node.js برای استفاده در React زد. حاصل تلاش این شرکت تبدیل به فریمورکی به نام next.js شد که توسط بسیاری از شرکت‌های بزرگ جهان نظیر Netflix مورداستفاده قرار می‌گیرد.

بازارکار Next.js در ایران و جهان

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

متاسفانه آمار رسمی از درآمد توسعه دهندگان این فریمورک در ایران وجود ندارد؛ اما با توجه به آگهی‌های استخدام، می‌توان حدود آن را مشخص کرد. در ایران یک برنامه نویس سنیور React.js مسلط به Next.js در ماه بین 18 تا 35 میلیون تومان و بالاتر درآمد دارد. این مقدار با توجه به متوسط درآمد برنامه نویسان مسلط به javaScript در ایران، مقدار بالایی تلقی می‌شود.

طبق آمار سایت beincrypto.com، درآمد برنامه نویسان ارشد Next.js در کشورهای خارجی بین 80,000 دلار تا 120,000 دلار در سال است. البته این مقدار در هر کشور متفاوت است.

برای مثال، در آمریکا درآمد این افراد بین 100,000 تا 168,000 دلار در سال است؛ در حالی که در انگلستان و کانادا، این مقدار محدود به 135,000 دلار است. همچنین در کشوری نظیر لیتوانی، متوسط درآمد توسعه دهندگان سنیور Next.js از 60,000 دلار در سال بیشتر نمی‌شود.

مقایسه Next.js با باقی تکنولوژی‌های مشابه

رقبای نکست جی اس، دو فریمورک Nuxt.js و Angular Universal هستند که به ترتیب برای فریمورک‌های Vue.js و Angular.js توسعه داده شده‌اند.

از نظر فنی، تفاوت زیادی بین این سه فریمورک وجود ندارد. اصلی‌ترین و مهم‌ترین تفاوت موجود، در فریمورک مورداستفاده برای توسعه است. همانطور که در بالا گفته شد، Next.js برای استفاده در کنار React طراحی شده؛ در حالی که Nuxt.js در پروژه‌های توسعه یافته با Vue.js استفاده می‌شود و Angular Universal نیز، یکی از فریمورک‌های Angular.js است.

از نظر تجربه کاربری و سخت بودن فرآیند یادگیری، Angular Universal کمی از رقبا عقب می‌افتد. در صورت که تسلط زیادی به Angular نداشته و در استفاده از آن تازه‌کار باشید، نمی‌توانید به خوبی با این فریمورک ارتباط برقرار کنید. این مشکل در رابطه با Nextjs و Nuxtjs وجود ندارد.

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

کاربرد Node.js در Next.js چیست؟

به صورت کلی، در صورتی که بخواهید با استفاده از جاوا اسکریپت، بخش Back-end سایت را پیاده کنیم، از Node.js استفاده می‌کنیم. به همین دلیل برخی افراد قبل از یادگیری و آموزش Next.js، اندکی Node.js را فرا می‌گیرند تا با اصول توسعه Nack-end با استفاده از JavaScript آشنا شوند. از طرف دیگر، هسته اصلی Next.js براساس Node.js توسعه پیدا کرده؛ بنابراین اگر قبلا با نود جی اس کار کرده باشید، بهتر و سریعتر نکست جی اس را فرا می‌گیرید.

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

نصب، راه اندازی و پیکربندی Next.js

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

  1. ابتدا Node.js را نصب کنید. با استفاده از دستور «node –v»، ورژن Node.js نصب شده را دریافت کرده و با آخرین نسخه منتشر شده در سایت https://nodejs.org/ مقایسه کنید.
  2. سپس با استفاده از دستور «npx create-next-app@latest»، فریمورک Next.js را نصب کرده و یک پروژه خالی ایجاد کنید.
  3. پس از این کار، تعدادی اعلان برای شما نمایش داده می‌شود که می‌توانید نام پروژه و امکانات موردنیاز نظیر استفاده از TypeScript، استفاده از Tailwind CSS، انتخاب نام مستعار پروژه، استفاده از دایرکتوری و… را تعیین کنید.
  4. در ادامه، فایل‌های موردنیاز به صورت خودکار بارگیری شده و می‌توانید توسعه پروژه خود را آغاز کنید.

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

منظور از SSR یا Server Side Rendering چیست؟

رندرگیری در سمت سرور یا SSR، نوعی پردازش صفحات سایت است که از قدمت بالاتری نسبت به باقی روش‌ها برخوردار است. در این حالت، داده‌ها و کدهای صفحه وب ابتدا در سرور سایت پردازش و رندرگیری می‌شوند و سرور، کدها و اطلاعت رندر شده را به مرورگر منتقل می‌کند؛ در ادامه نیز مرورگر صفحه پردازش شده را به کاربر نمایش می‌دهد. این روش یکی از بهترین و سریع‌ترین روش‌های پردازش صفحات وب است که مزایای و معایب خاص خودش را دارد.

فرق بین CSR و SSR چیست؟

ابتدا اجازه دهید CSR را تعریف کنیم.

CSR یا Client-Side Rendering یکی از روش‌های پردازش صفحات وب است که محبوبیت قابل توجهی دارد. در این روش، برخلاص SSR که ابتدا صفحات سایت در سرور رندگیری شده و سپس به مرورگر منتقل می‌شدند، اسکلت اصلی صفحه شامل کدهای HTML به همراه کدهای JavaScript به مرورگر ارسال می‌شوند. پردازش و رندرگیری این صفحات در مرورگر انجام شده و اطلاعات موردنیاز که باید از دیتابیس بازخوانی شوند، با استفاده از API در اختیار مرورگر قرار می‌گیرند.

عمده‌ترین تفاوت SSR و CSR در محل رندرگیری است. در SSR، صفحات در سرور سایت پردازش می‌شوند. این کار باعث مصرف پهنای باند و درگیر شدن منابع سرور می‌شود. همچنین صفحاتی که از SSR استفاده می‌کنند، در تمام دفعات با سرعت مشابه بارگیری می‌شوند. گرچه این مورد به شلوغی سرور نیز بستگی دارد.

در طرف مقابل، با استفاده از روش CSR، سایت در دفعه اول با کمی کندی با می‌شود؛ اما در دفعات بعدی، سرعت بارگزاری صفحات بسیار سریعتر می‌شود. به این دلیل ذخیره شده صفحه رندر شده در مرورگر است. زمانی که مرورگر، یک صفحه را رندر می‌کند، یک نسخه از آن را برای مدت مشخصی ذخیره می‌کند. به این ترتیب، در دفعات بعدی نیازی به رندرگیری مجدد آن صفحه نیست و مرورگر، یک نسخه آماده از صفحه رندرشده را برای کاربر نمایش می‌دهد. 

با وجود فریمورک Next.js نیازی به استفاده از React.js وجود دارد؟

این مورد یکی از تصورات اشتباه درباره next.js است. برخی تصور می‌کنند با یادگیری Next.js دیگر نیازی به یادگیری و استفاده از React.js وجود ندارد؛ در صورتی که Next.js یکی از فریمورک‌های React است و عملا بدون ری‌اکت، امکان استفاده از آن وجود ندارد.

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

ادامه متن دوره ...

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

چرا باید این دوره Next.js را از مجموعه دانشجویار یاد بگیریم

پوشش جامع: این دوره تمامی ویژگی‌های Next.js را به خوبی پوشش داده و تضمین می‌کند که شما یک درک جامع از چارچوب را خواهید داشت و همچنین مدرس و تیم دانشجویار به صورت کامل هر زمان نیاز به کمک داشتید در کنار شما هستن.