مثال ساختار های مختلف Next Js

بخش زیر شامل یک بررسی کلی و سطح بالا از استراتژی‌های رایج سازماندهی پوشه‌ها در Next.js است. ساده‌ترین نتیجه‌گیری این است که استراتژی مناسب برای خود و تیمتان را انتخاب کرده و در طول پروژه به آن پایبند و سازگار (Consistent) بمانید.

نکته کاربردی: در مثال‌های زیر، از نام پوشه‌های components و lib صرفاً به عنوان جایگاه‌های پیش‌فرض و عمومی استفاده شده است. این نام‌گذاری‌ها هیچ اهمیت یا معنای ساختاری خاصی برای فریم‌ورک Next.js ندارند و شما می‌توانید در پروژه‌های خود از نام‌های دیگری مثل ui، utils، hooks، styles و... استفاده کنید.

الگوهای سازماندهی فایل‌های پروژه (Project Organization Strategies)

۱. نگهداری فایل‌های پروژه خارج از پوشه app

در این استراتژی، تمام کدهای اصلی برنامه در پوشه‌های مشترک در ریشه پروژه (Project Root) ذخیره می‌شوند و پوشه app صرفاً و به صورت خالص برای اهداف مسیردهی (Routing) حفظ می‌شود.

├── components/   (کامپوننت‌های عمومی در ریشه)
├── lib/          (کدهای کمکی در ریشه)
└── app/
    ├── layout.tsx
    └── page.tsx

۲. نگهداری فایل‌های پروژه در پوشه‌های سطح بالا داخل app

در این روش، تمام کدهای مشترک برنامه در پوشه‌های اشتراکی، اما این بار در بالاترین سطح از دایرکتوری app (نه ریشه پروژه) ذخیره و مدیریت می‌شوند.

└── app/
    ├── _components/ (کامپوننت‌های عمومی داخلی)
    ├── _lib/        (کدهای کمکی داخلی)
    ├── layout.tsx
    └── page.tsx

۳. تفکیک فایل‌های پروژه بر اساس ویژگی یا مسیر (Split by Feature)

این استراتژی کدهای اشتراکی و جهانی را در ریشه پوشه app نگهداری می‌کند، اما کدهای اختصاصی‌تر را به درون همان بخش‌های مسیر (Route Segments) منتقل می‌کند که از آن‌ها استفاده می‌کنند.

└── app/
    ├── _components/   (کامپوننت‌های عمومی کل سایت)
    └── dashboard/
        ├── _components/ (کامپوننت‌های اختصاصی داشبورد)
        ├── layout.tsx
        └── page.tsx

الگوهای پیشرفته استفاده از گروه‌های مسیر (Route Groups)

۱. سازماندهی مسیرها بدون تغییر در آدرس مرورگر

برای دسته‌بندی مسیرهای مرتبط بدون دستکاری در ساختار URL، یک گروه مسیر با پرانتز ایجاد کنید. نام این پوشه‌ها از آدرس سایت حذف می‌شود (مانند (marketing) یا (shop)).

شما می‌توانید برای هر کدام از این گروه‌ها، با قرار دادن یک فایل layout.js اختصاصی در پوشه‌شان، ظاهر و ساختار کاملاً متفاوتی خلق کنید؛ هرچند که در نهایت تمام این صفحات در یک سطح از آدرس اینترنتی قرار دارند.

└── app/
    ├── (marketing)/
    │   ├── layout.tsx (لایه‌ اختصاصی بخش مارکتینگ)
    │   └── about/page.tsx ──> قابل دسترسی در /about
    └── (shop)/
        ├── layout.tsx (لایه‌ اختصاصی بخش فروشگاه)
        └── cart/page.tsx  ──> قابل دسترسی در /cart

۲. اعمال لایه مشترک به یک زیرمجموعه خاص (Opting-in Layout)

اگر می‌خواهید یک لایه ساختاری (Layout) را فقط به چند صفحه خاص اعمال کنید، یک گروه مسیر جدید (مثلاً (shop)) بسازید و صفحات هم‌نیاز (مثل account و cart) را به داخل آن منتقل کنید. سایر صفحات خارج از این گروه (مثل checkout) این لایه را دریافت نخواهند کرد.

└── app/
    ├── (shop)/
    │   ├── layout.tsx (فقط به صفحات داخل این پوشه اعمال می‌شود)
    │   ├── account/page.tsx
    │   └── cart/page.tsx
    └── checkout/page.tsx (این صفحه لایه بالا را دریافت نمی‌کند)

۳. اعمال وضعیت بارگذاری اختصاصی روی یک مسیر خاص

اگر می‌خواهید یک انیمیشن لودینگ یا اسکلتون (loading.js) را فقط به یک صفحه خاص اعمال کنید بدون اینکه بقیه صفحات هم‌سطح تحت تأثیر قرار بگیرند، یک گروه مسیر جدید (مثلاً (overview)) ایجاد کرده و فایل loading.tsx را به همراه صفحه مدنظر به داخل آن منتقل کنید.

با این ترفند، لودینگ تعریف شده فقط برای صفحه dashboard/overview اجرا می‌شود و سایر صفحات بخش داشبورد بدون مواجهه با این لودینگ کار خواهند کرد.

└── app/
    └── dashboard/
        ├── (overview)/
        │   ├── loading.tsx (فقط برای صفحه اصلی داشبورد)
        │   └── page.tsx
        └── settings/page.tsx (این صفحه لودینگ بالا را فعال نمی‌کند)

۴. ساخت چندین لایه ریشه مجزا (Multiple Root Layouts)

برای ایجاد چندین لایه ریشه کاملاً مستقل، باید فایل layout.js اصلی و سطح بالا را از ریشه پوشه app حذف کنید و در عوض، داخل هر کدام از گروه‌های مسیر خود یک فایل layout.js جداگانه بسازید.

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

قانون الزامی: از آنجا که لایه ریشه اصلی حذف شده است، تگ‌های پایه‌ای <html> و <body> باید به تک‌تک لایه‌های ریشه جدید درون گروه‌ها اضافه شوند.

└── app/
    ├── (marketing)/
    │   └── layout.tsx (دارای تگ‌های html و body اختصاصی مارکتینگ)
    └── (shop)/
        └── layout.tsx (دارای تگ‌های html و body اختصاصی فروشگاه)