توضیحات

بعد از دوره آموزش نکست (next.js) که مورد استقبال شما دوستان عزیز قرار گرفت.حالا وقت آن رسیده که در قالب یک پروژه کاربردی، بهتر نکست جی اس را یاد بگیرید تا بتوانید پروژه های مد نظر خودتون را پیاده سازی کنید.
ما توی این دوره یک فروشگاه اینترنتی با موضوع فست فود و با نکست جی اس ورژن 14 ایجاد میکنیم که شامل بخش های مختلف هست. اما هدف از این پروژه، یادگیری بخش های مختلفی هست که توی وبسایت ها استفاده میشه نه، صرفا فقط ایجاد یک وبسایت فروشگاهی.به عنوان مثال سیستم احراز هویت که در این دوره یاد میگیریم را شما میتونید توی پروژه های مختلف دیگه استفاده کنید.پس پروژه فروشگاهی یک مثال هست تا شما بخش های مختلف را یادبگیرید وبا آن پروژه های مدنظر خودتون را ایجاد کنید.در این دوره پنل ادمین و همچنین deploy یا آپلود پروژه در سرور هم توضیح داده میشود.

دوستان این دوره را کامل بر اساس آخرین ورژن نکست یعنی 14 بازتولید کردیم. حتما ویدیو معرفی دوره را در پایین مشاهده کنید.

  • توضیح و اجرای پروژه api (ایجاد شده با لاراول)
  • توضیح endpoint های api
  • توضیح بخش های قالب اصلی
  • ایجاد هدر و بخش ویژگی ها
  • بخش منو محصولات صفحه ای اصلی
  • افزودن نقشه (map)
  • ایجاد صفحه ای تک (single) محصول
  • ایجاد صفحه ای منو menu (فیلتر محصولات)
  • احراز هویت به روش OTP (ارسال SMS)
  • ایجاد بخش پروفایل کاربر شامل اطلاعات، آدرس ها، سفارشات و تراکنش های کاربر
  • افزودن تقویم شمسی یا جلالی
  • سبد خرید با redux
  • ایجاد کد تخفیف
  • درگاه پرداخت
  • پنل ادمین
  • افزودن نمودار (chart)
  • قرار دادن پروژه در سرور(deploy)
  • و ....

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


javascript جاوا اسکریپت جاوااسکریپت فروشگاه_اینترنتی react ری اکت next.js نکست جی اس نکست جی اس ورژن 14 next.js v14

