متاتگ‌های سئو داشتن داخل body رندر می‌شدن! 💀
و من چند ساعت نمی‌فهمیدم چرا.

باگی بود که توی آخرین پروژه ای که کار کردم باهاش برخوردم و رسما داشت سئو پروژه رو نابود میکرد
همونطور که میدونین تگ‌های مربوط به موتورهای جستجو باید داخل بدنه head گذاشته بشن تا بهتر بتونن خونده بشن توسط موتورها و ربات ها

حدس های اولیه خودم چیا بودن ❓
1️⃣ اولین حدسی که بنظرم اومد این بود که ساختاری که برای پایه‌گذاری و اساس سئو نوشته شده بود مشکل داره
2️⃣ دومین حدسم این بود که نکنه بخاطر اینه که ممکنه جایی که من دارم تعریف میکنم متاتگ‌هارو داره سمت کلاینت نوشته میشه و همچی رو خراب میکنه

اما همه‌ی این چک کردن‌ها و بررسی کردن‌ها بی فایده بود چون مشکل از جای اساسی تری میومد.
بعد از کلی سرچ، خوندن داکیومنت، زیر و رو کردن StackOverflow، و البته شکست خوردن AI(هوش مصنوعی نتونست مشکل رو حل کنه، باور کنین) 🫪

بالاخره منبع مشکل رو پیدا کردم.
حالا دقیقا منشا مشکل از چی بود ؟؟

مشکل این بود از نسخه 15 به بعد نکست، شما اگر داخل صفحاتت از generateMetadata برای داینامیک جنریت کردن متاتگا استفاده کنی و این فانکشن داخلش فراخونی به api خارجی برای گرفتن دیتا داشته باشه و هرچیزی که باعث بلاک شدن صفحه بشه رو براش منتظر نمیمونه و ui اولیه رو بدون منتظر موندن رندر میکنه، حالا هروقت اون دیتا رسید و آماده بود نکست میاد تگارو داخل body رندر میکنه 🫪🫪
و این یعنی رسما داری سئوی سایتت رو داغون میکنی 💥

به این قابلیت توی نکست میگن streaming metadata 👀

برای غیرفعال کردن این قابلیت کافیه توی فایل کانفیگ

next.config.ts

خودتون پراپرتی

htmlLimitedBots: /.*/

رو قرار بدین، همین

⚠️ ناگفته نماند که خود داکیومنت نکست پیشنهاد کرده تا جای ممکن این قابلیت فعال باشه برای پروژه‌هاتون چون باعث بهینه تر شدن TTFB و همینطور پایین‌تر اومدن LCP سایتتون میشه.

از این به بعد هر باگ یا تجربه جالبی که توی پروژه‌هام پیدا کنم، اینجا باهاتون به اشتراک میذارم.
اگر این مدل محتوا رو دوست داری یه ری‌اکشن بذار ❤️

#Labs_Experience

😂💔
شبتون بخیر

چندتا از مقاله‌هایی که بنظر خودم وقتی خوندمشون واقعا مفید بودن رو توی یه بوکمارک جمع کردم
امروز چندتاشون رو براتون میزارم
زمان زیادی ازتون نمیگیرن برای خوندن ولی واقعا ارزش دارن 😁🤌🏻

https://dev.to/dipakahirav/top-20-javascript-tricks-and-tips-for-every-developer-3apb

بعدی ساعت 12:00

https://najm-eddine-zaga.medium.com/top-javascript-best-practices-cf897022b6fd

بعدی ساعت 14:00

مقاله‌هارو مطالعه کنین
نظری یا سوالی بود توی کامنت بگین ❤️

برید کامنتای این پست لینکدین رو بخونین بعد بیاید ازم تشکر کنین بابت به خنده درآورنتون 😂

راستی اگر لینکدین دارین کانکشن بدین همو پیدا کنیم ❤️

لینکدین من

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

سلام به كاپي پيست تمام سايت هاي داخلي و خارجي 🦦🫨

لینک

💚 چنلمون: @pepesocial
  💚 سایتمون: pepe.ir

حتما تستش کنین و نظرتون رو بگین
منم تستش رو امشب یا فردا میزنم نتیجه رو میزارم 😉

یه سایت خفن پر از پورتفولیو برنامه نویسا که میتونین لذت ببرین و ازش برای ساخت سایت خودتون الهام بگیرین 👨🏻‍💻

خفناشو بفرستین باهم ببینیم 👀❤️

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

🔴 Offline

🚀 مینی‌سری جدید : معماری‌های کلاس جهانی در Next.js
همیشه یه سوال بزرگ بعد از یادگیری وجود داره: "خب Next.js رو بلدم، ولی پروژه‌های بزرگ و واقعیِ استارتاپ‌ها دقیقا چطوری فولدربندی و نوشته میشن؟"
کد زدن برای یه سایت ساده کجا، و طراحی سیستم برای یه پروژه بزرگ که چند تا تیم دارن همزمان روش کار می‌کنن کجا!

قراره تو یه مینی‌سری ۵ قسمتی، بریم سراغ ساختارها و معماری‌هایی که شرکت‌های بزرگ و یونیکورن‌ها برای پروژه‌های اصلی‌شون استفاده می‌کنن. تو این سری دیگه کاری با کدهای تستی و دم‌دستی نداریم؛ قراره یاد بگیریم چطور دیدگاهمون رو از یه "کدنویس" به یه "طراح سیستم" ارتقا بدیم.

👇 امروز پارت اول رو با یه معماریِ به شدت کاربردی استارت می‌زنیم آماده‌ باشید 🔥

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🟢
پارت ۱ — معماری Bulletproof (سپر ضد گلوله)

