آموزش Next js 15 رایگان و پروژه محور با مرن فا
جلسه 1 : معرفی دوره آموزش نکست جی اس 15 + tailwind.css
جلسه 2 : برتری های Next.js نسبت به فریمورک های دیگر - برترین سایت های نکست جی اسی ایران
جلسه 3 : پیش نیازهای یادگیری next js + مسیر یاد گیری mern stack شدن
جلسه 4 : نصب پروژه Next.js 15
جلسه 5 : نصب پروژه نکست جی اس بخش 2 - اکستنشن های vscode
جلسه 6 : معرفی فایل های پروژه نکست جی اس - بخش 1
جلسه 7 : معرفی فایل های پروژه نکست جی اس- بخش 2
جلسه 8 : اجرا و انتقال پروژه next.js 15
جلسه 9 : استراکچر کدهای پروژه نکست جی اسی - لایه بندی کدها
جلسه 10 : استراکچر پروژه بخش 2 - layout.jsx و ایجاد صفحه در پروژه
جلسه 11 : انواع روت ها - static route ها در پروژه Next.js
جلسه 12 : انواع روت ها - static route ها و dynamic route ها
جلسه 13 : آموزش انواع روت ها در Next.js - معرفی params و catch all routes
جلسه 14 : مفهوم route group - تعریف layout های مختلف برای صفحات مختلف
جلسه 15 : استایل دهی در پروژه نکست جی اسی - CSS in JS - Bootstrap - Scss - CSS
جلسه 16 : آموزش tailwind.css در next js - بخش 1 - tailwind چیست
جلسه 17 : آموزش تیلویند - بخش 2 - flex
جلسه 18 : آموزش tailwind css - بخش 3 - استایل دلخواه - ریسپانسیو برای موبایل
جلسه 19 : طراحی هدر سایت مرن فا با tailwind.css
جلسه 20 : فایل public در پروژه های Next js - بخش 1 - افزودن فونت به پروژه
جلسه 21 : آموزش پوشه public در پروژه های Next js 15 - معرفی تگ Image در نکست جی اس بخش 1
جلسه 22 : بررسی props های تگ Image و internal and external Image
جلسه 23 : آموزش تگ Link در Next js 15
جلسه 24 : بررسی کاربردهای تگ فرگمنت در کامپوننت ها
جلسه 25 : چگونه بک اند را شروع کنیم - آموزش بک اند Next js 15 - پوشه API
جلسه 26 : بررسی بک اند نکست جی اس - بخش 2
جلسه 27 : طراحی هدر و فوتر مینی پروژه
جلسه 28 : آموزش سرور کامپوننت ها و کلاینت کامپوننت ها در Next.js 15
جلسه 29 : آموزش server component ها و client component ها - بخش 2
جلسه 30 : آموزش SSR و SSG و ISR و CSR در نکست جی اس 15
جلسه 31 : تفاوت بین دیتای لود شده به صورت server side و client side بخش 1
جلسه 32 : تفاوت بین دیتای لود شده به صورت server side و client side بخش 2
جلسه 33 : تفاوت بین SSR و SSG و ISR
جلسه 34 : طراحی صفحه اصلی - بخش 1
جلسه 35 : طراحی صفحه اصلی - بخش 2
جلسه 36 : طراحی صفحه تک فیلم بخش 1
جلسه 37 : طراحی صفحه تک فیلم بخش 2 - لود دیتا به صورت سئوفرندلی
جلسه 38 : طراحی صفحه تک فیلم بخش 3 - نمایش دیتا
جلسه 39 : طراحی صفحه تک فیلم بخش 4 - طراحی سایدبار کلاینت ساید
جلسه 40 : طراحی صفحه تک فیلم بخش 5 - تفاوت ورژن های مختلف نکست جی اس
جلسه 41 : افزودن آیکن به پروژه Next.js - فایل Loading.jsx
جلسه 42 : صفحه یافت نشد
جلسه 43 : سئو مقدماتی - بخش 1
جلسه 44 : سئو مقدماتی بخش 2 - ادامه راه
ترتیب شرکت در دوره ها
دوره های طراحی سایت کامل
دوره های تئوری
آموزش NEXT JS پیشرفته با مرن فا
بیش از 12 ساعتآموزش تخصصی SEO در Next js
نزدیک 3 ساعتآموزش typescript و Framer motion در Next js
بیش از 3 ساعتNext.js چیست و چه کاربردی دارد؟
قبل از شروع مطالعه متن، نیازه که اینو خدمتتون بگم. میتونید مطالب رو به صورت ویدئویی در دوره آموزش next js مرن فا که لیست جلساتش در ابتدای همین صفحه بود به صورت رایگان ملاحظه بفرمایید.
به عنوان پاسخ سوال Next.js چیست میتوان گفت نکست جی اس یک چارچوب از کتاب خانه react js است که چندین ویژگی اضافی، از جمله اسکریپتنویسی سمت سرور و صفحات وب ایستا را فراهم میکند. ریاکت یک کتابخانه جاوا اسکریپت است که به طور سنتی برای ساخت برنامه های کاربردی وب استفاده می شود که در مرورگر کلاینت با جاوا اسکریپت ارائه می شوند.
به صورت خلاصه تر میتوان گفت که فریمورک Next.js که ما به آموزش آن میپردازیم، فریمورکی هست که بر مبنای کتابخانه ریکت جی اس نوشته شده است تا نقاط ضعف آن را بپوشاند. مثلا سئو، مثلا سرعت، مثلا رندر سمت سرور و...
آیا امروز Next js بهترین تکنولوژی برای طراحی سایت هست؟
یکی از راه هایی که میتونیم بفهمیم چه فریمورکی از بقیه بهتره؛ اینه که ببینیم برترین وب سایتها، دارن از چه تکنولوزی هایی استفاده میکنن.
دیجی کالا
فرادرس
ترب
ژاکت
فیلم نت
پونیشا
ویرگول
وب سایت هایی که بالاتر دیدید، همه از Next js استفاده می کنند. علت این موضوع هم بسیار واضح هست. سرعت بسیار بالا، سئوی عالی در نکست جی اس، کاربرپسندی بیشتر وب سایتهای next.js ای و...
اگه شک دارید، برید توی جلسه دوم دوره آموزش next js رایگان با مرن فا، به صورت تصویری این موضوع رو توضیح دادم.
کیفیت بالای نکست جی اس باعث شده که توی چند سال اخیر، عموم کسب و کارها به این فریمورک روی بیارن و به همین دلیل پیشنهاد میکنم دوره های آموزش next js مرن فا رو از دست ندید. مرن فا اولین مرجع تخصصی Next js ایران هست و ما به صورت کاملا تخصصی روی این فریمورک تمرکز کردیم...
پیش نیاز های یادگیری next js
برای آموزش next js شما باید html و css و javascript رو یاد بگیرید. روی جاوااسکریپت یه مقدار زمان بزارید تا خوب یاد بگیریدش. پروژه های کوچیک جاوااسکریپتی هم بزنید. مثلا بازی دوز، ماشین حساب، فیلتر محصولات و یه اسلایدر ساده. اینا تموم شد، یه قالب ساده برای صفحه اصلی یه سایت رو بزنید. مثلا صفحه اصلی یه سایت وبلاگی ساده
بعد از این، نوبت میرسه به ریکت. لطفا React js رو یاد بگیرید ولی فقط و فقط با فانکشنال کامپوننت. نیازی نیست که روی کلاس کامپوننت ها زمانی بزارید. اگر دیدید که در یک آموزشی، مدرس داره با کلاس کامپوننت ها تدریس میکنه، بدونید که آموزشش قدیمیه و برید سراغ یه دوره دیگه.
برای آموزش react js نیازی به هزینه کردن نیست. پیشنهاد میکنم برید سراغ یوتوب. یوتوب فارسی، دنیایی از آموزش در زمینه های مختلف رو داره که میتونید خیلی ساده ازشون استفاده کنید.
چه بخش هایی از react js رو یاد بگیریم؟
توی ریکت جی اس، چند تا چیز هست که مهمه بلد باشید. اینا رو یاد گرفتید، میتونید آموزش نکست جی اس رو با مرن فا شروع کنید...
- 1.مفهوم Single Page Application ها ( SPA )
- 2. مفهوم کامپوننت محور بودن یک وب سایت
- 3. فانکشنال کامپوننت ها
- 4. تعریف تابع در یک کامپوننت
- 5. سه هوک مهم ریکت یعنی useState - useEffectt و useRef
فریمورک Next.js بهتر است یا کتابخانه React؟
ببینید خلاصه مفید بگم next js ورژن سئوفرندلی ریکت جی اس هست. یعنی توی نکست جی اس، ما برای لود اطلاعات از SSR و SSG استفاده میکنیم که این موضوع در React js نیست. همین مزیت باعث میشه که همه به فکر انتقال وب سایتشون به نکست جی اس افتادن...
بک اند رو چطور یاد بگیریم؟
ببینید وقتی شما React js رو یاد گرفتید، همونطور که بالاتر گفته شد خیلی ساده میتونید آموزش Next js رو با مرن فا شروع کنید. مرحله اول دیدن دوره آموزش نکست جی اس مقدماتی هست که در ابتدای همین صفحه بود.
پس از این موضوع، میتونید دوره فروشگاه فایل رو ثبت نام کنید. این دوره با فرانت اند Next js و Tailwind css و بک اند Node js و Mongo DB طراحی شده. توی 20 جلسه اول این دوره، شما میتونید فرانت رو با نکست جی اس و تیلویند بیشتر تمرین کنید تا تمامی مطالب ملکه ذهنتون بشه. پس از اون، نیاز پیدا میکنید به بک اند. پیشنهاد من برای بک اند این هست که لطفا دوره اکسپرس خلاصه مرن فا رو ببینید. توی 2 ساعت، مطالبی که برای برنامه نویسی بک اند نیاز دارید رو خدمتتون توضیح دادم.
یعنی اگه بخوام به صورت خلاصه مفید خدمتتون بگم، لطفا فصل اول دوره فروشگاه فایل که شامل 20 جلسه هست رو لطفا ببینید تا مطالب نکست جی اسی رو بیشتر تمرین کنید. سپس دوره اکسپرس خلاصه رو شرکت بکنید تا بک اند رو توی 2 ساعت یاد بگیرید. حالا برگردید و ادامه دوره فروشگاه فایل رو ببینید. در ادامه دوره فروشگاه فایل، میتونید نزدیک به 30 ساعت کدنویسی بک اند یاد بگیرید و نود جی اس تمرین کنید....
Node.js چیست؟ آیا در Next js کاربردی دارد؟
ببینید برای زدن بک اند یک وب سایت، میتونید از زبان های مختلفی استفاده کنید، php، python و کلی چیز دیگه. از jacascript هم میشه استفاده کرد. برای زدن بک اند با جاوااسکریپت، از node js استفاده میکنیم. در واقع نود جی اس یه زبان یا فریمورک مجزا نیست. بلکه یه پلتفرم هست که ما، به کمکش میتونیم زبان جاوااسکریپت رو در بک اند یا سرور اجرا کنیم.
شما پس از آموزش Next js، بعد از مدت کوتاهی نیاز پیدا میکنید که بک اند رو هم یاد بگیرید. نکست جی اس براتون یه سورپرایز داره. پوشه API.
در واقع ما در فرمیورک Next.js، یه پوشه داریم به اسم پوشه api که میتونیم بک اندمون رو همراه با فرانت اند در یک پروژه بنویسیم. جذابیت ماجرا اینجاست که برای استفاده از این پوشه، شما نیازی به یادگیری زبان جدیدی ندارید. خیلی ساده میتونیم برای اینکار از همین زبان javascript استفاده کنیم.
نکته مهم در مورد آموزش بک اند در next.js، این هست که پوشه api نکست جی اس، بر مبنای نود جی اس یا بهتره بگم فرمیورک اکسپرس نوشته شده. یعنی شما برای اینکه بتونید بک اند رو خوب یاد بگیرید، پیشنهاد میکنم ابتدا بک اند اکسپرس رو یاد بگیرید، سپس بک اند نکست جی اس رو شروع کنید. آموزش هاش هم توی همین مرن فا هست. یه دوره اکسپرس خلاصه داریم که توی صفحه همه دوره ها میتونید پیداش کنید. توی تقریبا از 2 ساعت، مواردی که توی پروژه ها کاربردی هستن و بهشون نیاز دارید رو خدمتتون توضیح دادم. علاوه بر این، بک اند پروژه فروشگاه فایل مرن فا هم به کمک همین اکسپرس نوشته شده که میتونید به کمک اون، اکسپرس رو خیلی تمرین کنید.
آموزش بک اند در Next js هم توی دوره نکست پیشرفته هست. توی دوره وبلاگ پیشرفته هم، ازش توی پروژه استفاده کردیم.
Next js چیست و مزیت های آن
نکست جی اس، فریمورکی هست که بر مبنای react.js نوشته شده و بک اند node js رو هم داره. سئو خیلی خوبی داره و علاوه بر اینا، سریعتر هم هست از ریکت. خلاصه مفید
راحت بودن آموزش و به کارگیری Next js نسبت به React js
اگه با ریکت جی اس کار کرده باشید، میدونید که یه سری سختی داره مثلا برای ساختن یه صفحه یا حتی برای ساختن یه navbar ساده، باید کلی عرق بریزید، اما nextjs اینا رو خیلی ساده تر کرده. مثلا نکست یه پوشه pages ( توی next js 13 معادل این پوشه میشه پوشه app) داره، هر فایل js یا jsx ی که توش میسازیم، میشه یه صفحه از وب سایت، به همین سادگی. به خاطر همین میگیم یکی از ویژگی های نکست جی اس، File base بودن هست. میتونید از دوره آموزش Next js رایگان با مرن فا و همچنین دوره های پروژه محور آموزش Next js با مرن فا هم برای آموزش نکست جی اس استفاده کنید.
آموزش سئو در react js و Next js
ببینید، react js خیلی کاربر پسنده، اما سئو اصلا نداره. همون طور که vue و angular که فریمورک های معروف دیگهی جاوااسکریپت هستن، سئو ندارن. به همین خاطر یه سری فریمورک دارای سئو واسه اینا زده شده. معادل ریکت، next js رو داریم، واسه ویو، nuxt js و معادل انگیولار، فریمورک angular universal رو داریم.
بررسی seo در Next js در جلسه دوم دوره آموزش Next js مقدماتی مرن فا که ابتدای همین صفحه قرار داشت توضیح داده شده. همچنین نکات تکمیلی این موضوع، در دوره سئو در نکست جی اس مرن فا هست که میتونید شرکت کنید.... اگه بخوام به صورت خلاصه بگم میشه پاسخ به این سوال
SSR چیست؟
ssr یا server side rendering به این معنی هست که زمانی که کاربری، آدرس صفحه ما رو در مرورگر میزنه، ریکوئست فرستاده میشه به بک اند، صفحه اونجا ساخته میشه و سپس صفحه ای که دارای کل اطلاعات هست به فرانت فرستاده میشه. به همین دلیل کراولر های گوگل که رتبه SEO به صفحاتتون میدن، با صفحه ی دارای کل اطلاعات مواجه میشن. در نتیجه رتبه سئو میگیرید. این در حالی هست که CSR این امتیاز رو نداره. در واقع تفاوت Csr و Ssr هم در همین هست. زمان گذاشته شدن دیتا در کد صفحه
آموزش مدیریت استیت ها( state managment ) در Next js
یکی از موارد بسیار مهم در Next js، مدیریت استیت ها هست. در واقع ما در نکست جی اس برای تعریف یک متغیر ساده از useState و یا const استفاده میکنیم. اما مشکل اینجاست که این متغیر یا استیت، فقط در همین کامپوننت قابل استفاده است. اگه مثلا ما بخواهیم از متغیر در یک کامپوننت دیگه در یک صفحه ی دیگه استفاده کنیم، این امکان وجود نداره.
راهکار این موضوع، استفاده از state managerهایی مثل Zustand و Redux و Context هست. برای استفاده از این دو، باید ابتدا یک مخزن متغیر تعریف کنیم، سپس برای دریافت مقدار آنها و یا تغییر مقدار آنها، تابع تعریف کنیم و در نهایت این توابع را در بخش های مختلف اپلیکیشن فراخوانی کنیم. آموزش کامل این مفاهیم نکست جی اسی در دوره نکست پیشرفته مرن فا موجود هست که میتونید ببینید.
پروژه دیفالت Next js 12پروژه دیفالت Next js 15
دیدگاه ها (150)
استاد. آموزش next js شما واقعا عالیه.
یه دوره فروشگاه فول استک با نکست جی اس نمیشه بزنین؟
من که خیلی نیاز دارم.
سلام. تشکر از شما. خوشحالم که دوره های مرن فا براتون مفید بوده.
توی برنامه هام هست. انشالله به زودی....
متاسفانه سرعت بخش ویدئو خیلی پایین هست و هی قطع میشه. واقعا حیف هست که نمیشه از این محتوا استفاده کرد.
سلام. امیدوارم حالتون عالی باشه.
دو تا عزیزان دیگه هم با ویدئو پلیر مشکل داشتن.
مشکلی نیست. سعی میکنم امروز یا فردا عوضش کنم.
منظورم ساخت اسلاگ برای صفحه جزییات محصول است.
مثلا این url رو در پروژه های نمونه شما دیدم :
https://rebox.ir/buy/single-book/15A...%86
البته به این صورته :
158-کتاب-چهار-اثر-از-فلورانس-اسکاول-شین/rebox.ir/buy/single-book/
متشکر
توی اون پروژه ازم درخواست کردن که توی سایت nextjsیشون، سئو تکنیکال صفحه تک محصول رو ببرم بالا. از نظر حقیر، صفحه بسیار سنگین بود. تعداد تگهای بسیار زیادی داشت و همچنین پکیج هایی داشت توی صفحه محصولش فراخوانی میشد که نیازی بهشون نبود. به همین دلیل شاخص های سئویی مربوط به PageSpeed Insights صفحه محصول این سایت پایین بود.
من از نظر سئوی تکنیکال سعی کردم که این موضوعات رو برطرف کنم تا به صورت میانگین سئوی کل صفحات محصولشون بره بالا.
بحث مدیریت اسلاگ برعهده من نبود. ( البته باید به این موضوع خم توجه داشت که وقتی سایت، مارکت پلیس میشه، نمیشه همه پارامترهای ریز رو هم مدیریت کرد )
شما باید دقت داشته باشید که سئو، شاید شامل 20 تا پارامتر مختلف هست. هر کدوم یه درصدی تاثیر دارن که در مجموع باعث میشن کیفیت صفحه بره بالا. یکیش همین بحث اسلاگ انگلیسی هست.
اگه شما اسم این کتاب رو جستجو بکنین، سایت ریباکس به عنوان رتبه یک بالا نمیاد. در نتیجه سئوی کامل و عالی نداره.
همونطور که الان، مرن فا رتبه یک سئو نیست. چون وقت نمیکنم که بحث لینک سازی و شبکه سازی سئوییش رو پیش ببرم،
کلا سئو بسیار بحث بزرگی هست. یه بخشیش رو من توی دوره سئو خدمتتون توضیح دادم اما خوب قطعا موارد تکنیکال و غیرتکنیکال زیادی وجود داره.
اسلاگ رو میخوام تو url برای سئو استفاده کنم.
خیلی از سایتهای بزرگ هم همین کار رو کردن.
چه مشکلی داره؟ میشه بیشتر توضیح بدین؟
اگه استفاده کنیم انگلیسی باشه یا فینگلیش؟
متشکرم
نکته یک :
ببینین وقتی اگه دو تا صفحه یکسان داشته باشیم و آدرس یکی فارسی و آدرس اون یکی انگلیسی باشه، کدوم صفحه رتبه بالاتری میگیره؟ قطعا اونی که آدرس انگلیسی داره. چرا؟ چون گوگل راحت تر میتونه هدف صفحه رو بفهمه.
دقیقا به همین دلیل هست که برای صفحاتی که سئوشون مهمه، نباید توی بخش slug، آیدی و عدد و اینطور چیزا بزاریم. باید یه متن انگلیسی معنی دار بزاریم.
نکته دو :
در مورد سایت های بزرگ که میگین، اگه استفاده میکنن دلیلش اینه اون صفحات رو هدف سئو قرار نمیدن. صفحه دسته بندی رو معمولا سئو میکنن که همه محصولات اون دسته با هم بیاد بالا...
آدرس صفحات دسته بندی هم کاملا انگلیسیه....
سلام سهیل جان
ممنون از دوره های خوبتون
تو یکی از دوره هاتون از اسلاگ استفاده کردین نمیدونم کدومه.
برای اسلاگ فارسی توی نکست جی اس از کدوم پکیج استفاده می کنین؟
مرسی ...
سلام
امیدوارم حالتون عالی باشه. تشکر از شما.
پکیج خاصی نیاز نیست.
در واقع توی سایت، شما باید اسلاگ انگلیسی هميشه استفاده کنین. اسلاگ فارسی به سئو آسیب میزنه.
نکته بعدی هم اینکه اگه بخواید برای استاتیک روت در پروژه next js، از عبارات فارسی استفاده کنین، فکر میکنم نمیشه. یعنی نمیشه از اسم پوشه فارسی استفاده کرد.
برای داینامیک روت ها هم که مشکلی پیش نمیاد. توی url که عبارت فارسی بزنین، خود به خود صفحه رو میاره مثلا example.com/products/p1
ممنونم بابت دوره های خوب و روش تدریس عالیتون…
در نکست جی اس میشه به توسعه API پرداخت ؟
و ایا توی این دوره توسعه API با نکست هم تدریس میشه یا خیر؟ چون شنیدم که این فریمورک فول استک هست.
سلام. امیدوارم حالتون عالی باشه.
بله. توی پوشه app نکست جی اس، یه پوشه تعریف میشه به اسم api . توسعه API ها اونجا انجام میشه.
اتصال به دیتابیس هم توی پوشه lib انجام میشه.
یه فایل middleware.ts هم داریم که کار میدلور ها رو انجام میده.
توی این دوره به صورت مختصر توضیحی داده شده.
توی دوره نکست پیشرفته، آموزش کاملش خدمتتون ارائه شده.
https://mernfa.ir/courses/next-pro-advanced
سلام وقت شما بخیر
طبق معمول تشکر از دوره های عالی شما.
ممکن هست آموزش انیمیشن اسکرول افقی با اسکرول صفحه با فریمز موشن در next js رو هم بگذارید؟
یعنی صفحه به صورت عمودی و نرمال اسکرول بشه اما با رسیدن به یک سکشن و اسکرول موس اسلاید ها افقی اسکرول بخورن.
با تشکر
سلام. تشکر از شما. امیدوارم حالتون عالی باشه.
هستش که...
جلسه 4 دوره تایپ اسکریت در نکست جی اس: فریمر موشن در نکست جی اس - بخش 2
سلام. استاد من روی احراز هویت مشکل دارم. دیدم که سایت هایی مثل دیجی کالا، دارن با شماره تلفن احراز هویتشون رو انجام میدن. بعد لاگینشون چند جوره. یکیش اینه که کاربر ثبت نام میکنه. یکیش اینه که با ایمیل لاگین میکنه. یکیش اینه که رمز یکبار مصرف داره. یکیش اینه که با شماره تلفن لاگین میکنه. اینا رو چجوری باید پیاده کرد؟
سلام. امیدوارم حالتون عالی باشه.
مرحله اول این هست که شما باید اول فرایند یه احراز هویت معمولی رو بلد باشید. بعدش امکانات دیگه رو هم بهش اضافه کنید.
یعنی باید فرایند ثبت نام کاربر، لاگین کردنش، ست کردن کوکی، ذخیره اطلاعاتش در دیتابیس، ارسال ایمیل و پیامک و ریدایرکت های احراز هویتی رو بلد باشید. این موضوعات توی دوره های فروشگاه فایل، وبلاگ پیشرفته و احراز هویت خدمتتون آموزش داده شده.
مرحله بعدی هم اضافه کردن موارد مربوط به فرایند احراز هویتی دیجی کالاست.
اول شما باید شماره تماس یا ایمیل کاربر رو بگیرین. بررسی کنین که اطلاعاتش رو در دیتابیس دارین یا نه. بر این اساس کاربر رو بفرستید به کامپوننت وارد کردن رمز عبور یا وارد کردن پین کد.
بحث رمز یک بار مصرف هم که سادهست. توی دوره آموزش احراز هویت در Next.js خدمتتون آموزشش دادم. شما باید یه کدی رو مثلا برای دو دقیقه توی دیتابیستون ذخیره کنین و همزمان پیامکش هم بکنین برای کاربر.
بعد از اینکه کاربر کد رو وارد سایت کرد و درست بود، یه توکن به صورت کوکی روی مرورگرش ذخیره میکنین. فقط باید به صورتی توکن ذخیره بشه که مثلا یا تایمش 1 ساعت باشه که یک بار مصرف باشه یا اینکه که به گونه ای کوکی ذخیره بشه که با بستن مرورگر، کوکی حذف بشه.
توی دوره آموزش next js پیشرفته هم بحث کوکی ها در نکست جی اس رو به صورت مفصل داشتیم.
سلام استاد خسته نباشید من فرانت کارم ولی بین React و Vue و Angular موندم ک کدوم رو یاد بگیرم پیشنهاد شما چیه؟
سلام. پیشنهاد من ریکت هست.
ببینین بین این سه تا، انگیولار که کم استفاده ترین هست. سئوش هم نسبت به دو تای دیگه ضعیفتره. البته سئوی تکنیکالش رو منظورم هست.
بین ویو و ریکت، vue.js ساده تر هست و react.js پیچیدگی های بیشتری داره. پیشنهاد من ریکت جی اس هست.
بعد از ریکت جی اس هم میتونین بیاید سراغ نکست جی اس.
مثلا از نظر بازار کار بخوایم مقایسه بکنیم، react.js و next.js بزرگتر از vue.js و nuxt.js و angular و universal هست.
از نظر جامعه مخاطبین هم بخوایم در نظر بگیریم باز به همین صورت هست.
ولی خوب ریکت و نکست جی اس، از موارد دیگه سخت تر هم هستن.
در واقع پیشنیاز آموزش next js، یادگیری ریکت جی اس هست.
نکست جی اس بهترین سئو و سرعت رو در اختیارتون میزاره. در نتیجه پیشنهاد من یادگیری ریکت و سپس نکست جی اس هست.
پیشنهاد میکنم جلسه سوم دوره نکست جی اس مقدماتی رایگان که ابتدای همین صفحه هست رو ببینین. قطعا بهتون کمک میکنه.
استاد یه مقدار در مورد احراز هویت میشه توضیح بدین؟ کلا چجوری میشه که توی سایت میتونیم بفهمیم که کسی که رفته به صفحه اکانت، کیه و اطلاعات مختص اون رو نمایش میدیم؟
سلام امیدوارم حالتون عالی باشه.
مکانیزمش اینجوریه که ما توی صفحه ثبت نام، از کاربر یه سری اطلاعات میگیریم. این اطلاعات رو میفرستیم به بک اند.
توی بک اند ( که مثلا میتونه پوشه API نکست جی اس باشه)، این اطلاعات رو ذخیره میکنیم توی دیتابیس. علاوه بر اون، با پکیج JWT، یه کد مثلا 80 کارکتری هم ایجاد میکنیم. توی این کد، یه سری اطلاعات به صورت رمزگذاری شده هست. مثلا آیدی کاربر
بعد این کد رو میفرستیم به فرانت و توی مرورگر کاربر به صورت کوکی ذخیره میکنیم.
حالا وقتی کاربر میره به صفحه اکانت و ریکوئست میزنه برای دریافت اطلاعات، ما با توجه اون کوکی، آیدیش رو پیدا میکنیم و اطلاعات خودش رو برمیگردونیم.
پیشنهاد میکنم فروشگاه فایل رو شرکت کنین. اونجا یکی از مواردی که کامل توضیح داده شده همینه.