Структура проекта Next.js

Эта страница предоставляет обзор структуры проекта приложения Next.js. Она охватывает файлы и папки верхнего уровня, файлы конфигурации и соглашения по маршрутизации в каталогах app и pages.

Нажмите на имена файлов и папок, чтобы узнать больше о каждом соглашении.

Папки верхнего уровня

Папки верхнего уровня используются для организации кода и статических ресурсов вашего приложения.


`app`	Маршрутизатор App
`pages`	Маршрутизатор Pages
`public`	Статические ресурсы для обслуживания
`src`	Необязательная папка исходного кода приложения

Файлы верхнего уровня

Файлы верхнего уровня используются для настройки приложения, управления зависимостями, выполнения middleware, интеграции инструментов мониторинга и определения переменных среды.


Next.js
`next.config.js`	Файл конфигурации для Next.js
`package.json`	Зависимости и скрипты проекта
`instrumentation.ts`	Файл OpenTelemetry и инструментирования
`middleware.ts`	Middleware запросов Next.js
`.env`	Переменные среды
`.env.local`	Локальные переменные среды
`.env.production`	Переменные среды производства
`.env.development`	Переменные среды разработки
`.eslintrc.json`	Файл конфигурации для ESLint
`.gitignore`	Файлы и папки Git, которые нужно игнорировать
`next-env.d.ts`	Файл объявления TypeScript для Next.js
`tsconfig.json`	Файл конфигурации для TypeScript
`jsconfig.json`	Файл конфигурации для JavaScript

Соглашения по маршрутизации app

Следующие соглашения по именованию файлов используются для определения маршрутов и обработки метаданных в маршрутизаторе app.

Файлы маршрутизации


`layout`	`.js` `.jsx` `.tsx`	Макет
`page`	`.js` `.jsx` `.tsx`	Страница
`loading`	`.js` `.jsx` `.tsx`	Загрузка
`not-found`	`.js` `.jsx` `.tsx`	Страница не найдена
`error`	`.js` `.jsx` `.tsx`	Ошибка
`global-error`	`.js` `.jsx` `.tsx`	Глобальная ошибка
`route`	`.js` `.ts`	Конечная точка API
`template`	`.js` `.jsx` `.tsx`	Перерисовываемый макет
`default`	`.js` `.jsx` `.tsx`	Страница по умолчанию для параллельного маршрута

Вложенные маршруты


`folder`	Сегмент маршрута
`folder/folder`	Вложенный сегмент маршрута

Динамические маршруты


`[folder]`	Динамический сегмент маршрута
`[...folder]`	Сегмент маршрута со всеми значениями
`[[...folder]]`	Необязательный сегмент маршрута со всеми значениями

Группы маршрутов и приватные папки


`(folder)`	Группировка маршрутов без изменения маршрутизации
`_folder`	Исключение папки и всех дочерних сегментов из маршрутизации

Параллельные и перехватываемые маршруты


`@folder`	Именованный слот
`(.)folder`	Перехват на том же уровне
`(..)folder`	Перехват на уровень выше
`(..)(..)folder`	Перехват на два уровня выше
`(...)folder`	Перехват с корневого уровня

Соглашения по файлам метаданных

Значки приложения


`favicon`	`.ico`	Файл Favicon
`icon`	`.ico` `.jpg` `.jpeg` `.png` `.svg`	Файл значка приложения
`icon`	`.js` `.ts` `.tsx`	Сгенерированный значок приложения
`apple-icon`	`.jpg` `.jpeg`, `.png`	Файл значка Apple App
`apple-icon`	`.js` `.ts` `.tsx`	Сгенерированный значок Apple App

Изображения Open Graph и Twitter


`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

END_OF_DOCUMENT_MARKER

SEO


`sitemap`	`.xml`	Файл Sitemap
`sitemap`	`.js` `.ts`	Сгенерированный Sitemap
`robots`	`.txt`	Файл Robots
`robots`	`.js` `.ts`	Сгенерированный файл Robots

Правила маршрутизации страниц

Следующие правила именования файлов используются для определения маршрутов в pages маршрутизаторе.

Специальные файлы


`_app`	`.js` `.jsx` `.tsx`	Пользовательское приложение
`_document`	`.js` `.jsx` `.tsx`	Пользовательский документ
`_error`	`.js` `.jsx` `.tsx`	Пользовательская страница ошибки
`404`	`.js` `.jsx` `.tsx`	Страница ошибки 404
`500`	`.js` `.jsx` `.tsx`	Страница ошибки 500

Маршруты


Конвенция папок
`index`	`.js` `.jsx` `.tsx`	Главная страница
`folder/index`	`.js` `.jsx` `.tsx`	Вложенная страница
Конвенция файлов
`index`	`.js` `.jsx` `.tsx`	Главная страница
`file`	`.js` `.jsx` `.tsx`	Вложенная страница

Динамические маршруты


Конвенция папок
`[folder]/index`	`.js` `.jsx` `.tsx`	Сегмент динамического маршрута
`[...folder]/index`	`.js` `.jsx` `.tsx`	Сегмент маршрута «захват всего»
`[[...folder]]/index`	`.js` `.jsx` `.tsx`	Сегмент необязательного маршрута «захват всего»
Конвенция файлов
`[file]`	`.js` `.jsx` `.tsx`	Сегмент динамического маршрута
`[...file]`	`.js` `.jsx` `.tsx`	Сегмент маршрута «захват всего»
`[[...file]]`	`.js` `.jsx` `.tsx`	Сегмент необязательного маршрута «захват всего»