Страницы и маршрутизация в Next.js

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

  • Связь между страницами и маршрутами:В Next.js каждая страница автоматически сопоставляется с маршрутом через файл в каталоге app/ или pages/. Путь и имя файла каждого файла определяют URL этой страницы.

  • Базовая структура страницы:В Next.js страницей является любой файл .tsx или .js в каталоге app/ или pages/. Каждый файл страницы автоматически становится маршрутом в приложении.

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

  • Маршрутизация на основе файловой системы: Страницы и маршруты автоматически сопоставляются черезapp/илиpages/структуру файлов в каталоге.
  • Динамические маршруты: Вы можете использовать квадратные скобки ([ ]) для создания динамических маршрутов и обработки динамических параметров в URL.
  • Вложенные маршруты: Вы можете создавать вложенные маршруты с помощью подкаталогов для реализации многоуровневых структур маршрутов.
  • Навигация по маршрутам: Используйтеnext/linkкомпонент для реализации навигации между страницами.

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

Предположим, структура каталогов проекта выглядит следующим образом:

app/
├── page.tsx             # 对应根路径 /
├── about/
│   └── page.tsx         # 对应 /about
├── [slug]/
│   └── page.tsx         # 对应动态路径，如 /[slug]
  • page.tsxфайл: Каждая страница будет иметьpage.tsxфайл. Этот файл — это содержимое компонента, соответствующее этому маршруту.
  • Динамические маршруты: если в пути страницы есть динамические параметры, можно использовать квадратные скобки ([ ]) чтобы определить динамические маршруты. Например,[slug]указывает, что путь может принимать любое значение в качествеslugпараметра.

Страницы и маршруты по умолчанию

Next.js автоматически создаёт маршруты для файлов в папке app/ или pages/.

Ниже приведены некоторые распространённые примеры маршрутов:

  • app/page.tsxсоответствует/путь.
  • app/about/page.tsxсоответствует/aboutпуть.
  • app/[slug]/page.tsxсоответствует/[slug], и будет совпадать с любым URL-путем, например/post/1или/product/xyz。

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

Динамические маршруты позволяют динамически отображать страницы на основе разных частей URL.

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

Например, предположим, вы хотите отображать разное содержимое в зависимости от разных ID статей, можно сделать так:

app/
├── [id]/
│   └── page.tsx        # 动态路由，匹配任何 `/[id]` 的路径

[id]является заполнителем для динамического маршрута. Он может соответствовать любомуidпараметру в URL.

Получение параметров динамического маршрута

В Next.js можно использовать хук useParams для доступа к параметрам динамического маршрута. Например:

Пример

'use client';

import { useParams } from 'next/navigation';

export default function Post() {
  const params = useParams();
  const { id } = params;  // Получить параметр динамического маршрута `id`

  return <div>ID поста: {id}</div>;
}

Когда пользователь посещает /post/123, id будет автоматически установлен в 123 и отображён на странице.

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

Next.js также поддерживает вложенные маршруты, то есть создание подмаршрутов внутри маршрута. Например:

app/
├── about/
│   ├── page.tsx          # /about 路由页面
│   ├── team/
│   │   └── page.tsx      # /about/team 子路由页面
│   └── contact/
│       └── page.tsx      # /about/contact 子路由页面

Такой подход придаёт вашему приложению иерархическую структуру, сохраняя при этом читаемость URL-путей.

Пользовательские правила маршрутов

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

Специальные страницы и возможности маршрутизации

  • _app.jsи_document.js: В Next.js,_app.jsявляется корневым компонентом приложения, позволяя задавать общие макеты и состояние для всех страниц._document.jsв основном используется для изменения структуры HTML-документа (например,headиbodyтег).
  • _error.js: Вы можете настраивать страницы ошибок для обработки 404 или других типов ошибок.

Пример

Создание статической страницы

Рассмотрим создание простой статической страницы в качестве примера. Создайте файл about/page.tsx со следующим содержимым:

Пример

export default function AboutPage() {
  return <h1>О нас</h1>;
}

Когда вы посещаете путь /about, Next.js автоматически отобразит эту страницу.

Использование динамических маршрутов

Предположим, вы хотите отобразить страницу на основе ID статьи. Создайте файл app/[id]/page.tsx со следующим содержимым:

Пример

import { useParams } from 'next/navigation';

export default function PostPage() {
  const { id } = useParams();

  return <h1>ID поста: {id}</h1>;
}

При посещении /123 будет отображаться ID поста: 123.

Навигация по маршрутам

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

Пример

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Добро пожаловать в Next.js!</h1>
      <Link href="/about">О нас</Link>
    </div>
  );
}

<Link />Компонент используется для перехода между страницами, сохраняя ощущение одностраничного приложения (SPA).

Другие расширения