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

مقدمه

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

پوشه‌های سطح بالا

• app/ – مسیرها با استفاده از App Router
• pages/ – مسیرهای قدیمی با Pages Router
• public/ – فایل‌های استاتیک مانند تصاویر و فونت‌ها
• src/ – پوشه اختیاری برای کدهای منبع اپلیکیشن

فایل‌های سطح بالا

• next.config.js – تنظیمات Next.js
• package.json – وابستگی‌ها و اسکریپت‌های پروژه
• .env و نسخه‌های محلی و تولیدی آن – متغیرهای محیطی
• tsconfig.json / jsconfig.json – تنظیمات TypeScript یا JavaScript
• eslint.config.mjs – تنظیمات ESLint
• proxy.ts و instrumentation.ts – ابزارهای اختیاری برای پراکسی و مانیتورینگ

فایل‌های مسیریابی

هر پوشه مسیر خاصی را تعریف می‌کند. برای عمومی شدن مسیر، باید فایل page.tsx یا route.ts در آن پوشه وجود داشته باشد:

• layout.tsx – رابط مشترک مانند هدر یا فوتر
• page.tsx – محتوای اصلی مسیر
• loading.tsx – رابط بارگذاری اولیه
• error.tsx – مدیریت خطا
• not-found.tsx – صفحه ۴۰۴
• route.ts – مسیرهای API
• template.tsx – لایه‌های قابل بازسازی

مسیرهای تو در تو

پوشه‌ها مسیرهای URL را تعریف می‌کنند. تو در تو بودن پوشه‌ها باعث تو در تو شدن مسیرها می‌شود:

app/layout.tsx → لایه ریشه برای همه مسیرها  
app/blog/layout.tsx → لایه برای /blog و زیرمجموعه‌ها  
app/blog/page.tsx → مسیر /blog  
app/blog/authors/page.tsx → مسیر /blog/authors

مسیرهای پویا

• [slug] – پارامتر تکی (مثلاً /blog/my-post)
• [...slug] – دریافت همه بخش‌ها (مثلاً /shop/clothing/shirts)
• [[...slug]] – دریافت اختیاری همه بخش‌ها (مثلاً /docs یا /docs/intro)

گروه‌بندی مسیرها و پوشه‌های خصوصی

• (group) – گروه‌بندی منطقی بدون تأثیر در URL
• _folder – پوشه‌های خصوصی برای نگهداری فایل‌های غیر قابل مسیریابی

مسیرهای موازی و رهگیری‌شده

برای پیاده‌سازی رابط‌های پیچیده مانند لایه‌های slot یا مودال‌ها:

• @folder – slot نام‌گذاری‌شده
• (.)folder – رهگیری مسیر هم‌سطح
• (..)folder – رهگیری مسیر والد
• (...) – رهگیری از ریشه

فایل‌های متادیتا

• آیکون‌ها: favicon.ico، icon.png، apple-icon.png
• Open Graph: opengraph-image.png یا opengraph-image.tsx
• Twitter: twitter-image.png یا twitter-image.tsx
• SEO: sitemap.xml، robots.txt

سلسله‌مراتب کامپوننت‌ها

فایل‌های خاص در ترتیب مشخصی رندر می‌شوند:

1. layout.tsx
2. template.tsx
3. error.tsx
4. loading.tsx
5. not-found.tsx
6. page.tsx

این کامپوننت‌ها به‌صورت تو در تو رندر می‌شوند و مسیرهای فرزند را در مسیرهای والد قرار می‌دهند.

بهترین روش‌های سازمان‌دهی فایل‌ها

فایل‌ها را می‌توان درون پوشه‌های مسیر قرار داد بدون اینکه قابل دسترسی عمومی شوند، مگر اینکه فایل page.tsx یا route.ts وجود داشته باشد. این روش امکان نگهداری کامپوننت‌ها، ابزارها و استایل‌ها در نزدیکی محل استفاده را فراهم می‌کند.

جمع‌بندی

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