👋 Welcome to Foad Labs

اینجا قراره درباره:

- Frontend Engineering
- React & Next.js
- UI/UX Details
- Modern Web Development
- و روند ساخت پروژه‌ها محتوا بذارم.

نه صرفاً آموزش‌های تکراری،
بیشتر چیزایی که خودم واقعاً موقع build کردن پروژه‌ها باهاشون درگیر میشم.

اگر به دنیای مدرن فرانت‌اند علاقه داری، احتمالاً اینجا رو دوست خواهی داشت ⚡️

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

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

- روند طراحی
- جزئیات 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 رو بزنید بیدارشید 😁