🟢 status: Server is all ears

بیاید یه چالش بریم
هرکسی یه نظر یا فکت جنجالی درباره برنامه نویسی که بدجور ازش دفاع میکنه 👀

تعامل کردن از صفات یه برنامه نویس خوبه 😅😁

متاتگ‌های سئو داشتن داخل 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