Статическая генерация с данными и без

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

До сих пор все созданные нами страницы не требовали получения внешних данных. Эти страницы будут автоматически статически сгенерированы при сборке приложения для production.

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

Статическая генерация с данными с использованием getStaticProps

Как это работает? В Next.js, когда вы экспортируете компонент страницы, вы также можете экспортировать async функцию под названием getStaticProps. Если вы это сделаете, то:

• getStaticProps выполняется во время сборки в production, и...
• Внутри функции вы можете получить внешние данные и передать их как props на страницу.

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Получение внешних данных из файловой системы, API, БД и т.д.
  const data = ...
 
  // Значение ключа `props` будет
  // передано в компонент `Home`
  return {
    props: ...
  }
}

По сути, getStaticProps позволяет сообщить Next.js: "Эй, у этой страницы есть зависимости от данных — поэтому, когда ты предварительно рендеришь эту страницу во время сборки, убедись сначала их разрешить!"

Примечание: В режиме разработки getStaticProps выполняется при каждом запросе.

Давайте используем getStaticProps

Лучше всего учиться на практике, поэтому начиная со следующей страницы мы будем использовать getStaticProps для реализации нашего блога.