🚀 سری ۵ قسمتی: معماری‌های کلاس جهانی در Next.js 🟣
پارت ۵ — ساختار Monorepo (Turborepo)

فرض کن رسیدی به جایی که یه پنل مدیریت داری، یه سایت اصلی برای مشتری‌ها، و یه سایت دیگه برای وبلاگ.
هر سه تا هم با Next.js نوشته شدن. اگه بخوای دکمه‌های سایت رو عوض کنی، باید بری تو هر سه تا پروژه دستی کد رو کپی‌پیست کنی؟ قطعا نه! کابوس میشه.

اینجا مونو‌ریپو (با ابزارهایی مثل Turborepo یا Nx) میاد وسط. تو این مدل، تمام اپلیکیشن‌های تو داخل یک ریپازیتوری (پوشه اصلی) قرار میگیرن. یه پوشه مشترک میسازی برای کامپوننت‌های UI یا هوک‌های مشترک، و همه اپلیکیشن‌ها از همون یدونه استفاده می‌کنن. سرعت توسعه و بیلد گرفتن تو این روش فوق‌العاده بالاست.

ساختار جذاب یه مونو‌ریپو :

my-company-monorepo/
├── apps/                  # اپلیکیشن‌های اصلی تو
│   ├── web/               # سایت اصلی (Next.js)
│   ├── admin-panel/       # داشبورد مدیریت (Next.js)
│   └── docs/              # سایت داکیومنت‌ها
└── packages/              # پکیج‌های مشترکی که خودت ساختی
    ├── ui-kit/            # دیزاین سیستم مشترک (دکمه‌ها، مودال‌ها)
    ├── typescript-config/ # تنظیمات مشترک TS
    └── eslint-config/     # تنظیمات مشترک لینتر

#Labs_Next5Architecture

مینی سری 5 قسمته معماری‌های کلاس جهانی next.js‌مون به پایان رسید 💣

مینی سری بعدی چی باشه ؟ شما بگین 🧐❤️

امروز هم پایه JS رو مرور کردیم و هم معماری Next.js رو حرفه‌ای‌تر چیدیم.

کدوم بخش امروز براتون چالش‌برانگیزتر بود؟ تو کامنت‌ها بنویسید.
شبتون خوش و کدتون بدون باگ! ✌️🌌

امروز قراره روی یه مهارت نرم شیفت کنیم که خیلی از برنامه‌نویس‌ها ندارنش 🤔
هنرِ پرزنت کردن و فروختنِ مهارت! 🎤🚀

خیلی‌ها کدهای فوق‌العاده‌ای می‌نویسن 💻، اما چون نمی‌تونن خودشون رو درست پرزنت کنن، پروژه‌های خوب رو از دست میدن 💸📉

یه واقعیت تلخ هست که 📉
—— بهترین کدهای دنیا اگه درست پرزنت نشن، هیچ‌وقت تبدیل به قرارداد و پول نمیشن 💸 ——

ما برنامه‌نویس‌ها عادت کردیم همه‌چیز رو تو ترمینال و ادیتور ببینیم 💻. اما کارفرما (مخصوصا کارفرماهای بین‌المللی) کدهای ما رو نمیبینه 👀
اون رزومه، پورتفولیو، نحوه معرفی و خروجیِ کارمون رو میبینه 📄✨.

امروز قراره یه سوییچ بزنیم و از مود کدنویس دربیایم 🔄 و به مود یه بیزینس‌من / ارائه‌دهنده حرفه‌ای در بیایم 🚀🤝

فرض کنین رفتین تو یه گروه تلگرامیِ تخصصی (یا لینکدین) و میخواین خودتون رو برای گرفتن پروژه معرفی کنین ، چطوری شروع میکنین شما ❓❓

براساس تجربه 90 درصد افراد یه همچین متنی رو میفرستن =>

سلام، من برنامه‌نویس فرانت‌اند هستم. ری‌اکت و نکست‌جی‌اس بلدم. اگه پروژه سایت داشتید در خدمتم.

⚠️ که دقیقا میشین یکی از هزاران نفری که هیچ فرقی باهم ندارن.

در صورتی که پیش رفتن با این فرمول میتونه یه تفاوت اساسی ایجاد کنه =>
❗️ [تخصص] + [ابزارها] + [ارزشی که خلق می‌کنی] ❗️

سلام، من توسعه‌دهنده مدرن فرانت‌اند هستم و تمرکزم روی خلق تجربه‌های کاربری مینیمال و پرسرعت با Next.js و TypeScript است. تخصص من اینه که لود اولیه سایت رو به زیر ۱ ثانیه برسونم تا هم سئوی سایتتون بهینه بشه و هم نرخ تبدیل مشتریتون بالا بره. برای دیدن نمونه کارهام می‌تونید به سایتم سر بزنید.
لینکش : .....

