توضیحات

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

مواردی که در این پروژه یاد میگیریم:

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

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


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

مدرس دوره علی شیخ
مدت دوره 19:23:02
تعداد ویدیو 87

وضعیت دوره : کامل شده
قیمت دوره : 699,000 454,000 تومان
% 35 تخفیف

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

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

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

  • بنده برای اهراز هویت با otp دقیقا همون کد ها و فایل بندی خودتون رو میزنم اما زمانی که میزنم شماره ثبت بشه و بره برای فرستادن otp بهم این ارور رو میده ::::::::::::::: POST http://localhost:3000/api/auth/login 422 (Unprocessable Entity)

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

  • مهندس جان، سورس کد پروژه هم دوباره ایمپورت کردم و درست نشد
    طبق بررسی که کردم کلا درگاه pay.ir منحل شده
    درگاه دیگه ای جایگزین واسه پروژه ها می کنید؟

    • سلام وقت بخیر.
      والا نمیدونم چه مدت زمان دیگه ای اوکی بشه اما مهم روند کاری هست و اینکه شما درخواست بزنید و جوابی از api بگیرید و حالا اون جواب را بصورت دستی برای تست قرار بدید.

  • سلام
    وقتی روی گزینه پرداخت کلیک میکنم، با ارور
    Attempt to read property "status" on null مواجه میشم
    با اینکه توی فایل دات env ادرس رو روی لوکال هاست بردم
    مشکل چیه؟

    • سلام وقت بخیر.
      ببینید باید دیباگ بشه، اول با پست من تست بشه که مشکل از api هست یا خیر که به احتمال زیاد هست.
      و بعد دیتابیس بررسی بشه
      اگه مشکل از این موارد باشه، میتوانید دیتابیسی که توی سورس کد هست را دوباره import کنید.

  • داخل postman زمانی که میخوام از endpoint ها استفاده کنم روی لوکال با دیتابیس mysql همچین اروری میگیرم روی windows 11:::::
    "message": "could not find driver (SQL: select * from `categories` where `categories`.`deleted_at` is null)",

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

  • سلام خسته نباشید من موقع دیپلوی کردن روی هاست به مشکل میخورم و برام اپلیکیشن نود جی اس درست میکنه و 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 یا جابجای نشده و اجرا نمیشه