اگر امروز میخواستم برنامهنویسی رو از صفر شروع کنم..
برخلاف چیزی که اکثر افراد فکر میکنن، اولین قدم یاد گرفتن JavaScript یا Python نبود.
اول یاد میگرفتم چطور یاد بگیرم ( وقتی یادش بگیری معجزه میکنه )
چون بزرگترین اشتباه تازهکارها اینه که میان با خودشون میگن خب امروز برم React رو یکم یاد بگیرم ، فردا هم که میریم لاراول و این چرخه بی انتها همینطوری ادامه پیدا میکنه ❌
و بعد از چند ماه آموزش دیدن یهو به خودت میای میبینی هیچ تخصصی نداری
اگر خودم قرار بود دوباره از صفر شروع کنم :
1️⃣ یک مسیر رو انتخاب میکردم.
2️⃣ هر روز حتی کم، ولی مداوم جلو میرفتم.
3️⃣ از هفته اول پروژه میساختم.
4️⃣ کمتر آموزش میدیدم، بیشتر تمرین میکردم.
برنامهنویسی مسابقه سرعت نیست؛ مسابقه ادامه دادنه.
📌 شما اگر امروز از صفر شروع میکردین، چه مسیری رو انتخاب میکردین؟
برخلاف چیزی که اکثر افراد فکر میکنن، اولین قدم یاد گرفتن JavaScript یا Python نبود.
اول یاد میگرفتم چطور یاد بگیرم ( وقتی یادش بگیری معجزه میکنه )
چون بزرگترین اشتباه تازهکارها اینه که میان با خودشون میگن خب امروز برم React رو یکم یاد بگیرم ، فردا هم که میریم لاراول و این چرخه بی انتها همینطوری ادامه پیدا میکنه ❌
و بعد از چند ماه آموزش دیدن یهو به خودت میای میبینی هیچ تخصصی نداری
اگر خودم قرار بود دوباره از صفر شروع کنم :
1️⃣ یک مسیر رو انتخاب میکردم.
2️⃣ هر روز حتی کم، ولی مداوم جلو میرفتم.
3️⃣ از هفته اول پروژه میساختم.
4️⃣ کمتر آموزش میدیدم، بیشتر تمرین میکردم.
برنامهنویسی مسابقه سرعت نیست؛ مسابقه ادامه دادنه.
📌 شما اگر امروز از صفر شروع میکردین، چه مسیری رو انتخاب میکردین؟
👍2
Foad Labs
🚀 سری ۵ قسمتی: معماری Next.js 🟡 پارت ۳ — معماری MVP (ساده اما خطرناک) تو پارت قبل دیدیم که ساختار پروژه به سایز و نیازش بستگی داره. حالا بیایم سراغ محبوبترین و دمدستیترین مدل: یعنی همون ساختار پیشفرضِ Next.js بدون فولدربندی خاص. ساختاری که روز اول خیلی…
🚀 سری ۵ قسمتی: Next.js Architecture Mastery
🟠 پارت ۴ — اولین تفکیک (UI vs Logic)
تا اینجا دیدیم معماری بد چطور پروژه رو فلج میکنه. حالا وقتشه اولین و مهمترین قدم رو برای نجات پروژه برداریم :
جدا کردن ظاهر (UI) از منطق (Logic).
Components vs Services
بزرگترین اشتباه اینه که ما میایم توی کامپوننت خودمون (مثلا فرم ثبتنام) کاری میکنیم که کامپوننت مستقیما بدونه دیتا چطوری فچ میشه یا به کدوم API ریکوئست میزنه.
کامپوننت باید "کودن" (Dumb) باشه! یعنی فقط وظیفه داره پراپس یا دیتا رو بگیره و ظاهر رو نشون بده. منطق کار (مثل کال کردن API) باید بره تو یه لایه ی دیگه، مثلا فولدری به اسم
استارت ذهنیت لایه بندی
با این کار، به جای یه فایل شلوغ که همهچیز توشه، دوتا فایل تمیز داری :
که فقط کارش گرفتن دیتای کاربر از API هست.
که فقط دیتایی که از سرویس گرفته رو خوشگل نشون میده.
چرا این کار واجبه؟
قابلیت استفاده مجدد : اگه یه جای دیگه پروژه هم دیتای کاربر رو خواستی، فقط سرویس رو صدا میزنی، نه اینکه دوباره کد فچ بنویسی.
نگهداری راحتتر : اگه آدرس API عوض شد، فقط یه فایل (سرویس) رو ادیت میکنی، نه ۱۰ تا کامپوننت رو!
👇 برای امروز اینو یادت باشه هربار که میخای یه کامپوننت بسازی :
کامپوننتهای تو نبایدباهوش باشن
اونا فقط باید خوشگل دیتارو نشون بدن!
#Labs_fiveStepToMasterInNextArchitecture
🟠 پارت ۴ — اولین تفکیک (UI vs Logic)
تا اینجا دیدیم معماری بد چطور پروژه رو فلج میکنه. حالا وقتشه اولین و مهمترین قدم رو برای نجات پروژه برداریم :
جدا کردن ظاهر (UI) از منطق (Logic).
Components vs Services
بزرگترین اشتباه اینه که ما میایم توی کامپوننت خودمون (مثلا فرم ثبتنام) کاری میکنیم که کامپوننت مستقیما بدونه دیتا چطوری فچ میشه یا به کدوم API ریکوئست میزنه.
کامپوننت باید "کودن" (Dumb) باشه! یعنی فقط وظیفه داره پراپس یا دیتا رو بگیره و ظاهر رو نشون بده. منطق کار (مثل کال کردن API) باید بره تو یه لایه ی دیگه، مثلا فولدری به اسم
services/ یا lib/.استارت ذهنیت لایه بندی
با این کار، به جای یه فایل شلوغ که همهچیز توشه، دوتا فایل تمیز داری :
UserService.ts:که فقط کارش گرفتن دیتای کاربر از API هست.
UserProfile.tsx: که فقط دیتایی که از سرویس گرفته رو خوشگل نشون میده.
چرا این کار واجبه؟
قابلیت استفاده مجدد : اگه یه جای دیگه پروژه هم دیتای کاربر رو خواستی، فقط سرویس رو صدا میزنی، نه اینکه دوباره کد فچ بنویسی.
نگهداری راحتتر : اگه آدرس API عوض شد، فقط یه فایل (سرویس) رو ادیت میکنی، نه ۱۰ تا کامپوننت رو!
👇 برای امروز اینو یادت باشه هربار که میخای یه کامپوننت بسازی :
کامپوننتهای تو نباید
اونا فقط باید خوشگل دیتارو نشون بدن!
#Labs_fiveStepToMasterInNextArchitecture
❤1👌1
امروز رو میخام کلا اختصاص بدم به اخبار دنیای روز تکنولوژی از موقعی که متاسفانه ما دسترسی به اینترنت نداشتیم تا به الان
از پیشرفت ai بگیر تا معرفی هرچی که فکر کنی 😬😁
از پیشرفت ai بگیر تا معرفی هرچی که فکر کنی 😬😁
🔥1
🚨 شرکت Anthropic دیروز رونمایی خفنی کرد از ...
🔥 Claude Mythos 5 + Claude Fable 5
🧠 Mythos 5 = مغز فوقسنگین
مخصوص کارهای خیلی حساس (security / research / bio / dev)
فقط برای سازمانهای تأییدشده
عملا یه مدل “کنترلشده” با توانایی خیلی بالا
💻 Fable 5 = نسخه عمومی
همون هسته، ولی با محدودیتهای جدی
قابل استفاده برای توسعهدهندهها و APIها
امنتر، ولی محدودتر
💸 اما نکته مهمتر این دومدل قیمتهاشون هست
$10 / 1M input tokens
$50 / 1M output tokens
یعنی وارد دنیایی شدیم که “قدرت بیشتر” دیگه ارزون نیست.
⚠️ دلیل این سختگیریها چیه؟
چون این مدلها تو تستها در حدی قوی بودن که میتونن :
1⃣ آسیبپذیریهای امنیتی پیدا کنن
2⃣ وارد مسائل حساس تحقیقاتی بشن
3⃣ و در صورت سوءاستفاده، ریسک جدی ایجاد کنن
💬 بنظرتون ما داریم وارد دورهای میشیم که دسترسی به هوش مصنوعی قوی، خودش محدود میشه؟
#Labs_Tech
🔥 Claude Mythos 5 + Claude Fable 5
🧠 Mythos 5 = مغز فوقسنگین
مخصوص کارهای خیلی حساس (security / research / bio / dev)
فقط برای سازمانهای تأییدشده
عملا یه مدل “کنترلشده” با توانایی خیلی بالا
💻 Fable 5 = نسخه عمومی
همون هسته، ولی با محدودیتهای جدی
قابل استفاده برای توسعهدهندهها و APIها
امنتر، ولی محدودتر
💸 اما نکته مهمتر این دومدل قیمتهاشون هست
$10 / 1M input tokens
$50 / 1M output tokens
یعنی وارد دنیایی شدیم که “قدرت بیشتر” دیگه ارزون نیست.
⚠️ دلیل این سختگیریها چیه؟
چون این مدلها تو تستها در حدی قوی بودن که میتونن :
1⃣ آسیبپذیریهای امنیتی پیدا کنن
2⃣ وارد مسائل حساس تحقیقاتی بشن
3⃣ و در صورت سوءاستفاده، ریسک جدی ایجاد کنن
💬 بنظرتون ما داریم وارد دورهای میشیم که دسترسی به هوش مصنوعی قوی، خودش محدود میشه؟
#Labs_Tech
❤1
🚨 متا با نسخههای پولی برگشته!
«Instagram Plus» و «WhatsApp Plus»
با اشتراک ماهانه :
📸 اینستاگرام 3.99$
💬 واتساپ: 2.99$
و حالا قابلیتهایی که سر و صدا کرده 👇
• 👀 مشاهده مخفیانه استوریها
• 📌 Story Spotlight
(اولویت گرفتن استوریها در نمایش)
• ⏳ Story Extend
(افزایش زمان استوری از 24 به 48 ساعت)
• 📊 دیدن تعداد بازدیدهای یک کاربر از استوریها (برای مچ گرفتن خداست)
فعلا این اشتراک برای اینستاگرام فعاله گویا
#Labs_Tech
«Instagram Plus» و «WhatsApp Plus»
با اشتراک ماهانه :
📸 اینستاگرام 3.99$
💬 واتساپ: 2.99$
و حالا قابلیتهایی که سر و صدا کرده 👇
• 👀 مشاهده مخفیانه استوریها
• 📌 Story Spotlight
(اولویت گرفتن استوریها در نمایش)
• ⏳ Story Extend
(افزایش زمان استوری از 24 به 48 ساعت)
• 📊 دیدن تعداد بازدیدهای یک کاربر از استوریها (برای مچ گرفتن خداست)
فعلا این اشتراک برای اینستاگرام فعاله گویا
#Labs_Tech
👀1
⚡️ گوگل با نسل جدید Gemini (مدلهای چندوجهی) دوباره توجهها رو جلب کرد!
این سیستم جدید میتونه:
⬅️ ایدهها رو به متن، تصویر، و ویدیو تبدیل کنه
⬅️ ورودیهای مختلف (متن + تصویر + صدا) رو با هم ترکیب کنه و خروجی خلاقانه بسازه
⬅️ جزئیات ویدیو مثل کاراکتر، سبک، محیط و زاویه دوربین رو دقیق تغییر بده
⬅️ محتوای واقعگرایانه و انیمیشنی تولید کنه
🚀 فاصله بین «فکر کردن» و «ساختن» از همیشه کوتاهتر شده!
#Labs_Tech
این سیستم جدید میتونه:
⬅️ ایدهها رو به متن، تصویر، و ویدیو تبدیل کنه
⬅️ ورودیهای مختلف (متن + تصویر + صدا) رو با هم ترکیب کنه و خروجی خلاقانه بسازه
⬅️ جزئیات ویدیو مثل کاراکتر، سبک، محیط و زاویه دوربین رو دقیق تغییر بده
⬅️ محتوای واقعگرایانه و انیمیشنی تولید کنه
🚀 فاصله بین «فکر کردن» و «ساختن» از همیشه کوتاهتر شده!
#Labs_Tech
❤1
📧 بالاخره میتونی آدرس جیمیلتو عوض کنی!
گوگل یه قابلیت جدید گذاشته که اجازه میده اسم ایمیل (قبل از @gmail.com) رو تغییر بدی، بدون اینکه لازم باشه یه اکانت جدید بسازی یا اطلاعاتت پاک بشه.
🌐 لینک بررسی: http://myaccount.google.com/google-account-email
چند تا نکته مهم:
▫️ این قابلیت هنوز برای همه فعال نشده و بهمرور میاد
▫️ ایمیل قبلی حذف نمیشه و هنوز به حسابت وصله
▫️ هر ایمیلی (قدیمی یا جدید) رو بفرستن، تو همون اینباکس میاد
▫️ با هر دو آدرس میتونی وارد سرویسهای گوگل بشی
▫️ این تغییر فقط هر ۱۲ ماه یکبار قابل انجامه
#Labs_Tech
گوگل یه قابلیت جدید گذاشته که اجازه میده اسم ایمیل (قبل از @gmail.com) رو تغییر بدی، بدون اینکه لازم باشه یه اکانت جدید بسازی یا اطلاعاتت پاک بشه.
🌐 لینک بررسی: http://myaccount.google.com/google-account-email
چند تا نکته مهم:
▫️ این قابلیت هنوز برای همه فعال نشده و بهمرور میاد
▫️ ایمیل قبلی حذف نمیشه و هنوز به حسابت وصله
▫️ هر ایمیلی (قدیمی یا جدید) رو بفرستن، تو همون اینباکس میاد
▫️ با هر دو آدرس میتونی وارد سرویسهای گوگل بشی
▫️ این تغییر فقط هر ۱۲ ماه یکبار قابل انجامه
#Labs_Tech
👌1
🍏 iOS 27 معرفی شد!
اپل نسل جدید iOS رو با تمرکز روی Apple Intelligence معرفی کرده و کلی قابلیت جدید به آیفونها اضافه شده.
🤖 Siri AI
سیری حالا هوشمندتر شده و میتونه در انجام کارها، مدیریت اپلیکیشنها و حتی ویرایش تصاویر به کاربران کمک کنه.
✨ شخصیسازی بیشتر Liquid Glass
کاربران میتونن میزان شفافیت و ظاهر رابط کاربری رو به دلخواه خودشون تنظیم کنن و کنترل بیشتری روی تجربه کاربری داشته باشن.
⚡ بهبود عملکرد
▫️ افزایش سرعت اجرای برنامهها
▫️ انتقال فایل سریعتر با AirDrop
▫️ بهینهسازی کلی سیستمعامل
📸 قابلیتهای جدید Photos
▫️ Clean Up
حذف افراد یا اشیای اضافی از تصاویر با کمک هوش مصنوعی
▫️ Reframe
تنظیم خودکار کادر عکس برای ترکیببندی بهتر
▫️ Extend
گسترش تصویر و تکمیل بخشهای اطراف عکس با هوش مصنوعی
📱 همچنین طبق اعلام اپل، برخی مدلهای قدیمیتر آیفون نیز این نسخه را دریافت خواهند کرد.
#Labs_Tech
اپل نسل جدید iOS رو با تمرکز روی Apple Intelligence معرفی کرده و کلی قابلیت جدید به آیفونها اضافه شده.
🤖 Siri AI
سیری حالا هوشمندتر شده و میتونه در انجام کارها، مدیریت اپلیکیشنها و حتی ویرایش تصاویر به کاربران کمک کنه.
✨ شخصیسازی بیشتر Liquid Glass
کاربران میتونن میزان شفافیت و ظاهر رابط کاربری رو به دلخواه خودشون تنظیم کنن و کنترل بیشتری روی تجربه کاربری داشته باشن.
⚡ بهبود عملکرد
▫️ افزایش سرعت اجرای برنامهها
▫️ انتقال فایل سریعتر با AirDrop
▫️ بهینهسازی کلی سیستمعامل
📸 قابلیتهای جدید Photos
▫️ Clean Up
حذف افراد یا اشیای اضافی از تصاویر با کمک هوش مصنوعی
▫️ Reframe
تنظیم خودکار کادر عکس برای ترکیببندی بهتر
▫️ Extend
گسترش تصویر و تکمیل بخشهای اطراف عکس با هوش مصنوعی
📱 همچنین طبق اعلام اپل، برخی مدلهای قدیمیتر آیفون نیز این نسخه را دریافت خواهند کرد.
#Labs_Tech
❤1
🚨 GPT-5.5 معرفی شد!
OpenAI بالاخره نسل جدید مدلهاش رو منتشر کرد.
اما این بار داستان فقط قویتر شدن مدل نیست 👇
• 🤖 توانایی انجام کارهای چندمرحلهای
• 👨💻 عملکرد بهتر در کدنویسی
• 🔍 تحقیق و جستجوی عمیقتر
• 📊 تحلیل دادههای پیچیده
• 🛠 استفاده بهتر از ابزارها و نرمافزارها
OpenAI میگه GPT-5.5 بیشتر از اینکه یک چتبات باشه،
یه «همکار دیجیتالی» برای انجام کارهاست.
🔗 https://openai.com/index/introducing-gpt-5-5/
#Labs_Tech
OpenAI بالاخره نسل جدید مدلهاش رو منتشر کرد.
اما این بار داستان فقط قویتر شدن مدل نیست 👇
• 🤖 توانایی انجام کارهای چندمرحلهای
• 👨💻 عملکرد بهتر در کدنویسی
• 🔍 تحقیق و جستجوی عمیقتر
• 📊 تحلیل دادههای پیچیده
• 🛠 استفاده بهتر از ابزارها و نرمافزارها
OpenAI میگه GPT-5.5 بیشتر از اینکه یک چتبات باشه،
یه «همکار دیجیتالی» برای انجام کارهاست.
🔗 https://openai.com/index/introducing-gpt-5-5/
#Labs_Tech
OpenAI
Introducing GPT-5.5
Introducing GPT-5.5, our smartest model yet—faster, more capable, and built for complex tasks like coding, research, and data analysis across tools.
❤1
🚨 گوگل Veo 3 را معرفی کرد!
و احتمالاً ترسناکترین پیشرفت تولید ویدیو تا امروز است.
فقط یک پرامپت کافیست تا:
• 🎬 ویدیو تولید شود
• 🎤 صدا ساخته شود
• 🗣 دیالوگ تولید شود
• 🎭 شخصیتها صحبت کنند
• 🎥 خروجی شبیه فیلم سینمایی شود
فاصله ایده تا ساخت ویدیو،
هیچوقت اینقدر کم نبوده.
#Labs_Tech
و احتمالاً ترسناکترین پیشرفت تولید ویدیو تا امروز است.
فقط یک پرامپت کافیست تا:
• 🎬 ویدیو تولید شود
• 🎤 صدا ساخته شود
• 🗣 دیالوگ تولید شود
• 🎭 شخصیتها صحبت کنند
• 🎥 خروجی شبیه فیلم سینمایی شود
فاصله ایده تا ساخت ویدیو،
هیچوقت اینقدر کم نبوده.
#Labs_Tech
❤1
🚨 Next.js 16.2 منتشر شد!
خبر خوب برای فرانتاند دولوپرها 👇
• ⚡️ بهبود بزرگ Turbopack
• 🚀 سرعت بیشتر Build
• 🐛 ابزارهای دیباگ بهتر
• 🤖 قابلیتهای جدید برای AI Apps
• 📈 بهبود عملکرد Server Components
Vercel داره Next.js رو برای نسل اپلیکیشنهای AI آماده میکنه.
🔗 https://nextjs.org/blog
#Labs_Tech
خبر خوب برای فرانتاند دولوپرها 👇
• ⚡️ بهبود بزرگ Turbopack
• 🚀 سرعت بیشتر Build
• 🐛 ابزارهای دیباگ بهتر
• 🤖 قابلیتهای جدید برای AI Apps
• 📈 بهبود عملکرد Server Components
Vercel داره Next.js رو برای نسل اپلیکیشنهای AI آماده میکنه.
🔗 https://nextjs.org/blog
#Labs_Tech
nextjs.org
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
❤1
🚨 Context Window یک میلیون توکنی!
قبلاً مدلها حافظه محدودی داشتن.
الان چی؟
• 📚 چند کتاب کامل
• 💻 یک کدبیس بزرگ
• 📄 صدها صفحه مستندات
• 📊 دیتاستهای حجیم
رو میشه یکجا داخل مدل قرار داد.
یعنی AI کمکم داره کل پروژه رو یکجا میفهمه.
#Labs_Tech
قبلاً مدلها حافظه محدودی داشتن.
الان چی؟
• 📚 چند کتاب کامل
• 💻 یک کدبیس بزرگ
• 📄 صدها صفحه مستندات
• 📊 دیتاستهای حجیم
رو میشه یکجا داخل مدل قرار داد.
یعنی AI کمکم داره کل پروژه رو یکجا میفهمه.
#Labs_Tech
🔴 Status: server down (sleep mode activated)
Fixing dreams… see you tomorrow 🚀
👌2❤1
بیاید یه چالش بریم
هرکسی یه نظر یا فکت جنجالی درباره برنامه نویسی که بدجور ازش دفاع میکنه 👀
تعامل کردن از صفات یه برنامه نویس خوبه 😅😁
هرکسی یه نظر یا فکت جنجالی درباره برنامه نویسی که بدجور ازش دفاع میکنه 👀
تعامل کردن از صفات یه برنامه نویس خوبه 😅😁
متاتگهای سئو داشتن داخل body رندر میشدن! 💀
و من چند ساعت نمیفهمیدم چرا.
باگی بود که توی آخرین پروژه ای که کار کردم باهاش برخوردم و رسما داشت سئو پروژه رو نابود میکرد
همونطور که میدونین تگهای مربوط به موتورهای جستجو باید داخل بدنه head گذاشته بشن تا بهتر بتونن خونده بشن توسط موتورها و ربات ها
حدس های اولیه خودم چیا بودن ❓
1️⃣ اولین حدسی که بنظرم اومد این بود که ساختاری که برای پایهگذاری و اساس سئو نوشته شده بود مشکل داره
2️⃣ دومین حدسم این بود که نکنه بخاطر اینه که ممکنه جایی که من دارم تعریف میکنم متاتگهارو داره سمت کلاینت نوشته میشه و همچی رو خراب میکنه
اما همهی این چک کردنها و بررسی کردنها بی فایده بود چون مشکل از جای اساسی تری میومد.
بعد از کلی سرچ، خوندن داکیومنت، زیر و رو کردن StackOverflow، و البته شکست خوردن AI(هوش مصنوعی نتونست مشکل رو حل کنه، باور کنین)
بالاخره منبع مشکل رو پیدا کردم.
حالا دقیقا منشا مشکل از چی بود ؟؟
مشکل این بود از نسخه 15 به بعد نکست، شما اگر داخل صفحاتت از generateMetadata برای داینامیک جنریت کردن متاتگا استفاده کنی و این فانکشن داخلش فراخونی به api خارجی برای گرفتن دیتا داشته باشه و هرچیزی که باعث بلاک شدن صفحه بشه رو براش منتظر نمیمونه و ui اولیه رو بدون منتظر موندن رندر میکنه، حالا هروقت اون دیتا رسید و آماده بود نکست میاد تگارو داخل body رندر میکنه
و این یعنی رسما داری سئوی سایتت رو داغون میکنی 💥
به این قابلیت توی نکست میگن streaming metadata 👀
برای غیرفعال کردن این قابلیت کافیه توی فایل کانفیگ
خودتون پراپرتی
رو قرار بدین، همین
⚠️ ناگفته نماند که خود داکیومنت نکست پیشنهاد کرده تا جای ممکن این قابلیت فعال باشه برای پروژههاتون چون باعث بهینه تر شدن TTFB و همینطور پایینتر اومدن LCP سایتتون میشه.
از این به بعد هر باگ یا تجربه جالبی که توی پروژههام پیدا کنم، اینجا باهاتون به اشتراک میذارم.
اگر این مدل محتوا رو دوست داری یه ریاکشن بذار ❤️
#Labs_Experience
و من چند ساعت نمیفهمیدم چرا.
باگی بود که توی آخرین پروژه ای که کار کردم باهاش برخوردم و رسما داشت سئو پروژه رو نابود میکرد
همونطور که میدونین تگهای مربوط به موتورهای جستجو باید داخل بدنه head گذاشته بشن تا بهتر بتونن خونده بشن توسط موتورها و ربات ها
حدس های اولیه خودم چیا بودن ❓
1️⃣ اولین حدسی که بنظرم اومد این بود که ساختاری که برای پایهگذاری و اساس سئو نوشته شده بود مشکل داره
2️⃣ دومین حدسم این بود که نکنه بخاطر اینه که ممکنه جایی که من دارم تعریف میکنم متاتگهارو داره سمت کلاینت نوشته میشه و همچی رو خراب میکنه
اما همهی این چک کردنها و بررسی کردنها بی فایده بود چون مشکل از جای اساسی تری میومد.
بعد از کلی سرچ، خوندن داکیومنت، زیر و رو کردن StackOverflow، و البته شکست خوردن AI(هوش مصنوعی نتونست مشکل رو حل کنه، باور کنین)
بالاخره منبع مشکل رو پیدا کردم.
حالا دقیقا منشا مشکل از چی بود ؟؟
مشکل این بود از نسخه 15 به بعد نکست، شما اگر داخل صفحاتت از generateMetadata برای داینامیک جنریت کردن متاتگا استفاده کنی و این فانکشن داخلش فراخونی به api خارجی برای گرفتن دیتا داشته باشه و هرچیزی که باعث بلاک شدن صفحه بشه رو براش منتظر نمیمونه و ui اولیه رو بدون منتظر موندن رندر میکنه، حالا هروقت اون دیتا رسید و آماده بود نکست میاد تگارو داخل body رندر میکنه
و این یعنی رسما داری سئوی سایتت رو داغون میکنی 💥
به این قابلیت توی نکست میگن streaming metadata 👀
برای غیرفعال کردن این قابلیت کافیه توی فایل کانفیگ
next.config.ts
خودتون پراپرتی
htmlLimitedBots: /.*/
رو قرار بدین، همین
⚠️ ناگفته نماند که خود داکیومنت نکست پیشنهاد کرده تا جای ممکن این قابلیت فعال باشه برای پروژههاتون چون باعث بهینه تر شدن TTFB و همینطور پایینتر اومدن LCP سایتتون میشه.
از این به بعد هر باگ یا تجربه جالبی که توی پروژههام پیدا کنم، اینجا باهاتون به اشتراک میذارم.
اگر این مدل محتوا رو دوست داری یه ریاکشن بذار ❤️
#Labs_Experience
nextjs.org
Functions: generateMetadata
Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.