⁉️ خودتونو جای کارفرما جا بزنین و تصور کنین اگر یه پروژه داشته باشین چند درصد احتمال داشت با اولی پروژه رو بدین و چند درصد دومی ؟؟
با صداقت توی کامنت‌ها بگین

💣 تکنیک Show, Don't Tell ( نشونشون بده بجای صحبت کردن )

یکی از مهم‌ترین تکنیک‌های پرزنت کردن، تکنیک اثباته.
بزرگ‌ترین اشتباه تو رزومه اینه که از کلمات کلیشه‌ای مثل مسلط به توسعه وب یا متخصص سئو استفاده کنیم.

در صورتی که وقتی حرف از دستاوردهای واقعی خودمون بزنیم مثل این مثال =>

❌ به جای اینکه بگی من می‌تونم سایت‌های شرکتی رو با نکست‌جی‌اس بیارم بالا
✅ بگو : توسعه و بهینه‌سازیِ وب‌سایت [نوع پروژه] با Next.js، رسیدن به رتبه ۱ گوگل در کلمات کلیدی هدف، و کاهش زمان لود اولیه سایت به زیر ۱ ثانیه

همین یدونه جمله مثل بمب میترکونه،
توی رزومتون از اعداد و ارقام و نتایجی که دادن استفاده کنید، مردم به اعداد بیشتر از کلمات اعتماد میکنن 🤝

غروبتون بخیر رفقا ☕️💻

یه بحث داغ برای همین الان🔥
همیشه یکی از بزرگترین دغدغه‌های ما تو پروژه‌های سطح بالا، رسوندن زمان لود اولیه سایت (Initial Load) به زیر ۱ ثانیه است. این عدد تو پروژه‌های واقعی برای سئو و نرخ تبدیلِ کارفرما معجزه می‌کنه.
حالا فرض کنید یه پروژه Next.js (یا ریکت) اومده زیر دستتون که لود اولیه‌اش ۳ تا ۴ ثانیه طول می‌کشه. اولین قدمی که برای دیباگ و بهینه‌سازی برمی‌دارید چیه؟

۱. اول می‌رید سراغ بهینه‌سازی Assetها (حجم عکس‌ها، فرمت WebP، فونت‌ها)؟
۲. استراتژی رندرینگ (SSR vs SSG) رو تغییر میدین؟
3. باندل سایز جاوااسکریپت (Bundle Size) و پکیج‌های سنگینِ اضافی رو چک می‌کنید؟
۴. مستقیم میرید سراغ کشینگِ سرور و تنظیمات CDN؟

تو کامنت‌ها برام بنویسید اولویت اولتون کدومه و چرا.
امشب نظراتتون رو میخونم و فردا به عنوان کسی که بارها سایت‌ها رو به زیر یک ثانیه رسونده، تجربیات و راه‌حلِ اصلی خودم رو براتون می‌شکافم! 👇

آخر هفتتون رو چطور شروع کردین
من که با داکیومنت خوندن 🫪

بعد از دو روز

انشالا از شنبه شروع میکنیم

صبح مهندسین آینده بخیر و پر کد باشه ☕️💻

همونطور که قولشو داده بودم
امروز میخایم یکم از کد زدن و تریک‌ها فاصله بگیریم و بریم سراغ مباحث معماری و دیزاین سیستم‌ در مقیاس جهانی

پس ....

اولین قهوه رو بریزین که روزِ سنگین و به‌ شدت جذابی در پیش داریم...

☝🏻 قدم اول
خیلی‌ها فکر می‌کنن دیزاین سیستم یعنی همون فایل فیگما که طراح بهمون میده. اما تو دنیای مهندسی نرم‌افزار، دیزاین سیستم خودش یک "محصول" است که به محصولات دیگر سرویس میده!
حالا این یعنی چی دقیقا؟ 🤔

دیزاین سیستم چیست؟
🎨 مجموعه‌ای یکپارچه از عناصر رابط کاربری (UI) قابل استفاده مجدد هست که تیم‌ها برای ساخت محصولاتشون از اون‌ها استفاده میکنن تا یک تجربه کاربری (UX) کاملا سازگار و استاندارد خلق کنن.

مثلا فرض کنین توی شرکتی کار میکنین که ۳ تا پروژه مختلف داره :
۱. سایت اصلی (Landing Page)
۲. پنل ادمین
۳. داشبورد مشتریان

❌ بدون دیزاین سیستم : شما باید کدِ یه دکمه یا فرم ساده رو حداقل ۳ بار توی این پروژه‌ها تکرار کنید! 🤦‍♂️
✅ با دیزاین سیستم : بدون هیچ تکرار کدی، همه‌چیز از یک منبع مشترک فراخوانی میشه

