Структура проекта в Next.js
Эта страница предоставляет обзор структуры проекта приложения на Next.js. Она охватывает файлы и папки верхнего уровня, файлы конфигурации и соглашения по маршрутизации в директориях app и pages.
Нажмите на названия файлов и папок, чтобы узнать больше о каждом соглашении.
Папки верхнего уровня
Папки верхнего уровня используются для организации кода вашего приложения и статических ресурсов.
app | Роутер приложения (App Router) |
pages | Роутер страниц (Pages Router) |
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 | Переменные окружения для production |
.env.development | Переменные окружения для development |
.eslintrc.json | Файл конфигурации ESLint |
.gitignore | Файлы и папки для игнорирования в Git |
next-env.d.ts | Файл деклараций TypeScript для Next.js |
tsconfig.json | Файл конфигурации TypeScript |
jsconfig.json | Файл конфигурации JavaScript |
Соглашения по маршрутизации в app
Следующие соглашения по файлам используются для определения маршрутов и обработки метаданных в app router.
Файлы маршрутизации
layout | .js .jsx .tsx | Макет (Layout) |
page | .js .jsx .tsx | Страница |
loading | .js .jsx .tsx | UI загрузки |
not-found | .js .jsx .tsx | UI "Не найдено" |
error | .js .jsx .tsx | UI ошибки |
global-error | .js .jsx .tsx | Глобальный UI ошибки |
route | .js .ts | API endpoint |
template | .js .jsx .tsx | Перерендеренный макет |
default | .js .jsx .tsx | Фолбэк-страница параллельного маршрута |
Вложенные маршруты
folder | Сегмент маршрута |
folder/folder | Вложенный сегмент маршрута |
Динамические маршруты
[folder] | Динамический сегмент маршрута |
[...folder] | Сегмент маршрута "catch-all" |
[[...folder]] | Опциональный сегмент "catch-all" |
Группы маршрутов и приватные папки
(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 |
apple-icon | .js .ts .tsx | Генерируемая иконка Apple |
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 |
SEO
sitemap | .xml | Файл карты сайта |
sitemap | .js .ts | Генерируемая карта сайта |
robots | .txt | Файл robots.txt |
robots | .js .ts | Генерируемый файл robots.txt |
Соглашения по маршрутизации в pages
Следующие соглашения по файлам используются для определения маршрутов в pages router.
Специальные файлы
_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 | Сегмент маршрута "catch-all" |
[[...folder]]/index | .js .jsx .tsx | Опциональный сегмент "catch-all" |
| Соглашение по файлам | ||
[file] | .js .jsx .tsx | Динамический сегмент маршрута |
[...file] | .js .jsx .tsx | Сегмент маршрута "catch-all" |
[[...file]] | .js .jsx .tsx | Опциональный сегмент "catch-all" |