Страницы и маршруты на файлах

В Next.js адреса страниц не прописывают в отдельном списке маршрутов. Адрес задаёт папка внутри app/, а содержимое страницы — файл page.tsx в этой папке. Такой подход называют маршрутизацией на файлах.

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

Главная страница — файл app/page.tsx. Замените код, созданный утилитой, на свой:

// app/page.tsx
export default function HomePage() {
  return <h1>Мой блог</h1>;
}

Страница — обычный компонент React, экспортированный по умолчанию (export default). Откройте http://localhost:3000 — на странице появится заголовок «Мой блог».

Новая страница

Чтобы добавить адрес /about, создайте папку app/about и в ней файл page.tsx:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>О блоге</h1>
      <p>Здесь Анна пишет о веб-разработке.</p>
    </main>
  );
}

Перезапускать сервер не нужно: страница сразу доступна по адресу http://localhost:3000/about.

Как папки становятся адресами

Каждая вложенная папка добавляет к адресу ещё один сегмент — часть пути между косыми чертами.

Список статей

Сделаем страницу /posts со списком статей блога. Пока данные лежат прямо в файле:

// app/posts/page.tsx
const posts = [
  { slug: 'hello-nextjs', title: 'Привет, Next.js' },
  { slug: 'server-components', title: 'Серверные компоненты' },
];
 
export default function PostsPage() {
  return (
    <main>
      <h1>Статьи</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

По адресу /posts появится список из двух заголовков. Как сделать их ссылками, показано в уроке о навигации.

Другие файлы в папках

Адресом становится только папка, в которой есть page.tsx. Остальные файлы рядом — компоненты, стили, функции — посетитель открыть не может. Например, файл app/posts/PostItem.tsx можно импортировать в страницу, но адреса /posts/PostItem не появится.

Частая ошибка

Создать файл app/about.tsx вместо app/about/page.tsx. Next.js не делает страницу из файла с произвольным именем, и по адресу /about откроется ошибка 404. Страница — это всегда папка с файлом page.tsx внутри.