بخش زیر شامل یک بررسی کلی و سطح بالا از استراتژیهای رایج سازماندهی پوشهها در Next.js است. سادهترین نتیجهگیری این است که استراتژی مناسب برای خود و تیمتان را انتخاب کرده و در طول پروژه به آن پایبند و سازگار (Consistent) بمانید.
نکته کاربردی: در مثالهای زیر، از نام پوشههای
componentsوlibصرفاً به عنوان جایگاههای پیشفرض و عمومی استفاده شده است. این نامگذاریها هیچ اهمیت یا معنای ساختاری خاصی برای فریمورک Next.js ندارند و شما میتوانید در پروژههای خود از نامهای دیگری مثلui،utils،hooks،stylesو... استفاده کنید.
appدر این استراتژی، تمام کدهای اصلی برنامه در پوشههای مشترک در ریشه پروژه (Project Root) ذخیره میشوند و پوشه app صرفاً و به صورت خالص برای اهداف مسیردهی (Routing) حفظ میشود.
├── components/ (کامپوننتهای عمومی در ریشه)
├── lib/ (کدهای کمکی در ریشه)
└── app/
├── layout.tsx
└── page.tsx
appدر این روش، تمام کدهای مشترک برنامه در پوشههای اشتراکی، اما این بار در بالاترین سطح از دایرکتوری app (نه ریشه پروژه) ذخیره و مدیریت میشوند.
└── app/
├── _components/ (کامپوننتهای عمومی داخلی)
├── _lib/ (کدهای کمکی داخلی)
├── layout.tsx
└── page.tsx
این استراتژی کدهای اشتراکی و جهانی را در ریشه پوشه app نگهداری میکند، اما کدهای اختصاصیتر را به درون همان بخشهای مسیر (Route Segments) منتقل میکند که از آنها استفاده میکنند.
└── app/
├── _components/ (کامپوننتهای عمومی کل سایت)
└── dashboard/
├── _components/ (کامپوننتهای اختصاصی داشبورد)
├── layout.tsx
└── page.tsx
برای دستهبندی مسیرهای مرتبط بدون دستکاری در ساختار URL، یک گروه مسیر با پرانتز ایجاد کنید. نام این پوشهها از آدرس سایت حذف میشود (مانند (marketing) یا (shop)).
شما میتوانید برای هر کدام از این گروهها، با قرار دادن یک فایل layout.js اختصاصی در پوشهشان، ظاهر و ساختار کاملاً متفاوتی خلق کنید؛ هرچند که در نهایت تمام این صفحات در یک سطح از آدرس اینترنتی قرار دارند.
└── app/
├── (marketing)/
│ ├── layout.tsx (لایه اختصاصی بخش مارکتینگ)
│ └── about/page.tsx ──> قابل دسترسی در /about
└── (shop)/
├── layout.tsx (لایه اختصاصی بخش فروشگاه)
└── cart/page.tsx ──> قابل دسترسی در /cart
اگر میخواهید یک لایه ساختاری (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 (این صفحه لودینگ بالا را فعال نمیکند)
برای ایجاد چندین لایه ریشه کاملاً مستقل، باید فایل layout.js اصلی و سطح بالا را از ریشه پوشه app حذف کنید و در عوض، داخل هر کدام از گروههای مسیر خود یک فایل layout.js جداگانه بسازید.
این تکنیک برای تفکیک بخشهایی از برنامه که قالب، تجربه کاربری یا استایلهای کاملاً متفاوتی دارند (مانند بخش پنل کاربری در مقابل وبلاگ عمومی) فوقالعاده کاربردی است.
قانون الزامی: از آنجا که لایه ریشه اصلی حذف شده است، تگهای پایهای
<html>و<body>باید به تکتک لایههای ریشه جدید درون گروهها اضافه شوند.
└── app/
├── (marketing)/
│ └── layout.tsx (دارای تگهای html و body اختصاصی مارکتینگ)
└── (shop)/
└── layout.tsx (دارای تگهای html و body اختصاصی فروشگاه)
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app