آموزش 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
دیدگاه ها (189)
استاد به جرأت دوره وبلاگ پیشرفته شما، یکی از بهترین دوره های next.js بود که دیدم. همهچی شفاف، بدون حاشیه و کاملاً کاربردی 👌 بک اند نکست جی اس واقعا باحاله. تشکر
خوشحالیم که دوره براتون رضایتبخش بوده. از بازخورد ارزشمندتون سپاسگزاریم و امیدواریم در مسیر یادگیری فولاستک همراه ما باشید.
این روزا نکست جی اس داره میترکونه و بهترین ابزار طراحی فرانت اند هست.
بک اندش هم خیلی خوبه البته برای افرادی که حوصله کدنویسی دارن و نمیخوان با 4 تا پکیج، بک اند رو بزنن.
موفق باشید...
سلام
من چند تا دوره برنامهنویسی دیدم ولی آخرش حس میکنم فقط کلی ویدیو دیدم و هنوز نمیتونم یه پروژه رو از صفر خودم بالا بیارم.
دوره های شما واقعاً منو به مرحلهی اجرای مستقل پروژه میرسونه؟
سلام وقتتون بخیر. امیدوارم حالتون عالی باشه.
ببینین نکست جی اس فریمورک بزرگیه و آینده قطعا با جاوااسکریپت و Next.js هست. به نظرم، هرچقدر کاملتر یاد بگیریدش و بیشتر تمرینش کنین بهتره.
ترجیح میدم واقع بینانه خدمتتون بگم. نکست جی اس چیزی نیست که شما بخواید با دیدن یه آموزش یاد بگیریدش. دقیقا به همین دلیل هم هست که در مرن فا، مباحث مختلف در دوره ها ی مختلف پوشش داده شده.
مثلا شما نیاز هست که توی دوره نکست مقدماتی یعنی همین دوره، مباحث مقدماتی Next.js و تیلویند رو یاد بگیرید.
سپس توی دوره فروشگاه فایل، کدنویسی فرانت نکست جی اس و تیلویند در کنار بک اند اکسپرس و مونگو دی بی رو در کنار هم با دیتیل زیاد یاد بگیرید.
سپس به کمک دوره نکست پیشرفته، مباحث پیشرفته next js رو یاد بگیرید.
سپس دوره وبلاگ پیشرفته رو میتونین ببینین و بحث لایه های کاربری رو به صورت فول استک با نکست جی اس آموزش ببینید.
سپس میتونین دوره سئو در نکست جی اس رو ببینین که اگه پروژه ای گرفتین، سئوی تکنیکالش رو هم فیکس کنین.
فریمورک next js بسیار بزرگه. هر سال هم داره آپدیت جدید میده و توی آپدیت یه سری آیتم جدید معرفی میکنه. پیشنهاد میکنم همین امروز شروع کنین. الان یه تخفیف 40 درصدی خوب فعاله که میتونین استفاده کنین.
ضمنا اینم بگم. شما عملا با دیدن دوره فروشگاه فایل و نکست پیشرفته، میتونین پروژه های فریلنسری بگیرین و بزنین. مراحل بعدیش برای محکم کاری و گرفتن پروژه های پیشرفته تر مثل مارکت پلیس و... هست....
سلام
من دوره نکست جیاس شما رو دیدم، خیلی خوب بود 👌
فقط یه سوال دارم: توی پروژههای فولاستک مثل فروشگاه فایل چرا از Express + MongoDB استفاده کردید؟
نمیشه مستقیم فقط با API Routeهای خود Next.js بکاند رو پیادهسازی کرد؟
سلام. تشکر از شما.
دلیل این موضوع این هست که ببینین فکر میکنم بک اند نکست جی اس، بسیار زیاد برگرفته از بک اند اکسپرس هست.
در واقع اگه بخوام کاملتر خدمتتون توضیح بدم:
1. ببینین یه محیطی به نام Node.js هست برای اینکه بتونیم باهاش، بک اند رو زبان جاوااسکریپت کد بزنیم.
نود جی اس یه مقدار سخت بود و به همین دلیل فریمورک های بک اندی زیادی روی نود جی اس نوشته شد. مثلا Express - Nest و...
خیلی از این فریمورک ها هم کلا head less هستن. یعنی اینکه کلا یه UI در اختیارتون میزارن و شما به عنوان برنامه نویس بک اند، اصلا یه خط کد هم نیاز نیست بزنین. بلکه باید پنلش کار کنین.
2. نکست جی اس زمانی که معرفی شد، گفت که من یه فریمورک فول استک هستم. برای فرانت از ریکت الگو گرفتم و برپایه کتابخونه react.js هستم. برای بک اند هم از Node.js الگو گرفتم.
اگه شما کدنویسی Express.js و Next.js در بک اند رو با هم مقایسه کنین، بسیار شبیه به هم هستن. اما اکسپرس ساده تره.
به همین دلیل الویت با یادگیری اکسپرس هست. یعنی اینکه شما باید لطف کنید و ابتدا به کمک دوره های اکسپرس خلاصه با بک اند آشنا بشید. سپس به کمک دوره فروشگاه فایل، موارد پیچیده تر رو توی یه پروژه واقعی یاد بگیرید.
در نهایت نیاز هست که لطف کنین به کمک دوره نکست پیشرفته، کدنویسی بک اند نکست جی اس رو آموزش ببینین و در نهایت به کمک دوره وبلاگ پیشرفته، کدنویسی بک اند یه سایت چند لایه رو به کمک Next js آموزش ببینین.
سلام، من تازه دورههای Next.js و Node.js شما رو دیدم، خیلی خوب بودن.
فقط یه سوال: آیا توی آموزش Node.js، بخش Express.js رو هم کامل پوشش دادید؟ یعنی از صفر تا ساخت API واقعی آموزش دادید یا نیاز هست جای دیگه هم آموزش ببینیم؟
سلام
خیلی خوشحالم که دورهها برات مفید بوده
بله، توی بخش Node.js ما Express.js رو بهصورت کامل و پروژهمحور آموزش دادیم. از مباحث پایه مثل ایجاد سرور، روتینگ، میدلورها و کار با دیتابیس گرفته تا مباحث حرفهای مثل احراز هویت، ساخت API استاندارد، ساختاردهی فولدرها و حتی بهینهسازی. در واقع این موضوعات مربوط میشه به دوره اکسپرس خلاصه
https://mernfa.ir/courses/nodejs-express-course
توی دوره فروشگاه فایل هم یه پروژه واقعی API پیادهسازی شده تا دقیقاً بدونید توی دنیای واقعی چطور از Express استفاده میشه. یعنی این دوره : https://mernfa.ir/courses/file-shop-course-with-next-and-nodejs
سلام وقت بخیر. من آموزشهای Next.js شما رو دنبال میکنم. یه سوال داشتم: تو بخش Server Actions گفتید که بهتره برای درخواستهای حساس از این روش استفاده کنیم.
ولی الان من بین استفاده از API Route و Server Action گیج شدم.
برای یه فرم ساده لاگین کدومش بهتره؟ چون وقتی با Server Action تست گرفتم، ظاهراً کوکیها درست ست نمیشن.
سلام. تشکر از شما.
ببینین توی همون ویدئویی که در مورد آموزش server actions در next.js خدمتتون توضیح دادم، گفتم که شما فعلا لطف کنین و از پوشه api نکست جی اس برای نوشتن بک اند استفاده کنین.
سروراکشن ها هنوز جامع نیست.
چندین مشکل داره که یکیش همین بحث کوکی ها هست. یکی دیگهش عدم توانایی کنترل کامل امنیت سایت هست و...
آموزش Next.js شما فوقالعاده بود. توضیحات دقیق و قدرت بیانتون عالی بود. واقعاً بعد از دیدن این دوره تونستم پروژهمو بدون سردرگمی شروع کنم. ممنون بابت محتوای باکیفیتتون.
سلام. تشکر از شما.
خوشحالم که دوره های مرن فا تونسته بهتون کمک کنه. 🌹🌻
سلام، من تازه دارم با Node.js و MongoDB کار میکنم و یه سؤال دارم. وقتی توی Next.js از API Route ها برای وصل شدن به دیتابیس استفاده میکنیم، بهترین روش برای مدیریت اتصال به MongoDB چیه؟ هر بار درخواست میزنیم دوباره کانکشن بسازیم درسته یا باید یه کانکشن ثابت نگهداریم؟
ممنون میشم راهنمایی کنید.
سلام، عالیه که شروع کردید به کارکردن با نکست جی اس و Node و MongoDB.
در Next.js بهترین روش اینه که اتصال به دیتابیس رو فقط یک بار ایجاد کنید و در بقیه درخواستها از همون کانکشن استفاده بشه.
راه حل استاندارد:
یک فایل مثل lib/mongodb.js بساز
کانکشن رو داخل یک متغیر global ذخیره کن
اگر کانکشن وجود داشت، دوباره کانکت نشید
اگر نبود، فقط یک بار کانکت شید
بحث کدنویسیش هم توی دوره های نکست پیشرفته و وبلاگ پیشرفته هست...
سلام، آموزشهاتون خیلی مفید بود ممنون
توی پروژه ای که توی دوره بالا زدید یعنی آموزش next js مقدماتی، شما ارور hydration نمیگیرین ولی من میگیرم.
چرا؟
سلام. وقتتون بخیر. امیدوارم دوره های نکست جی اسی مرن فا براتون مفید باشن.
ببینین احتمالا یه جایی از کدتون با کد من متفاوته.
ارور Hydration error (یا “Hydration mismatch”) یکی از رایجترین خطاهای React و Next.js هست، مخصوصاً در پروژههای SSR (Server-Side Rendering).
در واقع زمانی ایجاد میشه که یا یه سری آیتم ها رو اشتباهی نوشته باشید یا اینکه محتوای رندرشده در سرور و کلاینت، اختلاف زیادی داشته باشن. که البته معمولا دلیل اول هست.
مثلا یکی از آیتمهایی که باعث ایجاد این موضوع میشه اینه که تگ Link رو داخل یه تگ Link دیگه به کار ببرید.
یا مثلا اینکه پیش از mount شدن کامپوننت، تغییراتی اعمال کنین که دام رو تغییر اساسی بده.
در واقع پیشنهاد میکنم بخش بخش، کد رو کامنت کنین و صفحه رو رفرش کنید تا بفهمید که هایدریشن ارور دقیقا از کجاست...
سلام استاد خداقوت
برای بخش tailwind بنده در قسمت className استایل دهی انجام می دهم اما استایل ها اجرا نمی شوند .
میشه لطفا راهنمایی کنید .
سلام. وقتتون بخیر.
توی کامنت قبلی هم تقریبا همین موضوع رو فرموده بودید. پاسخ دادم. کمکی نکرد؟
در واقع کار خاصی نیاز نیست انجام بدیم برای استایل دهی.
ما پروژه نکست رو همراه با تیلویند نصب میکنیم.
یه فایل گلوبال پیشفرض داره. توی همون میتونیم استایل دلخواه CSS بدیم.
لاین اولش هم ایمپورت تیلویند هست.
حالا اگه بریم توی فایل page.jsx و استایل تیلویند بدیم، اعمال میشه.
توی چند تا کامنت پایینتر، اینم گفتم که یا لطفا پروژهتون رو روی گیت هاب آپلود کنید و برام بفرستید تا ببینم و یا اینکه از پروژه دیفالتی که براتون لینکش رو ارسال کردم، الگو برداری کنید....
سلام استاد
برای بخش tailwind بنده وقتی در قسمت className میخواستم از bg استفاده کنم به من ادامه کد و رنگ ها را پیشنهاد نمی داد .
به نظرتون مشکلش چیه ؟
سلام. خداقوت.
نکته اول اینکه مثلا بنویسید bg و بعدش کنترل اسپیس بزنین ببینین پیشنهاد میده یا نه.
نکته دوم اینکه باید توی فایل گلوبال سی اس اس، اینو اضافه کنید
@import "tailwindcss";