getInitialProps

Полезно знать: getInitialProps — это устаревший API. Рекомендуется использовать getStaticProps или getServerSideProps вместо него.

getInitialProps — это async функция, которую можно добавить в экспортируемый по умолчанию React-компонент страницы. Она будет выполняться как на стороне сервера, так и на стороне клиента при переходе между страницами. Результат функции передаётся в React-компонент в виде props.

import { NextPageContext } from 'next'

Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default function Page({ stars }: { stars: number }) {
  return stars
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default function Page({ stars }) {
  return stars
}

Полезно знать:

• Данные, возвращаемые из getInitialProps, сериализуются при серверном рендеринге. Убедитесь, что возвращаемый объект — это простой Object, а не Date, Map или Set.
• При первоначальной загрузке страницы getInitialProps выполняется только на сервере. При переходе на другой маршрут с помощью компонента next/link или next/router функция также выполняется на клиенте.
• Если getInitialProps используется в кастомном _app.js, а страница, на которую происходит переход, использует getServerSideProps, то getInitialProps также выполнится на сервере.

Объект Context

getInitialProps принимает один аргумент context — объект со следующими свойствами:

Ограничения

• getInitialProps можно использовать только в файлах верхнего уровня pages/, но не во вложенных компонентах. Для получения данных на уровне компонентов рассмотрите использование App Router.
• Независимо от того, является ли маршрут статическим или динамическим, любые данные, возвращаемые из getInitialProps как props, будут доступны для просмотра на стороне клиента в первоначальном HTML. Это необходимо для правильного гидратирования страницы. Убедитесь, что вы не передаёте в props никакой конфиденциальной информации, которая не должна быть доступна на клиенте.