مدرس دوره علی شیخ
مدت دوره 36:41:55
تعداد ویدیو 170

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

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

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

  • سلام خسته نباشید من موقع دیپلوی کردن روی هاست به مشکل میخورم و برام اپلیکیشن نود جی اس درست میکنه و node-moduls هم نصب نمیشه و ارور میده ممکنه راهنمایی بفرمایید که از چه بخش هایی ممکنه باشه

    • سلام وقت بخیر.
      اگه از سروری که تو دوره استفاده شده که با اجرای پروژه دستور npm i اجرا میشه و پوشه node_modules ساخته و بعد دستور npm build و start زده میشه
      اگه توی این کار مشکلی هست تیکت بزنید به هاست

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

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

  • سلام اقای شیخ وقتتون بخیر ,
    از نظر شما برای زدن داشبوردها با توجه به اینکه نیاز به سئو نیست استفاده از next درسته ؟ و اینکه به طور کلی کسی که next رو بلده کار درستیه که کلا بیاد تو همه پروژه های ری اکتی از نکست استفاده کنه ؟ بخاطر بحث روت بندی ها و … که نکست خیلی کارها رو تسهیل میکنه

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

  • سلام اقای شیخ وقتتون بخیر با توجه به راحتی و سهولت redux toolkit میخواستم بدونم چرا تو پروژه دوره ازش استفاده نشده . تو دوره react & redux هم چیزی ازش گقته نشده

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

  • سلام استاد
    پیرو دیدگاه قبلی که نوشته بودم کلیه مراحل برای ارسال اس ام اس رو که در ویدیو گفته بودیم رو طی کردم اما اس ام اس دریافت نکردم تیکت زدم به قاصدک و جوابی که دریافت کردم این بود:
    "درود روزخوش یک پیام تست با موفقیت به شماره ***********ارسال گردید. لطفا Api key جدیدی تعریف نموده و محدودیت هزینه برای آن اعمال نفرمایید. اعمال محدودیت هزینه جهت کنترل هزینه ها می باشد. خطای 9 مربوط به اعتبار شارژ پنل می باشد که با عدم تعریف محدودیت هزینه، این پیام تنها به دلیل کمبود اعتبار پنل، نمایش داده خواهد شد."

    Api-key جدید ثبت کردم طبق توضیحاشون و مشکل رفع شد.

    نکته ای که هست شما تو ویدیو زمانی که دارید این بخش رو توضیح میدین تیک اعمال هزینه ها رو میزنین و در حالی که نباید برای سرویس رایگان اعمال شه
    این توضیحات رو برای بهتر شدن گفتم چون زیاد از شما و وبراگ یاد گرفتم
    اگر صلاح میدونید ویدیو این بخش رو اصلاح کنید

    ممنون از آموزش های خوبتون
    پایدار باشید

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

  • سلام
    سوالی که داشتم اینکه آیا میشه پنل ادمین رو چون seo مهم نیست کلا با ریکت زد و گذاشت توی ساب دامین پروژه اصلی ؟ یعنی فقط قسمت صفحات اصلی سایت با نکست زده شده باشه

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

    • سلام وقت بخیر.
      سطح دسترسی مربوط به بک اند هست و مواردی که فرمودید مربوط به فرانت حالا میتوان توی ناکست هم بدلیل داشتن node در بک اند دیتابیس و موارد مختلف را داشت اما هدف اصلیش فرانت هست. در خواست سمت api ما ارسال میشه و اون به ما میگه که سطح دسترسی داره این کاربر یا نه

  • Error: Error serializing `.error` returned from `getServerSideProps` in "/".
    Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types
    این ارور میده هرچی تو گوگل میزنم چیز خواستی نمیاره

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

    • عجیب این جاست که کد خود تون قسمت ۱۹ فقط ی npm i بعد ران میکنم این ارور میده

    • ورژن node شما چند هست؟
      توی حالت های قبل هم این ارور را داشتید؟ ورژن 16 از node هم تست کنید و اطلاع بدید.

  • با درود
    من بعد از پیاده سازی بخش مربوط به مرتب سازی در منو به یک موردی برخوردم.
    این طوری که اول فیلترها رو اعمال کردم و نتیجه رو گرفتم، بعد برای این که محصولات رو به حالت اولیه برگردونم روی لینک منو از آدرس های بالا کلیک کردم اما با اینکه لینک در مرورگر به localhost:3000/menu تغییر کرد ولی محصولات به حالت اولیه برنگشت.
    سوالم اینکه چرا getServerSideProps بعد از کلیک روی لینک منو اجرا نشد تا محصولات به حالت اولیه برگردد. توی کامپوننت Link حالت shallow غیرفعال است.
    یا یه طوره دیگه بپرسم. getServerSideProps زمانی اجرا میشه که کامپوننت صفحه از حالت Unmount به Mount تغییر کنه؟

    • سلام وقت بخیر.
      طبق داکیومنت توی دو حالت اجرا میشه، یکی زمانیکه مستقیما اون route را صدا بزنید و توی url مرورگر وارد کنید و دومی زمانیکه توی فرانت بین صفحات با next/link و یا next/route جابجا بشید. توی مثال شما، بین دوتا صفحه مختلف transitions یا جابجای نشده و اجرا نمیشه

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

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

  • سلام
    ممنون از آموزش خوبتون. ی مشکلی دارم زمانی که با پست من میخوام endpoint لاگین رو تست کنم ارور cors بهم میده. چطور میتونم این مشکل رو برطرف کنم؟
    CORS Error: The request has been blocked because of the CORS policy

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

    • اگه سرور api در حال اجرا باشه نباید مشکلی داشته باشه
      یکبار دیگه مراحل اجرای api پروژه را مشاهده و تست کنید که اوکی هست و اگه هنوز مشکل داشتید توی تلگرام وب پروگ پیام بدید.