telegram

توضیحات

next.js (نکست جی اس) چیست؟ next.js یکی از فریمورک های کتابخانه react.js برای production است به این معنی که، تمام آنچه که به عنوان توسعه دهنده برای توسعه اپلیکیشن های وب با ری اکت را نیاز دارید در اختیار شما قرار می دهد. ابزارهایی با کارایی بسیار بالا مانند hybrid static ، رندر سمت سرور برای ساخت اپلیکیشن های SSR و پشتیبانی از تایپ اسکریپت یا smart bundling و ... که تمامی این موارد از قبل آماده است ونیاز به هیچ پیکربندی توسط شما وجود ندارد.

دوستان توی این دوره در مورد ورژن 12 و آخرین ورژن یعنی، 13 نکست جی اس صحبت شده، حتما ویدیو معرفی دوره را مشاهده کنید.

پیشنهاد میکنم که اگه قصد دارید پروژه ای را با react.js پیاده سازی کنید آن را با next.js پیاده سازی کنید و از امکانات خیلی خوب آن مانند:

File-system Routing
اختصاص هر کامپوننت که در پوشه صفحات در مسیر پروژه قرار دارد به یک Route یا مسیر مجزا

Hybrid: SSG and SSR
Next.js از SSG و SSR پشتیبانی میکند که به ما در سرعت سایت و SEO کمک میکند که این موضوع را کامل در این دوره بررسی میکنیم.

Incremental Static Generation
می توانید به راحتی صفخات استاتیک از قبل رندر شده را پس از زمان ساخت، به صورت تدریجی آپدیت و بروز کنید.

TypeScript Support
قطعا یکی از مهمترین ویژگی های Next.js این است که به راحتی می توانید در پروژه های خود از TypeScript استفاده کنید.

API Routes
قابیلت ایجاد EndPoint های مختلف برای پیاده سازی Api برنامه و توسعه سمت سرور آن

Built-in CSS Support
به راحتی می توانید استایل های هر کامپوننت را در درون همان کامپوننت به صورت مجزا تعریف کنید، همچنین امکان استفاده از Sass هم وجود دارد.

و موارد دیگر استفاده کنید. برای درک و آشنایی بیشتر با next.js حتما ویدیو معرفی و همچنین قسمت های رایگان دوره را مشاهده کنید.

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

مباحثی که در این دوره گفته میشود شامل :
آشنایی با next.js

  • آشنایی با next.js
  • ایجاد پروژه next.js
  • آشنایی با فولدرها و فایل های پروژه next.js

سیستم routing

  • آشنایی با routing
  • route های تو در تو (nested)
  • route های داینامیک (dynamic)
  • آشنایی با catch all routes
  • کامپوننت Link
  • آشنایی با middleware
  • شخصی سازی صفحه ای 404

pre-rendering در next.js

  • آشنایی با pre-rendering
  • آشنایی با static generation
  • صفحات SSG با getStaticProps
  • بررسی build صفحات SSG با getStaticProps
  • صفحات SSG با getStaticPaths
  • بررسی build صفحات SSG با getStaticPaths
  • fallback در getStaticPaths
  • آشنایی با ISR
  • بررسی build صفحات ISR
  • on-demand ISR
  • آشنایی با SSR
  • SSR با dynamic path
  • بررسی و دریافت اطلاعات در CSR
  • CSR و pre-rendering

Api Routes

  • آشنایی با api routes
  • درخواست get
  • درخواست post
  • داینامیک api routes
  • درخواست delete
  • catch all api routes
  • api routes و pre-rendering

styling

  • global style
  • component-level style
  • css-in-js
  • استفاده از sass
  • افزودن فریمورک bootstrap
  • افزودن فریمورک tailwindcss

Authentication یا احراز هویت

  • آشنایی با Token-Based Authentication
  • توضیح و اجرای پروژه api
  • ایجاد هدر پروژه
  • ایجاد صفحه register
  • ایجاد authentication context
  • register یا عضویت
  • login یا ورود
  • ذخیره توکن در cookie
  • logout یا خروج
  • بررسی احراز هویت کاربر
  • نمایش پست های پروژه

مباحث تکمیلی

  • ایجاد layout
  • کامپوننت Head
  • کامپوننت Script
  • کامپوننت Image
  • absolute imports و module paths
  • خروجی static html
  • متغیرهای enviroment
  • redirect در نکست
  • typescript در نکست

دوره پیشنهادی، بعد از گذراندن این دوره :

پیش نیاز این دوره :

طراحی وب javascript جاوااسکریپت react ری اکت next.js نکست جی اس next.js v12 next.js v13

