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
}

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

Параметр контекста

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

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

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

Свойства

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

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // will be passed to the page component as props
  }
}

Перегенерация

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

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

Дополнительную информацию см. в разделе Инкрементальная статическая перегенерация.

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

• MISS - путь отсутствует в кэше (встречается не более одного раза, при первом посещении)
• STALE - путь есть в кэше, но истекло время перегенерации, поэтому он будет обновлён в фоновом режиме
• HIT - путь есть в кэше и время перегенерации не истекло

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 }, // will be passed to the page component as props
  }
}

Важно знать: 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 }, // will be passed to the page component as props
  }
}

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

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

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

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

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

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

import { promises as fs } from 'fs'
import path from 'path'
 
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}
 
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
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')
 
    // Generally you would parse/transform the contents
    // For example you can transform markdown to HTML here
 
    return {
      filename,
      content: fileContents,
    }
  })
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}
 
export default Blog

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