Страницы в Next.js

В Next.js страница — это React-компонент, экспортируемый из файла в директории pages.

Страницы связаны с маршрутом на основе их имени файла. Например, в режиме разработки:

• pages/index.js связан с маршрутом /.
• pages/posts/first-post.js связан с маршрутом /posts/first-post.

У нас уже есть файл pages/index.js, поэтому давайте создадим pages/posts/first-post.js, чтобы увидеть, как это работает.

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

Создайте директорию posts внутри pages.

Создайте файл first-post.js внутри директории posts со следующим содержимым:

export default function FirstPost() {
  return <h1>First Post</h1>;
}

Компонент может иметь любое имя, но вы должны экспортировать его как default.

Теперь убедитесь, что сервер разработки запущен, и перейдите по адресу http://localhost:3000/posts/first-post. Вы должны увидеть страницу:

Вот как можно создавать разные страницы в Next.js.

Просто создайте JS-файл в директории pages, и путь к файлу станет URL-маршрутом.

В некотором смысле это похоже на создание сайтов с использованием HTML или PHP-файлов. Вместо написания HTML вы пишете JSX и используете React-компоненты.

Давайте добавим ссылку на новую страницу, чтобы можно было перейти на неё с главной страницы.