در حال آماده‌سازی نسخه جدید وبسایت شخصیم هستم 👀

به‌زودی داخل چنل درباره :

- روند طراحی
- جزئیات UI
- ساختار پروژه
- و ایده‌هایی که پشتش بوده

هم محتوا میذارم 🩵

به نظرم یکی از underrated ترین مهارت‌ها توی فرانت‌اند :
سادگیه.

خیلی وقتا مشکل UI این نیست که چیزی کم داره،
مشکل اینه که بیش از حد شلوغه.

هرچی بیشتر جلو رفتم،
بیشتر فهمیدم طراحی خوب،
بیشتر درباره حذف کردنه تا اضافه کردن.

#Labs_Notes

ترجمه :
اون کلید اصلی من بود. منحصر به فرد، غیرقابل جایگزین. سپس او در جدول شخص دیگری به
یک کلید خارجی تبدیل شد.

پ.ن : دیتابیس کارا درک میکنن 😂

#Labs_fun

⚠️ چرا این کد توی React/Next.js یک فاجعه‌ست؛ حتی وقتی Dependency Array درسته؟

مشکل از اینجاست که React فقط Reference رو مقایسه می‌کنه، نه محتوای Object رو.

یعنی:
هر Render = یک Object جدید داخل Memory

و نتیجه؟
useEffect دوباره اجرا میشه → setState → Re-render → Loop ∞

همین چرخه کوچیک می‌تونه:
🔥 Performance رو نابود کنه
🔥 Browser رو Lag کنه
🔥 و Debug کردن رو تبدیل به کابوس کنه

✅ راه‌حل:

- اگر مقدار ثابته → خارج از کامپوننت تعریفش کن
- اگر وابسته به props/state هست → useMemo

(React 19 تا حدی خودش این Optimization رو انجام میده)

#Labs_bug
#Labs_Tips

کامیونیتی نکست و شرکت بنیانگذار اون یعنی ورسل داره توی ۳ کشور اروپایی ایونت برگزار میکنه
که مهموناش از خفنای تیم نکست هستن 🤌🏻

پ.ن : سایتشون آدمو به هوس میندازه شرکت کنی 😂

🌐 https://nextjs.org/nights

به نظرم یکی از underrated ترین مهارت‌ها برای یه دولوپر،
اینه که بدونه کِی باید چیزی رو rebuild نکنه.

#Labs_Notes

بیاین باهم صادق باشیم 🥸

کدوم یکی از ما وقتی یه پکیج جدید نصب می‌کنیم،
واقعا میریم Bundle Size یا حجم نهایی‌ ای که قراره وارد پروژه کنه رو چک کنیم؟ 😶

همه‌چی خوبه…
تا وقتی که پروژه رو ران می‌کنی و یهو با خودت میگی :
داش این چرا اینقدر دیر لود میشه؟! 💀

و بعد تازه داستان شروع میشه 😵‍💫

همین سناریوهای دردناک باعث شد با experimental-analyze آشنا بشم توی Next.js.

و واقعا چیز خفنیه 👀

نه فقط میگه پروژه سنگینه،
دقیقا لو میده :

- کدوم Route داره باندل رو منفجر می‌کنه
- کدوم Package مقصره
- و این حجم دقیقا از کجا وارد پروژه شده

لطفاً قبل اینکه سرورهای بیچاره‌تون Knock Out بشن برید امتحانش کنید 😭😂

🔗 https://nextjs.org/docs/app/guides/package-bundling

#Labs_Inside
#Labs_Package

ظهر بخیر به اونایی که ☕️

هنوز کامل بیدار نشدن،
ولی از روی عادت لپ‌تاپ رو باز کردن 😅

یه سر به پروژه زدن...

یه سر به پیام‌های دیشب...

یه سر به تسک‌هایی که قرار بود فردا انجامشون بدن 😭

و حالا دارن به مانیتور نگاه می‌کنن و از خودشون می‌پرسن :

خب... امروز از کجا خرابکاری رو شروع کنیم؟ 😂

روزتون پر از باگ‌های کوچیک و کامیت‌های بزرگ ✌️

#Labs_Life

