توضیحات

next.js (نکست جی اس) چیست؟ next.js یکی از فریمورک های کتابخانه react.js هست. فریم ورکی که از react استفاده می کند و تمام برنامه شما (سمت سرور و سمت کلاینت) را برایتان می سازد. این فریم ورک قابلیت های بسیار بیشتری را نسبت به react به شما می دهد در next.js هنوز هم کد react می نویسیم اما با قابلیت های بسیار زیادی که نکست جی اس در اختیار ما قرار میده

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

 برای درک و آشنایی بیشتر با next.js حتما ویدیو معرفی و همچنین قسمت های رایگان دوره را مشاهده کنید. این دوره بر اساس آخرین ورژن نکست جی اس یعنی 14 کامل بازتولید شده

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

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

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

مبحث routing

  • آشنایی با سیستم routing
  • آشنایی با layout
  • کامپوننت Link
  • آشنایی با templates
  • آشنایی با metadata
  • آشنایی با هوک usePathname, useRouter, useSearchParams
  • آشنایی با route groups و dynamic routes
  • آشنایی با loading ui و فایل error.js

 styling در next.js

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

کامپوننت های Font و Script و Image

  • آشنایی با کامپوننت Font برای افزودن فونت از گوگل و فونت شخصی
  • کامپوننت Script
  • کامپوننت Image

pre-rendering و data fetching

  • آشنایی با pre-rendering
  • سرور و کلاینت کامپوننت ها (server, client components)
  • آشنایی با پکیج json-server
  • data fetching در سرور و کلاینت کامپوننت
  • آشنایی با caching و revalidating
  • آشنایی با server actions
  • آشنایی با useFormStatus و useFormState

مبحث parallel, Intercepting routes

  • آشنایی با parallel routes
  • آشنایی با Intercepting routes
  • مثال از parallel, Intercepting routes

مبحث route handler و middleware

  • آشنایی با route handler
  • استفاده از cookies , headers , request body
  • آشنایی با middleware

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

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

 

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

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


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

مدرس دوره علی شیخ
مدت دوره 24:41:33
تعداد ویدیو 128

وضعیت دوره : کامل شده
قیمت دوره : 599,000 539,000 تومان
% 10 تخفیف

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • سلام و خسته نباشید و خداقوت بابت دوره های خوبتون.
    استاد برای اینکه هم بک اند و هم فرانت اند پوشش داده بشه، شما Express و React رو پیشنهاد می‌کنین یا Next.js؟

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

  • سلام استاد.خوبین؟
    در هنگام انتقال نکست به هاست باید نود رو هم نصب کنیم
    و
    در فصل api از یه فایل به جای دیتابیس استفاده کردیم حالا در پروژه های واقعی باید یک دیتابیس هم با نود نصب کنیم؟
    آیا این موارد در آموزش فروشگاه با نکست گفته میشه؟و زمان انتشار اون رو هم اگه ممکنه بفرمایید

    • سلام وقت بخیر.
      در مورد اینکه نود نیاز هست توی هاست بارهاااا توی دوره گفته شده!!!
      ببینید شما نکست را میتوانید به عنوان فرانت استفاده کنید و برای بک اند از api استفاده کنید از طرفی چون نکست توی بک اند از نود استفاده میکنه میتوانید کد بک اند هم بزنید و دیتابیس هم داشته باشید.
      توی فروشگاهی از api آماده استفاده میشه
      حتما شما برید اول پیش نیاز های دوره را کار و تمرین کنید نه اینکه فقط ببینید و بعدش این دوره را چندین بار ببینید.

    • سلام. وقت بخیر
      چه زمانی برگذار میشه؟
      من تقریبا هر روز دارم چک میکنم سایت رو. امیدوارم دوره بعدی nuxt باشه.
      ممنون.

    • سلام وقت بخیر.
      وارد وب سایتش بشید زده که توی تیر ماه میاد حدودا و بعدش مدت زمانی نیاز هست برای آماده سازی محتوا و ضبط

  • سلام وقت بخیر شما خیلی ممنونم از آموزش خوبتون یه سوال داشتم
    توی next میشه توی یک page چند نوع api رو صدا کرد؟
    مثلا مثل سایت های فروشگاهی و اینا ما توی یک صفحه چند نوع api صدا برنیم البته میشه یه مثال کدی هم بزنید در این باره سپاس فراوان از شما

    • سلام وقت بخیر.
      حتما دوره را تا انتها ببینید. از طرفی شما سمت بک اند یا کلاینت به هر تعداد میتوانید به endpoint های مختلف درخواست بزنید.

  • سلام علی آقا.خوبین؟ عیدتون مبارک
    تو ویدیو های فصل 3 فرمودین که نکست به نود جی اس نیاز داره و کارهای pre rendreing رو انجام میده

    حالا سوالم اینه که زمان انتقال پروژه به هاست باید نود رو هم اونجا نصب کنیم؟

    و اگه ممکنه یه پروژه با دیپلوی هم آخر کار لطف کنین قرار بدین چون خودتون همیشه تو آموزش هاتون میگین که یادگیری با انجام پروژه کامل میشه

    • سلام وقت بخیر.
      عید شما هم مبارک.
      بله نیاز به node.js داره، هاست مثله سیستم شما هست با این تفاوت که همیشه به اینترنت وصل هست و اگه شما توی سیستم خودتون برای اجرای پروژه به پکیج ها یا موارد مختلفی نیاز دارید طبیعتا توی سرور هم نیاز دارید.
      در مورد پروژه برای next هم توی ویدیو توضیحات دوره صحبت شده حتما مشاهده کنید.

  • سلام خسته نباشید
    ایا پروژه تمرینی هم در این دوره هست ؟؟؟اگه نیست ایا در یک دوره جدید پروژه تمرینی در اینده اضافه می شود به سایت؟

    • سلام وقت بخیر.
      درمورد دوره و مواردی که توی دوره صحبت میشه در ویدیو معرفی دوره صحبت کردیم، حتما مشاهده کنید جواب سوالتون هم هست