Структура каталогов Next.js

В Next.js структура каталогов организована на основе механизма маршрутизации файловой системы, что означает, что структура ваших файлов и папок напрямую определяет маршрутизацию и макет страниц вашего приложения.

• app/Этот каталог используется для хранения файлов страниц и макетов и является основным каталогом в Next.js.
• public/Используется для хранения файлов публичных статических ресурсов.
• styles/Используется для хранения файлов стилей.
• node_modules/Хранит все пакеты зависимостей проекта.
• package.jsonЭто файл конфигурации проекта, содержащий зависимости проекта и команды скриптов.
• next.config.jsИспользуется для настройки конфигурации Next.js.

Корневой каталог

Корневой каталог обычно содержит некоторые базовые файлы конфигурации и зависимости. Стандартные файлы и папки перечислены ниже:

my-next-app/
├── app/                 # 存放应用页面和布局文件
├── public/              # 存放静态资源文件（如图片、字体）
├── styles/              # 存放样式文件（CSS、Sass等）
├── node_modules/        # 存放项目依赖
├── package.json         # 项目配置文件
├── next.config.js       # Next.js 配置文件（可选）
└── .gitignore           # Git 忽略文件

• app/: Этот каталог — новый способ организации файлов страниц и макетов в Next.js. Вся маршрутизация и страницы создаются на основе этого каталога.
• public/: В этом каталоге хранятся публичные статические файлы, такие как изображения, шрифты, favicon и т. д. Вы можете напрямую получать доступ к этим файлам по URL.
• styles/: Храните ваши CSS, Sass или другие файлы стилей.

Каталог app/

Каталог app/ — это ядро Next.js, в котором хранятся страницы, макеты и другие связанные файлы.

Ниже приведена типовая структура каталога app/:

app/
├── layout.tsx           # 根布局文件
├── page.tsx             # 根页面
└── [slug]/              # 动态路由目录
    ├── page.tsx         # 动态页面
    └── layout.tsx       # 特定页面的布局

• layout.tsx: В этом файле определяется корневой макет или макет страницы, обычно используемый для задания глобальной структуры (например,<html>и<body>тег). Все подстраницы будут вложены в этот макет.
• page.tsx: Каждый компонент страницы должен иметьpage.tsxфайл. Этот файл представляет содержимое страницы, соответствующее этому маршруту. Например,app/page.tsxсоответствует корневому пути (/) страница.
• Динамические маршруты: Next.js поддерживает динамические маршруты. Имена каталогов динамических маршрутов заключаются в квадратные скобки, например[slug]. Это означает, что вы можете загружать разные страницы на основе разных частей URL. Например,[slug]/page.tsxбудет основан наslugпараметр для динамического рендеринга страницы.

Каталог public/

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

public/
├── images/              # 存放图片文件
├── fonts/               # 存放字体文件
└── favicon.ico          # 网站图标

• Доступ к файлам можно получить через/images/и другие пути напрямую. Например,public/images/logo.pngможно получить доступ черезhttp://localhost:3000/images/logo.png.

Каталог styles/

В директории styles/ можно организовывать и управлять файлами стилей. Next.js поддерживает CSS Modules, глобальные стили и другие CSS-решения.

styles/
├── Home.module.css      # CSS 模块化样式
└── globals.css          # 全局样式

• Home.module.css: Это файл CSS-модуля. По умолчанию Next.js автоматически использует CSS Modules для каждого компонента, гарантируя, что область действия стилей ограничена этим компонентом.
• globals.css: Хранит глобальные стили, обычно используется для задания глобальных шрифтов, цветов и т. д.

Директория node_modules/

В этой директории хранятся все пакеты зависимостей проекта. Она автоматически создаётся npm или yarn на основе информации о зависимостях в файле package.json и не требует ручного вмешательства.

Файл package.json

package.json — это основной конфигурационный файл проекта, в котором записаны зависимости, скрипты и другие метаданные проекта. Здесь можно определять такие команды, как start, build и develop.

Файл next.config.js (необязательно)

Это необязательный файл конфигурации, используемый для настройки поведения Next.js. Например, в этом файле можно настроить оптимизацию статических файлов, правила маршрутизации, конфигурацию Webpack и т. д.

Пример структуры проекта

Ниже приведён типичный пример структуры проекта Next.js:

Сравнение каталога app и традиционного каталога pages

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