یکی از اشتباهات رایج در پروژه‌های next.js اینه که :
همه‌چیز داخل یک لایه فکر میشه.

مثلا =>
UI
data fetching
state management

همه رو میایم باهم میکس میکنیم و میزاریم توی فولدر app

نتیجه چیمیشه حالا =>
app در کوتاه‌ مدت کار می‌کنه، ولی هرچی پروژه مقیاس پذیرتر و بزرگ تر میشه

re-render غیرقابل کنترل
coupling بالا میره
و performance drift
برات مشکل ایجاد میکنه.

امروز چندتا از بهترین و استانداردترین ساختارهای پروژه های نکست که توی 3 لول دسته بندی میشن رو براتون کامل تفسیر و توضیح میدم.

ری‌اکشن بزن کلی مفاهیم جدید داریم 😉🤝

#Labs_Tips

بیاین ساختار فایل‌ها در Next.js را یک بار برای همیشه حل کنیم 👨‍💻
خیلی‌ها از همون روز اول هر چه دارن رو توی پوشه app/ میریزن. اما واقعیت اینه که سلیقه ما ساختار پروژه را مشخص نمی‌کنه، بلکه مقیاس (Scale) پروژه‌ست که تعیین می‌کند چطور باید کد بنویسیم.

🟢 پروژه‌های کوچک (MVP)
فقط: app, components, lib
سرعت بالا و مینیمال. اما اگر پروژه ناگهان رشد کند، این ساختار شکننده می‌شود.

🟡 پروژه‌های در حال رشد (Growth)
در اینجا باید بین UI و Logic خط بکشیم:
app, features, components, services, hooks, lib
کدها قابل نگهداری (maintainable) می‌شوند و اضافه کردن ویژگی جدید همه چیز را به هم نمی‌ریزد.

🔴 پروژه‌های سازمانی (Enterprise)
ورود به معماری‌های جدی مثل Domain-driven. پوشه app/ فقط برای مسیریابی (Routing) باقی می‌ماند:
app, modules, shared, services, infrastructure
مقیاس‌پذیری واقعی برای کار تیمی.

⚠️ حرف آخر:
برای یک پروژه کوچک ساختار سازمانی نچینید، و پروژه بزرگ را هم با ساختار MVP پیش نبرید. معماری باید مهندسی شود!

📚 لینک های زیر یه منبع کمکی هستن :
Next.js Routing Docs
Feature-Sliced Design
Patterns.dev

#Labs_Nextjs

این سری جوک هارو اگر دوست دارین با یه آتیش اعلام کنین 😂❤️

#Labs_fun

🚀 سری ۵ قسمتی معماری و ساختار در Next.js
🟢 پارت ۱ — شروع اشتباه

همه این حس رو می‌شناسیم؛ create-next-app رو می‌زنی و سریع چندتا صفحه بالا میاری. سرعت Next.js کیف م‌ده، ولی راستش... دقیقاً همین‌جا داری اولین خشت کج رو می‌ذاری!

کابوسِ پوشه‌ی app/
ذهن ما راحت‌ترین راه رو میره: "همه‌چی تو یه فایل!" یه page.tsx داری که هم API کال می‌کنه، هم useState داره، هم کل UI همونجاست. مرزی بین لاجیک و ظاهر نیست و با تغییر یه دکمه، کل صفحه می‌شکنه.

تله‌ای به اسم MVP
توجیه همیشگی : "فعلاً MVP می‌زنیم سریع بیاد بالا، بعداً ریفکتور می‌کنیم!"

اما اون "بعداً" هیچ‌وقت نمیاد! کدی که بدون فکر به Scale (بزرگ شدن) نوشته بشه، با اضافه‌شدن فیچر جدید یا نفر دوم به تیم قفل میشه. تو در واقع سریع نیستی، فقط داری «بدهی فنی» تولید می‌کنی.

👇 از الان قبل از استارت پروژه بعدی از خودت بپرس :
واقعاً دارم MVP می‌سازم، یا با توهمِ سرعت، یه بمب ساعتی کوک می‌کنم؟

#Labs_fiveStepToMasterInNextArchitecture

