Статические маршруты: page.tsx, базовые примеры

1. Синтаксис: page.tsx — сердце маршрута

В Next.js 15 (и App Router) статическим маршрутом называют страницу, путь к которой однозначно определяется структурой папок и файлов в папке app/. Такой маршрут не содержит никаких динамических сегментов (типа [id] или [...slug]), а URL полностью соответствует расположению файлов.

Пример:

• Файл app/about/page.tsx создаёт страницу по адресу /about.
• Файл app/contact/page.tsx — страницу /contact.
• Файл app/page.tsx — главную страницу /.

Статический — значит, что адрес страницы всегда один и тот же, не зависит от параметров, query-строк и т.д.

Next.js 15 с App Router требует, чтобы каждая страница была определена файлом с именем page.tsx (или page.jsx, если вы пишете на JavaScript). Именно этот файл становится точкой входа для маршрута.

Минимальный пример

Создадим простую страницу "О нас":

Структура папок:

app/
  about/
    page.tsx

Содержимое app/about/page.tsx:

export default function AboutPage() {
  return (
    <main>
      <h1>О нас</h1>
      <p>Мы — команда, которая учит JavaScript и современные фреймворки!</p>
    </main>
  );
}

Теперь, если вы откроете в браузере адрес http://localhost:3000/about, вы увидите эту страницу.
Не нужно настраивать роутинг вручную — Next.js всё сделает за вас.

Главная страница

Файл app/page.tsx всегда соответствует корню сайта (/):

export default function HomePage() {
  return (
    <main>
      <h1>Добро пожаловать!</h1>
      <p>Это главная страница нашего приложения на Next.js 15.</p>
    </main>
  );
}

2. Как работает file-based routing: магия папок

Next.js 15 буквально "читается" как книга: структура папок = структура URL.

• app/page.tsx → /
• app/about/page.tsx → /about
• app/contact/page.tsx → /contact
• app/products/page.tsx → /products

Вложенность папок = вложенность маршрутов:

• app/products/new/page.tsx → /products/new
• app/blog/2024/page.tsx → /blog/2024

Важно: Названия папок и файлов становятся частью адреса (за исключением специальных служебных папок, о которых поговорим позже).

Визуальная схема

app/
├── page.tsx                 // /
├── about/
   └── page.tsx              // /about
├── contact/
   └── page.tsx              // /contact
├── products/
│   ├── page.tsx             // /products
│   └── new/
│       └── page.tsx         // /products/new

3. Примеры: создаём простое приложение

Давайте вместе создадим мини-сайт с тремя страницами: главная, "О нас" и "Контакты".

Структура:

app/
├── page.tsx
├── about/
│   └── page.tsx
└── contact/
    └── page.tsx

app/page.tsx:

export default function HomePage() {
  return (
    <main>
      <h1>Главная страница</h1>
      <p>Добро пожаловать в наш Next.js-сайт!</p>
      <nav>
        <a href="/about">О нас</a> | <a href="/contact">Контакты</a>
      </nav>
    </main>
  );
}

app/about/page.tsx:

export default function AboutPage() {
  return (
    <main>
      <h1>О нас</h1>
      <p>Здесь рассказывается о нашей команде.</p>
      <a href="/">На главную</a>
    </main>
  );
}

app/contact/page.tsx:

export default function ContactPage() {
  return (
    <main>
      <h1>Контакты</h1>
      <p>Свяжитесь с нами по email: info@example.com</p>
      <a href="/">На главную</a>
    </main>
  );
}

Запуск:

1. Запустите приложение командой npm run dev.
2. Откройте в браузере:
   • / — главная страница
   • /about — страница "О нас"
   • /contact — страница "Контакты"

Поздравляю! Вы только что создали полноценный многостраничный сайт на Next.js 15, не написав ни одной строчки кода для роутинга. Всё благодаря file-based routing.

4. Особенности работы с page.tsx

Только один page.tsx на папку

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

Названия имеют значение

• Папки и файлы должны называться строго page.tsx (или .jsx для JS).
• Названия папок становятся частью URL.

Как добавить стили?

Вы можете импортировать CSS-модули или глобальные стили прямо внутри компонента страницы:

import styles from './about.module.css';

export default function AboutPage() {
  return (
    <main className={styles.about}>
      <h1>О нас</h1>
      <p>Тут будет красиво!</p>
    </main>
  );
}

Как добавить навигацию?

Для перехода между страницами используйте компонент Link из next/link (мы подробно рассмотрим его позже), но для простоты на первых шагах можно использовать обычные <a href="...">.

5. Как это связано с вашим приложением?

В течение курса мы будем развивать учебное приложение, добавляя новые страницы и разделы. Каждый раз, когда вам нужно создать новую "страницу" — просто добавляйте папку с page.tsx внутри. Например, если вы делаете блог:

app/
└── blog/
  └── page.tsx    // /blog

А если потом понадобится страница "О проекте":

app/
└── about/
    └── page.tsx    // /about

Всё просто и прозрачно!

6. Типичные ошибки при работе со статическими маршрутами

Ошибка №1: Неправильное имя файла
Иногда студенты называют файл, например, Page.tsx (с большой буквы), main.tsx, или вообще about.tsx. Next.js ищет именно page.tsx. Ошибка в имени — и страница не появится в маршрутах.

Ошибка №2: Файл не в той папке
Если положить page.tsx не в директорию app/, а, скажем, в корень проекта или в src/, Next.js его не увидит. Все страницы должны лежать в папке app/ или её подпапках.

Ошибка №3: Несовпадение структуры папок и ожидаемого URL
Иногда ожидают, что файл app/aboutPage.tsx даст маршрут /about, но он не даст — нужен именно путь app/about/page.tsx.

Ошибка №4: Несколько page.tsx в одной папке
Next.js не поддерживает несколько страниц в одной директории. Если вы хотите разные страницы — создавайте для каждой свою подпапку.

Ошибка №5: Использование относительных путей для перехода между страницами
В начале легко запутаться с путями: если вы пишете <a href="about">, то с главной страницы это сработает, но с другой страницы — нет. Лучше всегда указывать абсолютные пути: <a href="/about">.