import { Button } from '@company/design-system'

در واقع این دیزاین سیستم به عنوان یه مرجع حقیقی (Single Source of Truth) برای پروژه‌های شرکت عمل می‌کنه 🎯

حالا جادوی اصلی کجاست؟ برای مثال، شرکت ری‌برند (Re-brand) میکنه و تصمیم میگیره رنگ اصلی برند و تمام پروژه‌هاش رو به «آبی» تغییر بده اگه دیزاین سیستم نداشته باشی، باید بری هزاران فایل رو تو پروژه‌های مختلف پیدا کنی و دستی تغییر بدی. اما با دیزاین سیستم، فقط کافیه رنگ رو توی همون کتابخونه‌ی مرجع عوض کنی؛ با همین یک تغییر، رنگ تمام پروژه‌های شرکت به صورت یکپارچه و خودکار آپدیت میشه ⚡️😎

☝🏻 قدم دوم
برای درک عمیق دیزاین سیستم، باید با معماری اتمیک (Atomic Design) آشنا بشین یکی از معروف‌ترین و استانداردترین روش‌ها تو دنیای فرانت‌اند بحساب میاد ⚛️
توی این متدولوژی، ما با رابط کاربری (UI) دقیقاً مثل علم شیمی برخورد میکنیم و اون رو به ۵ سطحِ مختلف تقسیم می‌کنیم:

۱. 🔴 اتم‌ها (Atoms) : کوچک‌ترین اجزای غیرقابل تجزیه! مثل یک دکمه (Button)، یک تگ اینپوت یا یک آیکون ساده.
۲. 🧬 مولکول‌ها (Molecules) : ترکیب چند اتم با هم. (مثلا: یک لیبل + یک اینپوت + یک دکمه = ساخت یک فرم جستجوی ساده).
3. 🦠 ارگانیسم‌ها (Organisms) : ترکیبِ مولکول‌ها و اتم‌ها که بخش‌های مستقل و پیچیده‌تری می‌سازن. (مثل هدر سایت، فوتر، یا یک کارتِ محصول کامل).
۴. 🧩 تمپلیت‌ها (Templates) : ساختار و لی‌آوت (Layout) کلی صفحه، اما به صورت خام و بدون دیتای واقعی.
۵. 🖼 صفحات (Pages) : مرحله‌ی نهایی! همون تمپلیت‌ها هستن که حالا با دیتای واقعیِ API پر شدن و کاربر اون‌ها رو می‌بینه.

میتونید اینکه چرا این دیزاین سیستم از علم شیمی ایده گرفته رو از وبلاگ Brad Frost سازنده این دیزاین سیستم بخونین : لینکش

✨ نتیجه‌ی این سبک کدنویسی :
وقتی با این ذهنیت کامپوننت‌هاتون رو می‌سازین، دیگه هیچ کُدِ کثیف و درهم‌تنیده‌ای ندارین. هر قطعه از سایت جای مشخصِ خودش رو داره و مدیریت پروژه‌های بزرگ به شدت راحت و لذت‌بخش میشه 👌😎

☝🏻 قدم سوم
کالبدشکافی غول‌های دیزاین سیستم در جهان 🌍
کدوم شرکت‌ها استانداردهای طراحی و توسعه رو در دنیا تعیین می‌کنن؟ بیاید ۴ تا از بزرگترین دیزاین سیستم‌های جهان رو زیر ذره‌بین ببریم 👇

🔹 1. Material Design (گوگل) :
معروف‌ترین سیستم بر پایه فیزیک دنیای واقعی. تمرکز اصلی متریال روی سایه‌ها (Shadows)، عمق و انیمیشن‌های واکنش‌گراست. خیلی ساختاریافته است، اما یه ایراد بزرگ داره: به شدت ظاهر پروژه‌تون رو "گوگلی" می‌کنه و کاستوم کردنش واقعا سخته

🔹 2. Human Interface Guidelines یا HIG (اپل) :
قانون اساسیِ اپل! تمرکز عجیب و غریب روی مینیمالیسم، بلار (Blur) کردن پس‌زمینه و تایپوگرافیِ بی‌نقص. شعار اپل اینه :
کاربر نباید گیج بشه، همه‌چیز باید در ساده‌ترین و زیباترین حالتِ ممکن باشه.

🔹 3. Fluent Design (مایکروسافت) :
سیستمی که ویندوز ۱۱ و محصولات جدید مایکروسافت بر پایه‌اش ساخته شدن.
تمرکز این سیستم روی نور، عمق و متریال جذابی به اسم Acrylic (شفافیت شیشه‌ای) هست.

