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

Перевод официальной документации

Для справки

Эта документация справедлива, для Next.js v9.3 и выше. Если вы используете более раннюю версию, перейдите по ссылке.

Для справки

В Next.js, страница - это обычный React-компонент, экспортированный из .js, .jsx, .ts или .tsx файла в папке pages. Каждая находящаяся в этой папке страница, ассоциируется с роутом.

Например: если вы создадите файл pages/about.js и напишите код, как в примере ниже, он будет доступен по url /about.

function About() {
  return <div>About</div>
}

export default About

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

Next.js поддерживает страницы с динамической маршрутизацией. Например, если вы создадите файл pages/posts/[id].js, он будет обрабатывать следующие пути /posts/1, /posts/2 и т.д.

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

Для справки

Предварительный рендеринг

По умолчанию в Next.js используется предварительный рендеринг всех созданных в папке pages страниц. Это означает, что Next.js генерирует HTML для каждой страницы заранее, вместо того, чтобы это делать с помощью JS на стороне клиента. Так это приводит к повышению производительности и улучшению SEO.

Каждая сгенерированная HTML-страница дополняется минимальным кодом на JS, необходимым для этой страницы. Когда страница загружается браузером, ее JavaScript-код запускается и страница становится полностью интерактивной. Этот процесс называется гидратацией.

Различают две формы предварительного рендеринга:

Next.js имеет две формы предварительного рендеринга: статическую генерацию (SSG) и рендеринг на стороне сервера (SSR). Разница заключается лишь в том, в какой момент генерируется HTML-код для страницы.

• Статическая генерация (рекомендуется): HTML генерируется один раз во время сборки и дальше будет повторно загружаться при каждом запросе.
• Рендеринг на стороне сервера: HTML генерируется при каждом запросе.

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

Мы рекомендуем использовать статическую генерацию вместо рендеринга на стороне сервера по соображениям производительности. Статически сгенерированные страницы могут кэшироваться CDN без дополнительной настройки. Однако в некоторых случаях рендеринг на стороне сервера может быть единственным вариантом.

Вы также можете использовать рендеринг на стороне клиента (CSR) наряду со статической генерацией или рендерингом на стороне сервера. Это означает, что некоторые части страницы могут быть полностью отрисованы с помощью JavaScript на стороне клиента. Чтобы узнать больше, ознакомьтесь с документацией по получению данных.