В проекте Next.js директория pages играет ключевую роль в определении маршрутов вашего приложения. Каждый файл в этой директории представляет собой уникальный URL.

Основные особенности

• Автоматическая маршрутизация: Вам не нужно настраивать маршрутизацию вручную. Любой файл, добавленный в pages, автоматически становится маршрутом.
• Соответствие файлов и маршрутов: Структура файлов в pages отображается на конкретные маршруты. Например, файл pages/post/index.js соответствует маршруту /post.
• Динамические маршруты: Файлы, использующие квадратные скобки, такие как [id].js, позволяют использовать динамические параметры. Например, pages/post/[id].js соответствует маршруту /post/:id.

Пример кода: Страницы и маршруты

Рассмотрим следующую структуру файлов:

pages/
  ├── index.js
  │
  ├── post/
  │    └── [id].js
  │
  └── about.js

Эта структура соответствует следующим маршрутам:

• /index.js: Служит главной страницей.
• /post: Служит маршрутом для post. Должен содержать код для обработки запросов без параметра id.
• /about.js: Прямой маршрут к странице “О нас”.
• /post/abc:
  • Соответствует pages/post/[id].js с параметром id равным “abc”.

Специальные роли

Некоторые конкретные имена файлов или поддиректорий имеют особые роли в маршрутизации.

• 404.js: Если присутствует, Next.js использует этот файл для отображения кастомной страницы 404.
• _app.js: Расположен на верхнем уровне. Это главная страница, которая оборачивает другие страницы. Полезна для включения глобальных стилей или контекстов.
• _document.js: Также на верхнем уровне, контролирует HTML-документ, отрисованный на сервере. Полезен для обеспечения единообразия пользовательского интерфейса на всех страницах.

Назад