ساختار پروژه Next.js

این صفحه نمای کلی از ساختار پروژه یک برنامه Next.js را ارائه می‌کند. این بخش شامل فایل‌ها و پوشه‌های سطح بالا، فایل‌های پیکربندی و قراردادهای مسیریابی در پوشه‌های app و pages می‌شود.

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

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

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


`app`	روتر برنامه
`pages`	روتر صفحات
`public`	دارایی های استاتیکی که باید ارائه شوند
`src`	پوشه منبع برنامه اختیاری (source folder)

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

فایل‌های سطح بالا برای پیکربندی برنامه شما، مدیریت وابستگی‌ها، اجرای واسطه‌ها، ادغام ابزارهای نظارت و تعریف متغیرهای محیطی استفاده می‌شوند.


Next.js
`next.config.js`	فایل پیکربندی برای Next.js
`package.json`	وابستگی ها و اسکریپت های پروژه
`instrumentation.ts`	فایل OpenTelemetry و ابزاردهی Instrumentation
`middleware.ts`	میان افزار درخواست Next.js
`.env`	متغیرهای محیطی
`.env.local`	متغیرهای محیطی local
`.env.production`	متغیرهای محیط تولید production
`.env.development`	متغیرهای محیط توسعه development
`.eslintrc.json`	فایل پیکربندی برای ESLint
`.gitignore`	فایل‌ها و پوشه‌هایی که در گیت باید نادیده گرفته شوند
`next-env.d.ts`	فایل تعریف TypeScript برای Next.js
`tsconfig.json`	فایل پیکربندی برای TypeScript
`jsconfig.json`	فایل پیکربندی برای JavaScript

قراردادهای مسیریابی `app`

قراردادهای زیر برای تعریف مسیرها و مدیریت متادیتا (metadata) در مسیریاب app استفاده می‌شوند.

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


`layout`	`.js` `.jsx` `.tsx`	طرح بندی Layout
`page`	`.js` `.jsx` `.tsx`	صفحه Page
`loading`	`.js` `.jsx` `.tsx`	رابط کاربری بارگیری
`not-found`	`.js` `.jsx` `.tsx`	رابط کاربری پیدا نشد Not found UI
`error`	`.js` `.jsx` `.tsx`	رابط کاربری خطا Error UI
`global-error`	`.js` `.jsx` `.tsx`	رابط کاربری سراسری خطا
`route`	`.js` `.ts`	API endpoint
`template`	`.js` `.jsx` `.tsx`	رندر دوباره طرح بندی Re-rendered layout
`default`	`.js` `.jsx` `.tsx`	صفحه بازگشتی مسیر موازی Parallel route fallback page

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


`folder`	بخش مسیر Route segment
`folder/folder`	بخش مسیر تو در تو Nested route segment

مسیرهای داینامیک Dynamic Routes


`[folder]`	بخش مسیر داینامیک Dynamic route segment
`[...folder]`	بخش های دربرگیرنده همه (Catch-all)
`[[...folder]]`	بخش های دربرگیرنده همه (Catch-all) اختیاری

گروه های مسیر و پوشه های خصوصی


`(folder)`	گروه‌بندی مسیرها بدون تأثیر بر مسیریابی
`_folder`	پوشه و تمام بخش‌های فرزند را از مسیریابی خارج کنید

مسیرهای موازی Parallel و رهگیری شده Intercepted


`@folder`	نام گذاری بعنوان اسلات Named slot
`(.)folder`	رهگیری در همان سطح
`(..)folder`	رهگیری یک سطح بالاتر
`(..)(..)folder`	رهگیری دو سطح بالاتر
`(...)folder`	رهگیری از ریشه

فایل های قراردادی Metadata

آیکون های برنامه


`favicon`	`.ico`	فایل Favicon
`icon`	`.ico` `.jpg` `.jpeg` `.png` `.svg`	فایل آیکون برنامه
`icon`	`.js` `.ts` `.tsx`	آیکون برنامه ایجاد شده
`apple-icon`	`.jpg` `.jpeg`, `.png`	فایل آیکون برنامه Apple
`apple-icon`	`.js` `.ts` `.tsx`	آیکون برنامه ایجاد شده Apple

Open Graph و Twitter Images


`opengraph-image`	`.jpg` `.jpeg` `.png` `.gif`	فایل تصویر Open Graph
`opengraph-image`	`.js` `.ts` `.tsx`	تصویر Open Graph ایجاد شده
`twitter-image`	`.jpg` `.jpeg` `.png` `.gif`	فایل تصویر Twitter
`twitter-image`	`.js` `.ts` `.tsx`	تصویر Twitter ایجاد شده

بهینه سازی موتورهای جستجو SEO


`sitemap`	`.xml`	فایل نقشه سایت Sitemap
`sitemap`	`.js` `.ts`	نقشه سایت ایجاد شده Sitemap
`robots`	`.txt`	فایل Robots
`robots`	`.js` `.ts`	فایل Robots ایجاد شده

`pages` Routing Conventions

The following file conventions are used to define routes in the pages router.

Special Files


`_app`	`.js` `.jsx` `.tsx`	Custom App
`_document`	`.js` `.jsx` `.tsx`	Custom Document
`_error`	`.js` `.jsx` `.tsx`	Custom Error Page
`404`	`.js` `.jsx` `.tsx`	404 Error Page
`500`	`.js` `.jsx` `.tsx`	500 Error Page

Routes


Folder convention
`index`	`.js` `.jsx` `.tsx`	Home page
`folder/index`	`.js` `.jsx` `.tsx`	Nested page
File convention
`index`	`.js` `.jsx` `.tsx`	Home page
`file`	`.js` `.jsx` `.tsx`	Nested page

Dynamic Routes


Folder convention
`[folder]/index`	`.js` `.jsx` `.tsx`	Dynamic route segment
`[...folder]/index`	`.js` `.jsx` `.tsx`	Catch-all route segment
`[[...folder]]/index`	`.js` `.jsx` `.tsx`	Optional catch-all route segment
File convention
`[file]`	`.js` `.jsx` `.tsx`	Dynamic route segment
`[...file]`	`.js` `.jsx` `.tsx`	Catch-all route segment
`[[...file]]`	`.js` `.jsx` `.tsx`	Optional catch-all route segment

نصب و راه اندازی برنامه تان را بسازید