سازمان‌دهی مسیرها و فایل‌ها در Next.js – پوشه‌های خصوصی، گروه‌های مسیر و ساختار پروژه

پوشه‌های خصوصی در Next.js

برای ایجاد پوشه‌های خصوصی، کافی است نام پوشه را با علامت زیرخط (_) شروع کنید. این پوشه‌ها و زیرپوشه‌هایشان از سیستم مسیریابی Next.js خارج می‌شوند و به‌عنوان جزئیات داخلی در نظر گرفته می‌شوند:

app/blog/_components/Post.tsx  
app/blog/_lib/data.ts

اگرچه Next.js به‌طور پیش‌فرض اجازهٔ colocation امن فایل‌ها را در پوشه app می‌دهد، استفاده از پوشه‌های خصوصی مزایای زیر را دارد:

جداسازی منطق UI از منطق مسیریابی
سازمان‌دهی منسجم فایل‌های داخلی در پروژه
مرتب‌سازی بهتر در ویرایشگر کد
جلوگیری از تداخل نام با کنوانسیون‌های آیندهٔ Next.js

گروه‌های مسیر (Route Groups)

برای سازمان‌دهی مسیرها بدون تأثیر در URL، می‌توان پوشه‌ها را داخل پرانتز قرار داد. این پوشه‌ها در مسیر URL نمایش داده نمی‌شوند:

app/(marketing)/page.tsx → /  
app/(shop)/cart/page.tsx → /cart

مزایای استفاده از گروه‌های مسیر:

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

استفاده از پوشه src

Next.js اجازه می‌دهد کدهای اپلیکیشن (از جمله app) را داخل پوشهٔ اختیاری src قرار دهید. این کار باعث جداسازی کد اپلیکیشن از فایل‌های پیکربندی پروژه می‌شود:

src/app/page.tsx  
src/components/Button.tsx

استراتژی‌های ساختار پروژه

در ادامه چند روش رایج برای سازمان‌دهی فایل‌ها در پروژه‌های Next.js معرفی می‌شود:

ذخیره فایل‌ها خارج از app: مسیرهای عمومی در app و کدهای اشتراکی در ریشه پروژه
ذخیره فایل‌ها داخل app: همهٔ فایل‌ها در پوشه‌های سطح بالای app
تقسیم فایل‌ها بر اساس ویژگی یا مسیر: کدهای عمومی در ریشه app و کدهای خاص در پوشه‌های مسیر مربوطه

نمونه‌هایی از گروه‌بندی و لایه‌بندی

گروه‌بندی مسیرها بدون تغییر URL: استفاده از پوشه‌هایی مانند (marketing) یا (shop)
ایجاد چند لایهٔ ریشه: حذف layout.js سطح بالا و افزودن layout.js در هر گروه مسیر
اعمال لایه فقط به مسیرهای خاص: انتقال مسیرهایی مانند account و cart به گروه (shop)
اعمال skeleton بارگذاری فقط به یک مسیر: قرار دادن loading.tsx در گروه مسیر (overview)

جمع‌بندی

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