فردا میخایم این ابزارها و استک روی توی حوضه فرانت‌اند بکشیم بیرون ببینیم دقیقا چی هستن و کاربردشون چیه 😁

امشب هم به خوبی کدامون کامپایل شد؛ شب بخیر دولوپرای خفن 🩵🫂

آماده اید بریم سراغ اولین ابزار ؟ 🧐

اسکریپت run رو بزنید بیدارشید 😁

🚀 ۵ ابزار مدرن فرانت‌اند که باید بشناسید
دوران بیلد‌های طولانی و کدهای درهم گذشته است! برای سرعت و کیفیت بیشتر، این ۵ ابزار کلیدی را دریابید: 🛠✨

🌐 Next.js (خداحافظی با مشکلات سئو):
ری‌اکت خام در سئو و سرعت لود چالش دارد. نکست با رندر سمت سرور (SSR)، سایت شما را فوق‌سریع لود کرده و محبوب موتورهای جستجو می‌کند. 🚀🔍

⚡️ Vite 8 (سرعت نور):
خداحافظی با کندی باندلرها! سرور توسعه را در کسری از ثانیه بالا آورده و تغییرات را فوراً روی صفحه اعمال می‌کند. 🏎💨

🛡 TypeScript (پایان باگ‌های پنهان):
مثل کمربند ایمنی عمل کرده و ارورها را قبل از اجرای برنامه در ادیتور نشان می‌دهد. 🧠✅

📦 pnpm (نجات‌دهنده هارد):
برخلاف npm، پکیج‌ها را فقط یک‌بار ذخیره می‌کند. نتیجه؟ نصب فوق‌سریع و صرفه‌جویی شدید در فضای هارد. 💾📉

🎨 Tailwind CSS (استایل‌دهی سریع):
با کلاس‌های آماده مستقیماً درون HTML استایل دهید. سرعت طراحی بالا رفته و از شلوغی فایل‌های CSS جلوگیری می‌شود. 🖌🎯

📄 مستندات رسمی :
Next.js
vite8
TypeScript
pnpm
Tailwindcss

#Labs_ModernFrontendTools

با دوستانتون به اشتراک بزارین ، عصر پارت دوم رو داریم 😁

🚀 ۵ ابزار مدرن فرانت‌اند که باید بشناسید (پارت دوم)
✨ shadcn/ui (خداحافظی با کامپوننت‌های دست‌نویس):
شاد سی‌ان کلی کامپوننت خوش‌ساخت و زیبا داره که مستقیم میاد تو پروژه‌ات. کار باهاش راحته و دیگه وقتت رو تلف نمی‌کنی.

📖 Storybook (خونه‌ی امن کامپوننت‌ها):
کامپوننت‌ها رو وسط شلوغی پروژه نساز! بیارشون تو محیط ایزوله‌ی استوری‌بوک تا راحت تستشون کنی و مثل یه کاتالوگ داشته باشی.

🔄 TanStack Query (خداحافظی با دردسرهای useEffect)
: سروکله زدن با useEffect تمام شد! تن‌استک همه‌چیز رو حل می‌کنه: گرفتن داده، کش کردن و آپدیت. مدیریت داده سرور دیگه یه رویاست.

🐻 Zustand (استیت منجمنت بی‌دردسر):
خسته شدی از پیچیدگی ابزارهای قدیمی؟ زاستند کوچیک، سریع و سادست و کارهای استیت کلاینت رو بی‌دردسر انجام میده.

🛡 Zod (دیوار دفاعی داده‌ها):
نذار دیتای خراب وارد اپلیکیشنت بشه! زود مثل نگهبان سخت‌گیر مطمئن میشه ورودی‌ها همون شکلیه که انتظار داری. امنیت داده‌ها در زمان اجرا.

مستندات رسمی :
shadcn_ui
storybook
TanStack_query
zustand
zod

#Labs_ModernFrontendTools_Part2

مرسی بابت محبت‌هاتون برای اشتراک‌گذاری پست ها و ری‌اکشن ها ❤️

قابل توجه وایب کدینگ ها 😁

پ.ن: آف‌کورس که بچه‌های Labs وایب کدر نیستن 😌

git commit -m "Good night devs"