telegram

توضیحات

nuxt.js (ناکست جی اس) چیست؟ nuxt.js که در حال حاضر بعد از مدت ها انتظار نسخه 3 آن منتشر شده، یک فریمورک جاوااسکریپتی هست که در سمت فرانت از فریمورک vue.js و در سمت بک اند از node.js استفاده کرده تا سایت های با قابلیت ssr (server-side rendering) که باعث افزایش performance و یا سرعت سایت و همچنین بهبود SEO هست را ایجاد کند. nuxt.js (ناکست جی اس) از بخش های زیر استفاده میکند.

JavaScript framework
ناکست برای انتخاب فریمورک جاوا اسکریپتی خود که reactivity و بصورت web components  باشه، vue.js را انتخاب و استفاده میکند.

Webpack and Vite
ناکست برای بخش bundler خود از vite و webpack استفاده میکند که vite بصورت پیش فرض انتخاب شده است.

Latest JavaScript syntax
ناکست برای transpiler با تبدیل کدهای ورژن جدیدتر جاوااسکریپت به ورژن قدیمی تر برای مرورگر های قدیمی از esbuild استفاده میکند.

Server side
ناکست برای بحث ssr (server-side rendering) و API routes از پکیج h3 استفاده میکند.

Routing library
ناکست برای routing در سمت فرانت و جابجای بین صفحات از پکیج vue-router استفاده میکند

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

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

دوستان دقت کنید در حال حاضر ورژن 4 ناکست معرفی شده اما
تغیرات جزیی داشته، یک cli جدید برای نصب پروژه ناکست معرفی شده که به این شکل هست
npm create nuxt@latest project-name
که مانند نصب قبلی هست.
و تغییر دوم اینکه پوشه ای به اسم app اضافه شده که شما پوشه هاتون مثله assets، components، composables، layouts و pages را داخل این پوشه ایجاد و استفاده میکنید. هرچند توی این ورژن جدید استفاده به روش قبل هم همچنان امکان پذیر هست و تغییرات همین بوده و نیاز به بازتولید کامل دوره نیست اما در آینده توی بعضی از قسمت ها این تغییرات گفته میشه

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

  • آشنایی با nuxt.js
  • ایجاد پروژه nuxt.js
  • rendering mode در next.js

routing

  • پوشه pages
  • navigation در nuxt
  • route های تو در تو (nested)
  • route های داینامیک (dynamic)
  • آشنایی با catch all routes
  • شخصی سازی صفحه ای error

تگ head و layout

  • تگ head در nuxt
  • پوشه ای layouts

component و composable

  • پوشه components
  • پوشه composables

state management

  • useState
  • pinia در nuxt

middleware و plugin

  • پوشه middleware
  • پوشه plugins

public و assets

  • پوشه public و nuxt-image
  • پوشه assets و فایل css و فونت
  • استفاده از sass
  • افزودن فریمورک bootstrap
  • افزودن فریمورک tailwindcss

data fetching و configuration

  • fetch$
  • useAsyncData
  • useFetch
  • configuration

server

  • پوشه server
  • متدهای http
  • middleware و plugin

احراز هویت (Token-Based Authentication)

  • آشنایی با Token-Based Authentication
  • توضیح و اجرای پروژه ای api
  • ایجاد پروژه nuxt و هدر
  • ایجاد صفحه ای register
  • register (عضویت کاربر) بخش اول
  • register (عضویت کاربر) بخش دوم
  • login (ورود کاربر)
  • logout (خروج کاربر)
  • صفحه ای پروفایل
  • بررسی احراز هویت کاربر
  • middleware برای احراز هویت
  • نمایش پست ها

احراز هویت (Cookie-Based Authentication)

  • آشنایی با Cookie-Based Authentication
  • register (عضویت کاربر)
  • login و logout کاربر
  • بررسی احراز هویت کاربر

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

javascript جاوا اسکریپت nodejs نود جی اس vuejs ویو جی اس vuex ویو ایکس nuxt.js ناکست جی اس nuxt.js v3 ناکست جی اس ورژن 3

مدرس دوره علی شیخ
مدت دوره 09:18:11
تعداد ویدیو 45
وضعیت دوره : کامل شده
قیمت دوره : 599,000 539,000 تومان
% 10 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
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 sass ساس

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