مدرس دوره علی شیخ
مدت دوره 14:50:55
تعداد ویدیو 74
وضعیت دوره : کامل شده
قیمت دوره : 599,000 419,000 تومان
% 30 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js

دوره های پیشنهادی

دوره های آموزشی
آموزش تیلویند(Tailwindcss) پروژه محور
کامل شده
% 30 تخفیف

آموزش تیلویند(Tailwindcss) پروژه محور

Tailwind CSS یک (utility-first) فریمورک CSS است که ابزارها و class ‌های پر استفاده CSS را در اختیار شما قرار می‌دهد و تف...

399,000 279,500 تومان
10:38:10
آموزش ری اکت (React.js) پروژه محور
کامل شده
% 25 تخفیف

آموزش ری اکت (React.js) پروژه محور

ری اکت (React.js) یک کتابخانه جاوااسکریپتی برای ساخت رابط کاربری(user interfaces) برای اپلیکیشن های تک صفحه ای (single p...

399,000 299,000 تومان
16:08:35
آموزش Emmet
کامل شده

آموزش Emmet

Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی افزایش دهد. این ا...

رایگان
01:12:37
آموزش webpack
کامل شده
% 25 تخفیف

آموزش webpack

webpack یک static module bundler برای برنامه‌های جاوااسکریپتی است. یعنی کدهای شما را آنالیز و تمام ماژول‌ها و وابستگی‌ها...

149,000 111,750 تومان
05:03:42

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • amir mohazab

    سلام استاد, من طبق گفته شما با @ ورژن 12.1.6 رو سعی میکنم نصب کنم ولی در نهایت آخرین ورژن next نصب میشه. ایرادی نداره؟ هر پکیج دیگه ای رو با استفاده از @ میتونم به ورژن دلخواه نصب کنم ولی نمی دونم چرا نکست این طوری نیست!

    • علی شیخ

      1 ماه پیش

      سلام وقت بخیر.
      چه ورژنی دقیقا نصب میشه براتون، 13 یا 12
      در کل مشکلی نیست

    • علی شیخ

      4 هفته پیش

      بعد از زدن دستور و نصب که الان براتون ورژن 13.3.2 نصب شده، وارد پروژه بشید و دستور 

      npm i next@12.1.0 react@17.0.2 react-dom@17.0.2

      را بزنید که از نسخه 12 استفاده کنید.
      بزودی این دوره آپدیت میشه و در مورد ورژن 13 نکست هم صحبت میشه

    • علی شیخ

      1 ماه پیش

      سلام وقت بخیر.
      توی تا کامنت پایین تر توضیح داده شده که تغییرات مهم و اساسی توی ورژن ۱۳ هنوز beta هست و انشاا... زمانیکه stable بشه، دوره را آپدیت میکنیم

    • علی شیخ

      1 ماه پیش

      سلام وقت بخیر.
      جلسه 10 و 51 دوره آپدیت شده و توضیحات در انتهای ویدیو داده شده، اگه توی ویدیو شما نیست یکبار دیگه این دو قسمت را دانلود کنید.

  • Amirreza Foshati

    سلام و احترام
    ممنون بابت دوره خوبتون ایا دوره را هم اپدیت میکنید چون دوره next ورژن ۱۲.۱ داشتید توی ویدیو معرفی توضیح می دادین الان ورژن ۱۳.۲ هست چون اپدیت بودن دوره ها از همه چی مهم تر هست؟؟

    • علی شیخ

      2 ماه پیش

      سلام وقت بخیر.
      تغییرات مهم و اساسی توی ورژن 3 هنوز beta هست و انشاا... زمانیکه stable بشه، دوره را آپدیت میکنیم

    • علی شیخ

      2 ماه پیش

      سلام وقت بخیر.
      به دریافت توکن که یک رشته هست و فرمت خاصی نداره از سرور و ارسال به سرور در درخواست های مورد نیاز توی بخش احراز هویت صحبت شده، در مورد مبحث api صحبت شده اما اگه منظورتون اینکه دیتابیس ایجاد بشه توی نکست برای api، خارج از این دوره هست و نیازه با ORM های مانند prisma آشنا باشید که در موردش توی دوره ای nest.js صحبت شده

    • علی شیخ

      5 ماه پیش

      سلام وقت بخیر.
      توی کامنت پایین پاسخ داده شده!! در حال حاضر نسخه beta هست، stable شد انشاا... در قالب قسمت به دوره اضافه میکنیم.

  • ghasemi

    استاد گرامی وقت بخیر
    در دوره nestjs توضیحات بسیار عالی و کاملی در خصوص استفاده از prisma و دیتا بیس PostgreSQL ارائه شده است ولی متاسفانه در دوره next.js ارائه نشده است خواهشمند است اگر امکان داره موارد فوق را و همچنین یک ویدئو برای ارتباط با mssql server به این دوره اضافه کنید واگر نیاز به پرداخت مابه التفاوت هست نیز اطلاع رسانی کنید چون در این حالت دوره next.js نیز کامل تر ارائه می گردد
    با تشکر از جنابعالی که در امر آموزش فعال هستید

    • علی شیخ

      7 ماه پیش

      سلام وقت بخیر.
      ببینید nest.js یک فریمورک بک اندی هست ولی next.js مربوط به فرانت اند و دوتا موضوع جدا هست. درسته توی next هم میشه کد بک اندی نوشت بخاطر اینکه داره از node استفاده میکنه، اما هدف و کار اصلیش فرانت اند هست. بازم علاقه مند باشید میتوانید در مورد prisma مطالعه و توی next استفاده کنید.

  • ghasemi

    با سلام در خصوص سوالی که از استاد گرامی مطرح کردم جنابعالی آموزش کاملی از مای اس کیو ال و لاراول در بک در چندین قسمت به شکلی عالی ارائه نموده اید
    ولی من می خواستم فرانت اند و بک اند کلا با nextjs باشد و بانک اطلاعاتی با sql
    و در عین حال امنیت نیز تامین باشه
    با تشکر

    • علی شیخ

      7 ماه پیش

      سلام وقت بخیر.
      ممنون از شما، شما میتوانید از ORM ها node.js مانند prisma استفاده کنید که دیتابیس های مختلفی را ساپورت میکنه

    • علی شیخ

      7 ماه پیش

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

  • pourianz

    سلام استاد.خسته نباشید. یک سوالی در مورد نحوه استفاده از bootstrap داشتم.
    درون ری اکت از react-bootstrap استفاده میکنن تادسترسی مستقیم به دام نداشته باشیم تا پرفورمنس آسیب نبینه .ولی درون next از فایل js آن استفاده شده که دسترسی مستقیم به دام محسوب میشه. دلیل این قضیه چیست؟ با این حساب پس میتوانیم از document برای سلکت کردن المان های اچ تی ام ال توی next استفاده کرد؟!من گیج شدم یک مقداری

    • علی شیخ

      7 ماه پیش

      سلام وقت بخیر.
      بوت استرپ در نسخه ۵ دیگه از jquery استفاده نمیکنه و جاوااسکریپت خام هست و تداخلی با ری اکت نداره، اما در کل بهتره که کارهای موردنظرتون که قراره با js انجام بشه با ری اکت انجام بشه
      توی نکست در سمت فرانت هم ما ری اکت را داریم و تفاوتی نداره
      توی خوده ری اکت هم شما میتوانید از document استفاده کنید داخل useEffect و یا از ref استفاده کنید.

    • علی شیخ

      7 ماه پیش

      سلام وقت بخیر.
      متاسفانه بخاطر اختلال در شبکه اینترنت هست. با فیلتر شکن و همچنین سایت شکن (توی اینترنت سرچ کنید شکن، سایتش میاد براتون) تست کنید.

    • علی شیخ

      10 ماه پیش

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

    • علی شیخ

      10 ماه پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون🙏
      عرض کردیم چندین بار که، انشاا... زمانی که نسخه ۳ stable بیاد آماده سازی میکنیم برای ضبط

  • arbasic

    سلام استاد:
    من یک پروژه را دارم با next می زنم و component های مختلف را ایجاد می کنم و در صفحه اول import می کنم. تعداد که کمی زیاد شد ایت error را داد:
    hydration error و گفت که اطلاعات سرور با اطلاعات صفحه نمی خواند. برای رفع این error سایت next و react رو هم مطالعه کردم و راه حل خوبی ارایه نکرده بودن و خیلی کلی گفته بودن. ممکنه راهنمایی بفرمایید؟ شما تا حارا برخورد داشتین؟

    • علی شیخ

      10 ماه پیش

      سلام وقت بخیر.
      این یک ارور کلی هست و شما باید دونه دونه فایل یا کدی که میزنید را بررسی کنید که اول ببینید مشکل از کدوم فایل یا کد هست تا بشه بررسی کرد.
      مشکل بصورت کلی برای اینکه رندر سمت سرور با رندر سمت کلاینت یکی نیست، اگه تغییر خاصی توی کلاینت دارید میتونید از useEffect استفاده کنید که فقط سمت کلاینت اجرا میشه

    • علی شیخ

      11 ماه پیش

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