getStaticProps

Экспорт функции getStaticProps позволит предварительно отрендерить страницу во время сборки, используя пропсы, возвращаемые этой функцией:

import type { InferGetStaticPropsType, GetStaticProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>

export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

export async function getStaticProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

Вы можете импортировать модули на верхнем уровне для использования в getStaticProps. Импортируемые модули не будут включены в клиентскую сборку. Это означает, что вы можете писать серверный код напрямую в getStaticProps, включая запросы данных из вашей базы данных.

Параметр context

Параметр context — это объект, содержащий следующие ключи:

Возвращаемые значения getStaticProps

Функция getStaticProps должна возвращать объект, содержащий либо props, redirect, или notFound, а также опциональное свойство revalidate.

props

Объект props представляет собой пару ключ-значение, где каждое значение передается в компонент страницы. Это должен быть сериализуемый объект, чтобы любые передаваемые пропсы могли быть сериализованы с помощью JSON.stringify.

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // будет передано в компонент страницы как пропсы
  }
}

revalidate

Свойство revalidate определяет интервал в секундах, через который может произойти повторная генерация страницы (по умолчанию false или без повторной валидации).

// Эта функция вызывается во время сборки на серверной стороне.
// Она может быть вызвана снова на серверной функции, если
// включена повторная валидация и поступает новый запрос
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js попытается повторно сгенерировать страницу:
    // - При поступлении запроса
    // - Не чаще чем раз в 10 секунд
    revalidate: 10, // В секундах
  }
}

Узнайте больше о инкрементальной статической регенерации.

Статус кэша страницы, использующей ISR, можно определить, прочитав значение заголовка ответа x-nextjs-cache. Возможные значения:

• MISS — путь отсутствует в кэше (происходит максимум один раз при первом посещении)
• STALE — путь есть в кэше, но срок действия revalidate истек, поэтому он будет обновлен в фоновом режиме
• HIT — путь есть в кэше и срок действия revalidate не истек

notFound

Булево значение notFound позволяет странице возвращать статус 404 и страницу 404. При notFound: true страница вернет 404, даже если ранее она была успешно сгенерирована. Это предназначено для поддержки сценариев, например, когда пользовательский контент удаляется его автором. Обратите внимание, что notFound следует тем же правилам revalidate, описанным здесь.

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // будет передано в компонент страницы как пропсы
  }
}

Полезно знать: notFound не требуется для режима fallback: false, так как предварительно рендерятся только пути, возвращенные из getStaticPaths.

redirect

Объект redirect позволяет перенаправлять на внутренние или внешние ресурсы. Он должен соответствовать структуре { destination: string, permanent: boolean }.

В некоторых редких случаях может потребоваться установить пользовательский код состояния для корректного перенаправления в старых HTTP-клиентах. В таких случаях можно использовать свойство statusCode вместо permanent, но не оба одновременно. Также можно установить basePath: false, аналогично редиректам в next.config.js.

export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
        // statusCode: 301
      },
    }
  }

  return {
    props: { data }, // будет передано в компонент страницы как пропсы
  }
}

Если редиректы известны во время сборки, их следует добавить в next.config.js.

Чтение файлов: используйте process.cwd()

Файлы можно читать напрямую из файловой системы в getStaticProps.

Для этого необходимо получить полный путь к файлу.

Поскольку Next.js компилирует ваш код в отдельную директорию, нельзя использовать __dirname, так как возвращаемый путь будет отличаться от маршрутизатора страниц.

Вместо этого можно использовать process.cwd(), который возвращает директорию, в которой выполняется Next.js.

import { promises as fs } from 'fs'
import path from 'path'

// posts будет заполнен во время сборки через getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

// Эта функция вызывается во время сборки на серверной стороне.
// Она не вызывается на клиентской стороне, поэтому можно даже
// выполнять прямые запросы к базе данных.
export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)

  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')

    // Обычно здесь происходит парсинг/преобразование содержимого
    // Например, можно преобразовать markdown в HTML

    return {
      filename,
      content: fileContents,
    }
  })
  // Возвращая { props: { posts } }, компонент Blog
  // получит `posts` как пропс во время сборки
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog

История версий