توضیحات

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

پیشنهاد میکنم که اگه قصد دارید پروژه ای را با 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 نکست جی اس

مدرس دوره علی شیخ
مدت دوره 11:12:15
تعداد ویدیو 61

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

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

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

    • سلام وقت بخیر.
      شما نیاز به 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 هم توی ویدیو توضیحات دوره صحبت شده حتما مشاهده کنید.

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

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