دوره های آموزشی
آموزش ساخت فروشگاه اینترنتی با ناکست جی اس (nuxt.js)
کامل شده
% 15 تخفیف

آموزش ساخت فروشگاه اینترنتی با ناکست جی اس (nuxt.js)

بعد از دوره آموزش ناکست (nuxt.js) که مورد استقبال شما دوستان عزیز قرار گرفت.حالا وقت آن رسیده که در قالب یک پروژه کاربرد...

799,000 679,000 تومان
18:59:37
آموزش تایپ اسکریپت (typescript)
کامل شده
% 15 تخفیف

آموزش تایپ اسکریپت (typescript)

تایپ اسکریپت یک زبان برنامه نویسی هست که در واقع همان جاوااسکریپت هست که بهش syntax تایپ و همچنین امکانات دیگری داده شده...

449,000 381,000 تومان
09:38:34
آموزش npm
کامل شده
% 10 تخفیف

آموزش npm

NPM مخفف Node Package Manager و در واقع Package Manager ایست که برای Node.js و یا بهتر بگیم دنیای برنامه نویسی جاوااسکری...

119,000 107,000 تومان
02:04:50
آموزش نست جی اس (nest.js)
کامل شده
% 15 تخفیف

آموزش نست جی اس (nest.js)

نست جی اس (nest.js) فریمورک یا چارچوبی برای ایجاد برنامه های کارآمد و مقیاس پذیر node.js در سمت سرور است. این فریمورک از...

