ساختار پوشههای قالب ما بهطور نزدیک به کنوانسیونهای رسمی ساختار مسیریاب اپ Next.js پیروی میکند. در این بخش، ساختار پوشه پایه و همه چیزهایی که برای راهاندازی قالب نیاز دارید را پیدا خواهید کرد. هر دو نسخه دمو و استارتر ساختار یکسانی دارند، به جز اینکه نسخه استارتر تعداد کمتری فایل و پوشه نسبت به نسخه دمو خواهد داشت، زیرا آنها در نسخه استارتر لازم نیستند.
زیر یک نمودار شماتیک از ساختار دایرکتوری است:
├── messages # پیامهای محلی
| ├── en.json # فایل JSON محلی
| └── ... # سایر فایلهای JSON محلی
├── public # منبع استاتیک
| ├── img # تصاویر
| ├── data # دادههای استاتیک
| └── ... # سایر فایلهای استاتیک
├── src
│ ├── @types # فایلهای نوع که در سراسر قالب به اشتراک گذاشته میشوند
│ │ └── ...
│ ├── app # دایرکتوری اصلی برنامه برای مسیریاب اپ Next.js
│ │ ├── (auth-pages) # گروه مسیرها برای صفحات احراز هویت
│ │ ├── └── ... # صفحات احراز هویت
│ │ ├── └── layout.tsx # طرح پایه برای صفحات احراز هویت
│ │ ├── (protected-pages) # گروه مسیرها برای صفحات که احراز هویت نیاز دارند
│ │ ├── ├── ... # صفحات محافظت شده
│ │ ├── └── layout.tsx # طرح ریشه برای صفحات محافظت شده
│ │ ├── (public-pages) # گروه مسیرها برای صفحات عمومی
│ │ ├── └── ... # صفحات عمومی
│ │ ├── api # نقطه پایانی API
│ │ | └── ... # مسیر و فایلهای API
│ │ favicon.ico # فاویکون
│ │ layout.tsx # طرح ریشه
│ │ not-found.tsx # صفحه خالی برای 404
│ │ page.tsx # صفحه ورود
| ├── assets # منبع استاتیک برنامه
│ │ ├── maps # متادیتای نقشه
│ │ ├── markdown # فایلهای مارکداون
│ │ ├── styles # فایلهای CSS جهانی
│ │ └── svg # فایلهای SVG
│ ├── components # کامپوننتهای عمومی
│ │ ├── auth # کامپوننتهای مرتبط با احراز هویت
│ │ ├── docs # کامپوننتهای مرتبط با مستندات
│ │ ├── layouts # کامپوننتهای طرح
│ │ ├── shared # کامپوننتهای سطح بالا که بر اساس کامپوننتهای ui ساخته شدهاند
│ │ ├── template # کامپوننتهای قالب، مانند هدر، فوتر، ناو، و غیره...
│ │ ├── ui # کامپوننتهای سطح پایین، مانند دکمه، کشویی، و غیره...
│ │ └── view # کامپوننتهای سطح بالا که برای صفحات به اشتراک گذاشته میشوند
│ ├── configs # فایلهای پیکربندی
│ │ └── ...
│ ├── constants # فایلهای ثابت
│ │ └── ...
│ ├── i18n # تنظیمات محلیسازی
│ │ └── ...
│ ├── mock # دادههای نمونه برای تماسهای API جعلی
│ │ └── data # دادههای نمونه
│ │ | └── ... # فایلهای TS دادههای نمونه
│ ├── server # فایلهای سمت سرور
│ │ └── actions # فایلهای اقدام سمت سرور
│ │ | └── ...
│ ├── services # فایلهای سرویس برای مدیریت یکپارچهسازیهای API مشتری
│ │ ├── ApiService.ts # دستگیره درخواست و پاسخ API
│ │ ├── axios # پیکربندیها و اینترسپتورهای axios
| | | └── ...
│ │ └── ... # سایر فایلهای سرویس
│ ├── utils # همه توابع و hookهای قابل استفاده مجدد
│ │ ├── hooks # hookها
│ │ | └── ...
│ │ └── ... # توابع قابل استفاده مجدد
│ | auth.ts # فایل ورود به سیستم اکسپ Next
│ └── middleware.ts # میانافزار Nextjs
├── .env # فایل برای ذخیره پیکربندی محیط و اسرار
├── .eslintignore # فایل نادیده گرفتن برای eslint
├── .gitignore # فایل نادیده گرفتن برای git
├── .prettierignore # فایل نادیده گرفتن برای prettier
├── .prettierrc # پیکربندی prettier
├── next-env.d.ts # اعلام محیط Nextjs
├── next.config.mjs # فایل پیکربندی Nextjs
├── package.json
├── package.lock.json
├── postcss.config.mjs # فایل پیکربندی PostCss
├── README.md
├── tailwind.config.ts # فایل پیکربندی TailwindCSS
└── tsconfig.json # پیکربندی پروژه Typescript
این ساختار پوشهها سازماندهی واضحی از منابع، کامپوننتها، پیکربندیها، و داراییها را فراهم میکند، که مدیریت و مقیاسبندی پروژه شما را آسانتر میکند. هر پوشه و فایل بهطور عمدی در جای خود قرار گرفته تا یک پایه کد تمیز و قابل نگهداری را تضمین کند.