خیلی ساده ساده بگم، وقتی پروژه استارتاپت داره سریع بزرگ میشه، کدهات خیلی راحت تبدیل به اسپاگتی کد میشن. معماری Bulletproof (ضد گلوله) اومده که جلوی این کثیف‌ کاری رو بگیره.

ایده اصلی اینه : هر ویژگی (Feature) برای خودش یه کشور مستقله.
به جای اینکه تمام کامپوننت‌های کل سایت رو بریزی تو یه پوشه، تمام هوک‌ها رو تو یه پوشه دیگه و... میای هر فیچر رو با تمام مخلفاتش یه جا جمع میکنی.
اینجوری اگه کسی خواست روی سیستم "نظرات" کار کنه، دقیقا میدونه باید بره تو کدوم پوشه و نیازی نیست کل پروژه رو شخم بزنه.

ساختار فولدرها تو دنیای واقعی این شکلیه :

src/
├── components/       # فقط دکمه‌ها و اینپوت‌های عمومی کل سایت
├── lib/              # تنظیمات کلی مثل کلاینت Axios
├── features/         # 👈 قلب تپنده پروژه
│   ├── comments/     # جزیره مستقل نظرات
│   │   ├── api/      # ریکوئست‌های مربوط به نظرات
│   │   ├── components/ # کامپوننت‌های مخصوص همین بخش
│   │   ├── hooks/    # لاجیک و استیت‌های نظرات
│   │   └── types/    # تایپ‌های تایپ‌اسکریپت این بخش
│   └── auth/         # جزیره مستقل لاگین و ثبت‌نام
└── app/              # فقط وصل کردن فیچرها به روت‌های Next.js

همینقدر ساده و شیک و بدون پیچیدگی زیاد 🟢
یکی از ساده ترین معماری و ساختارهای توی پروژه‌های نکست شناخته میشه 🚀

#Labs_Next5Architecture

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🟡
پارت ۲ — ساختار Feature-Sliced Design (FSD)

وقتی پروژه‌ات انقدر بزرگ و خفن شده که حتی مدل Bulletproof هم جواب نمیده، باید بری سراغ FSD. این معماری الان تو خیلی از شرکت‌های بزرگ ترنده.
تو FSD ما با یه سیستم طبقاتی به‌شدت سخت‌گیرانه طرفیم. کدها تو لایه‌های مختلف چیده میشن و قانون جاذبه وجود داره : دیتا فقط از بالا به پایین میریزه!
مثلا لایه Features حق نداره از لایه Pages چیزی ایمپورت کنه. این کار باعث میشه کدهات به هم گره نخورن و وقتی یه جا رو دستکاری میکنی، یه جای بی‌ربط دیگه باگ نده.

نمای واقعی فولدربندی FSD :

src/
├── app/              # تنظیمات پایه، پروایدرها و استایل‌های گلوبال
├── pages/            # ترکیب کردن دیتاها برای ساختن یک صفحه کامل
├── widgets/          # بلوک‌های بزرگ UI (مثلاً کل هدر سایت با دکمه‌هاش)
├── features/         # اکشن‌های کاربر (مثلاً لایک کردن، لاگین کردن)
├── entities/         # موجودیت‌های بیزینس (مدل دیتای User یا Product)
└── shared/           # آیکون‌ها، یوتیلیتی‌ها و دکمه‌های ساده

👇 قانون FSD: کدها مثل طبقات یک برج ساخته میشن؛ هیچ طبقه‌ای نباید بارِ خودش رو بندازه روی سقفِ طبقه بالایی!

#Labs_Next5Architecture

صبح بخیر رفقای کدنویس ☕️
یه نقل قول معروف تو دنیای برنامه‌نویسی هست از دانالد کنوت (Donald Knuth) که میگه :
بهینه‌سازیِ زودرس، ریشه تمام بدی‌هاست (Premature optimization is the root of all evil)

خیلی وقتا روزا درگیر این میشیم که کدمون رو از همون خط اول پرفکت و فوق‌سریع بنویسیم. نتیجه؟ کدی می‌نویسیم که به شدت پیچیده‌ست، خوندنش سخته و آخرش هم اون فیچر کلا از پروژه حذف میشه ( اینقدر پیاده‌سازیش طول میکشه که فکر میکنی بهتره اصلا پیاده‌سازی نشه ) 😂

✅ قانون ۳ مرحله‌ای
1. اول کاری کن که فقط کار کنه ( Make it work )
2. بعد کاری کن که درست و تمیز کار کنه ( Make it right )
3. در نهایت اگه لازم بود، سریعش کن ( Make it fast )

شما تو کدوم مرحله بیشتر گیر می‌کنین؟
روز پرکدی داشته باشیمم 😉 💻

🔥 چالش ظهرگاهی
جنگ زبان‌ها 🔥

بچه‌ها یه سناریوی خیلی ساده داریم که قراره تو سه تا زبان TypeScript, Python, و PHP اجرا بشه.
کدها ایناست :

🟡 تو جاوااسکریپت (JS) :

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a);

🔵 تو پی‌اچ‌پی (PHP) :

$a = [1, 2, 3];
$b = $a;
$b[] = 4;
print_r($a);

🟢 تو پایتون (Python) :

a = [1, 2, 3]
b = a
b.append(4)
print(a)

❗️ سوال اینه
خروجی آرایه a توی این سه تا زبان به ترتیب چیه؟ 🤔
توی نظرسنجی پایین جواب بدیم ببینیم چند نفر تفاوت رفتار زبان‌ها رو تو مدیریت حافظه میدونن! 👇