699,000 594,000 تومان
12:52:59

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

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

  • Danial Jamshidi

    سلام استاد .
    بنده این دوره رو خریداری کردم .
    الان بنده نمیدانم چطور یه پروژه رو و قتی که ساختم بک اندش رو چطور پیاده سازی بکنم .
    اگه با خود nuxt api و قابلیت prisma و node این کار رو بکنم وضعیت چطور میشه از همه نظر ؟
    و اگه با php بزنم چطور میشه از نظر پوشه بندی فایل ها باید چطور باشن ؟؟؟

    لطفا جواب بدید .

    • علی شیخ

      3 هفته پیش

      سلام وقت بخیر.
      عذرخواهی بابت تاخیر در جواب
      بخش بک اند یا حالا api نویسی برای پروژه با این فریمورک، مبحث کاملا جدا هست.
      یک روش همنطور که فرمودید ایجاد دیتابیس و یک orm مثله prisma توی همین پروژه باشه و شما نسبت به آدرس endpoint ها پوشه های مربوط به api را ایجاد و مینویسید که در موردش توی این دوره گفته شده نحوه ساخت api در ناکست. قدم بعدی دیگه میشه میشه ایجاد CRUD و کار با دیتابیس از طریق orm
      راه حل دوم اینکه چون api یا بک اند از فرانت مجزا هست شما شما تز هر زبان یا فریمورک بک اندی دیگه میتونید استفاده کنید که مثال php زدید که برای php از فریمورک لاراولش استفاده میشه مانند این دوره که برای بخش احراز هویت ما از لاراول استفاده کرده بودیم.
      در کل نیاز به دانش شما توی بک اند و api نویسی داره حالا در خصوص لاراول دوره های زیادی قرار دادیم.
      بازم اگه سوالی هست میتونید همینجا و یا توی تلگرام وب پروگ هم بپرسید.

  • esakh

    سلام وقت بخیر
    من یه سری از درخواست های post رو روی سرور داخلی nuxt نوشتم اما با خطای cors رو به رو میشم که ظاهرا ماله سرور داخلیه nuxt است و مشکل از سمت
    backend پروژه نیست یه سری هدر ست میکنم اما خود ناکست به صورت پیشفرض هدر ها رو پاک میکنه و به طور کلی روی responseHeaders تو مرورگر هیچ هدری قرار نمیگیره امکانش هست راهنمایی کنید به چه صورت روی درخواست هایی نیاز به tocken دارند به صورت default هدر بزارم ؟

    • علی شیخ

      10 ماه پیش

      سلام وقت بخیر.
      داکیومنتش را بررسی کنید و یا سرچ کنید و مقاله ای در این خصوص مطالعه کنید. مثلا

      https://blog.logrocket.com/using-cors-next-js-handle-cross-origin-requests/

  • Raha Torabi

    Salam,
    man ye yadgiri awalie az javas. daram wa Karfarma az man mikhad be ejbar ke hatman alan ba Nuxt kar konam wa man video haye Vue shomaro ta nesfe didam be nazaretoon ba in wazeeat man mitunam dore Nuxt shomaro start bezanam?

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      ببینید پیشنهاد ما اینکه وارد دوره nuxt بشید و پیش نیاز ها که شامل vue هم هست را حداقل یکبار دیده و آشنا باشید چرا که توی این فریمورک کد های vue نوشته میشه

  • hamzeh parsi

    سلم استاد
    برای ارسال تصویر به بک اندم از توی postman که اقدام می کنم از طریق form-data کاملا موفق ارسال و پاسخ از سرور دریافت میشه ولی از طریق ناکست که ارسال می کنم خطا می ده.راهنمایی می فرمایید 

    

    async function onSubmit() {

      try {

        const data = await $fetch("/api/auth/register", {

          method: "POST",

          body: state,

          headers: {

            "Content-Type": "multipart/form-data;",

          },

        });

    

        if (data.msg === "user is exist") {

          navigateTo("/login");

        }

        if (data.success == false) {

          errorResponse.value = data.Errors;

        }

        if (data.success == true) {

          toast.add({

            title: data.msg,

            icon: "i-heroicons-check-circle",

            description: "This is a notification.",

          });

          console.log(data);

    

          navigateTo("/");

        }

      } catch (error) {

        console.log(error);

      }

    }

    export default defineEventHandler(async (event) => {
    const body = await readBody(event);
    const runtimeConfig = useRuntimeConfig();

    try {
    const res = await $fetch(
    `${runtimeConfig.public.apiBaseUrl}/api/register`,
    {
    method: "POST",
    body: body,
    headers: {
    "content-type": "multipart/form-data",
    },
    }
    );
    return res;
    } catch (error) {
    return error;
    }
    return body;
    });

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      شما باید ورودی را تیدیل به form data کنید و بعد ارسال کنید به api که میتونید از پکیج های مانند form-data استفاده کنید و یا چک و تست کنید که h3 تابعی برای این موضوع داره

  • radmann

    سلام وقت بخیر
    اگر برای پروژه ای سئو نیاز نباشه مثل پنل مدیریت یا وب اپلیکیشنی مثل حسابداری یا انبارداری و... آیا nuxtjs مزیت دیگه ای داره که بخواهیم ازش استفاده کنیم؟
    در مورد nextjs چطور؟

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      صرفا فقط همین یک موضوع نیست، اگه پروژه api base هست و قراره از vue یا react استفاده بشه بهتر از این دو فریمورک بخاطر قابلیت های که داره استفاده بشه

  • Behrooz Abdolahei Fard

    سلام وقت بخیر.
    من یک api با لاراول آماده دارم و فقط سمت فرانت رو دارم با nuxt مینویسم.
    اما اصلا seo صفحات منو شناسایی نمیکنه. هیچ کدوم از تگ ها و متن های صفحه رو گوگل نمیخونه.
    آیا دوره شما میتونه کمک کنه و این موضوع داخل هست؟

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      والا در خصوص ssr و اینکه صفحه ایجاد و render میشه و برگشت داده میشه صحبت شده و بصورت پیش فرض هم اینجوری هست فریمورک nuxt.js

  • Aref Heydari

    سلام وقت بخیر بنده چطوری متوجه بشم که دوره آپدیت هست و تکنولوژی حال حاضر ناکست رو پشتیبانی میکنه؟البته این سوال رو برای همه دوره ها پرسیدم که لازم نباشه هر سری کامنت بذارم

    • علی شیخ

      1 سال پیش

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

  • rezagarmabi

    سلام استاد
    اگه ما فرانت با Nuxt 3 بزنیم
    آیا Nuxt 4 بیاد از nuxt 3 پشتیبانی میکنه یا نه؟

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

    • علی شیخ

      2 سال پیش

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

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      فریمورک nuxt.js فریمورکی برای vue.js هست هر چند به عنوان بک اند میتوان استفاده کرد ولی فریمورک node.js نیست و nest.js فریمورکش هست که دوره اش توی سایت هست و میتوانید استفاده کنید.

  • Mahmood Karimi

    سلام اقای شیخ من زمان درخواست به سرور برای رجیستر این ارور دریافت میکنم exception 

    

    "Symfony\\Component\\HttpKernel\\Exception\\HttpException"

    file

    : 

    "C:\\Users\\USER\\Desktop\\exercies_file_nuxtjs_part_31\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Exceptions\\Handler.php"

    line

    : 

    396

    message

    : 

    "CSRF token mismatch."

    trace

    : 

    [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…},…]
    سرچ هم کردم گفته بودن مربوط به لاراول هستش

    • علی شیخ

      2 سال پیش

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

    • Mahmood Karimi

      2 سال پیش

      سلام اقای شیخ مشکل من هنوز حل نشده متن ارور که دریافت میکردم برای شما ارسال کردم اگر ممکن هست راهنمایی کنید که بتونم از پروژه استفاده کنم ممنون

    • علی شیخ

      2 سال پیش

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

  • faiziedris

    سلام وقت بخیر استاد الان برای یک پروژه فروشگاهی که api سمت سرور آماده دارم و همینطور vue 3 را هم کامل میدانم چه نیازی به nuxt js هست چون همه میگن nuxt بهتره از vue

    • علی شیخ

      2 سال پیش

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

  • abolfazlnaaderi

    سلام استاد
    مرسی بابت دوره خوبتون.
    یه سوال دارم اگر راهنماییم کنید لطف بزرگی کردید.
    توی قسمت 14 من دقیقا کاری که شما میکنید رو انجام میدم.
    const person = useState('person', () => 'yasser')
    و توی یه کامپوننت دیگه هم اینطوری میخوام بگیرم
    const person = useState('person');
    اما مقدارم خالی میاد.روی سیتم یکی دیگه دقیقا همینکارو کردم و کار میکرد.نظری ندارید؟

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ممنون از شما، اگه مراحل به درستی پیش برید نباید مشکلی باشه، کلمه person هم تغییر بدید همچنین سورس کد هم تست کنید. بازم مشکلی بود سورس کدتون را توی تلگرام پشتیبانی ارسال کنید تا براتون بررسی بشه

    • علی شیخ

      2 سال پیش

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

    • علی شیخ

      3 سال پیش

      سلام وقت بخیر.
      خیر، فریمورک css نیست و مربوط به جاوااسکریپت هست و میتوان از وردپرس برای ساخت api استفاده کرد و توی ناکست استفاده کرد.

    • علی شیخ

      3 سال پیش

      سلام وقت بخیر.
      اگه منظورتون deploy هست. توی دوره فروشگاهی nuxt که عضو هم هستید در بخش آخر توضیحات داده شده

    • Hooman Mousavi

      3 سال پیش

      خیلی ممنون
      دو تا سوال دارم:
      ۱- میشه تو پوشه سرور middleware هایی که میسازیم رو فقط روی یه یک سری از api های داخلی خاص اعمال کنیم نه رو همه؟
      ۲- چجوری میشه به صفحه ۴۰۴ ریدایرکت کرد؟ من از createError استفاده میکنم ولی فقط تو کنسول ارور میده ولی منتقل نمیشه به ۴۰۴

    • علی شیخ

      3 سال پیش

      شما توی میدلور از داخل پارامتر event که بهش پاس داده شده میتوانید url را بدست بیارید به این شکل event.node.req.url و شرط قرار بدید که اگه url فلان بود، فلان کار را بکنه
      مورد بعدی هم اینکه شما توی سرور هستید پس ما اونجا جواب را بصورت json برمیگردانیم و سمت فرانت باید چک کنه که اگه status code با مقدار 404 براش آمد فلان صفحه یا کار را انجام بده
      حتما بخش مورد نظر توی داکیومنت را مطالعه کنید و ممنون میشم توی قسمت مربوطه کامنت قرار بدید که دیگر دوستان بتوانند استفاده کنند.

  • majidarmantaheri

    سلام و خسته نباشید خدمت استاد عزیز، بازم یه دوره فوق العاده با همون کیفیت و قدر بیان عالی، به همه دوستانی ک نیاز به یادگیری ناکست دارن، توصیه میکنم دوره های استاد رو ببین، ک عالیه اموزش هاشون- من ک با اموزش های اقای شیخ انرژی میگیرم برای ادامه دادن یادگیری هام

    • علی شیخ

      3 سال پیش

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