🔹 4. Radix UI / Shadcn (محبوب‌ترین در اکوسیستم فرانت‌اند مدرن) :
برخلاف متریال و بقیه، اینا Headless هستن!
یعنی چی؟ یعنی فقط منطقِ کامپوننت (مثل باز و بسته شدن مودال یا استانداردهای دسترسی‌پذیری) رو به شما میدن، اما هیچ استایلِ از پیش تعیین شده‌ای ندارن! این یعنی شما نهایتِ کنترل رو دارین تا دیزاین سیستمِ اختصاصی و حرفه‌ای برند خودتون رو صفر تا صد با Tailwind CSS بسازین.
خود Shadcn به صورت دیفالت 5 تا رنگ اصلی داره که شما موقع نصب انتخاب میکنین اما بعد از نصب هم میتونین کامل رنگ اصلی و همچی رو تغییر بدین و این یعنی یه دیزاین سیستم به شدت قابل کاستوم که همچی رو خودت تعیین کنی

شما تو پروژه‌هاتون ترجیح میدین از سیستم‌های آماده (مثل Material/Ant Design) استفاده کنید، یا با ابزارهایی مثل Shadcn دیزاین سیستم اختصاصی بسازین؟
نامرده هرکی تو کامنت‌ها ننویسه 😁

☝🏻 قدم چهارم
دیزاین توکن‌ها (Design Tokens) - زبان مشترک طراح و برنامه‌نویس 🤝
تو دیزاین سیستم‌های حرفه‌ای، ما چیزی به اسم کد رنگِ هاردکد شده (مثلاً #bd9855) یا سایزهای ثابت (مثل 16px) تو کدهامون نداریم! به جاش از توکن استفاده می‌کنیم 🎨

توکن چیه؟ متغیرهای استاندارد شده‌ای هستن که مقادیر دیزاین رو تو خودشون نگه میدارن ، یعنی طراح تو فیگما به جای اینکه به شما بگه این دکمه طلاییه، یه متغیر تعریف می‌کنه
color-primary-brand = #bd9855
و شما هم تو کدتون (مثلا تو tailwind.config) دقیقا همون نام رو می‌خونین و به کامپوننت‌هاتون میدین

چرا اینقدر حیاتیه؟ فرض کنین فردا برندینگِ شرکت کلا عوض شد. اگه توکن نداشته باشین باید تو ۱۰۰۰ تا فایل بگردین و رنگ‌ها رو عوض کنین.
اما با توکن، شما حتی یک خط از کدهای کامپوننت‌هاتون رو دست نمیزنین!
فقط مقدارِ همون یک توکن آپدیت میشه و کل سیستم به صورت یکپارچه تغییر رنگ میده. این یعنی مهندسیِ نرم‌افزار ⚡️

☝🏻 قدم پنجم
استوری‌بوک (Storybook) - ویترینِ دیزاین سیستم شما 📘
حالا که اتم‌ها و مولکول‌ها رو با توکن‌ها ساختیم، این کامپوننت‌ها کجا باید نگهداری بشن؟ از کجا بدونیم چه دکمه‌ها و فرم‌هایی قبلاً ساخته شده که دوباره کدشون رو ننویسیم؟
جواب ابزاری به اسم Storybook هست! 🛠 استوری‌بوک یه محیط کاملاً ایزوله و مستقل (بیرون از پروژه اصلی) براتون می‌سازه که مثل یه کاتالوگ عمل می‌کنه.

✨ جادوی استوری‌بوک چیه؟ شما تمام کامپوننت‌هاتون رو اونجا لیست می‌کنین، کارفرما یا بقیه اعضای تیم می‌تونن برن اونجا، با فرم‌ها تعامل داشته باشن و استیت‌های مختلف رو تست کنن. مثلاً می‌تونن حالت بارگذاری (Loading State) بصریِ دکمه‌ها رو در لحظه کلیک ببینن (که همون‌طور که می‌دونید برای UX خیلی اصولی‌تر از یه تاخیرِ ساده یا Debounce تو عملکرده) و دقیقا درک کنن سیستم چطور به کاربر فیدبک میده ⏳

اگه می‌خواید به عنوان یک فرانت‌اند دولوپرِ ارشد (Senior) رزومه بدید، توانایی داکیومنت کردن دیزاین سیستم با Storybook یکی از مهم‌ترین برگ برنده‌های شماست 💥

چندتا مقاله برای بهتر مفهوم و ساختار دیزاین سیستم ها همراه با مثال 🚀
https://www.smashingmagazine.com/2025/11/design-system-culture/
https://www.smashingmagazine.com/2022/02/recipe-good-design-system/
https://ux-ui-design.de/was-ist-atomic-design/
https://ux-ui-design.de/design-token/