getStaticProps

Exportar una función llamada getStaticProps pre-renderizará una página en el momento de construcción usando las propiedades devueltas por la función:

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
}

Puedes importar módulos en el ámbito de nivel superior para usar en getStaticProps. Las importaciones no se incluirán en el bundle del lado del cliente. Esto significa que puedes escribir código del lado del servidor directamente en getStaticProps, incluyendo la obtención de datos desde tu base de datos.

Parámetro context

El parámetro context es un objeto que contiene las siguientes claves:

Valores de retorno de getStaticProps

La función getStaticProps debe devolver un objeto que contenga props, redirect o notFound seguido de una propiedad opcional revalidate.

props

El objeto props es un par clave-valor, donde cada valor es recibido por el componente de la página. Debe ser un objeto serializable para que cualquier prop pasado pueda ser serializado con JSON.stringify.

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js es increíble` }, // se pasará al componente de la página como props
  }
}

revalidate

La propiedad revalidate es la cantidad en segundos después de la cual puede ocurrir una regeneración de página (por defecto es false o sin revalidación).

// Esta función se llama en el momento de construcción en el servidor.
// Puede llamarse nuevamente, en una función serverless, si
// la revalidación está habilitada y llega una nueva solicitud
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js intentará regenerar la página:
    // - Cuando llegue una solicitud
    // - Como máximo una vez cada 10 segundos
    revalidate: 10, // En segundos
  }
}

Aprende más sobre Regeneración Estática Incremental.

El estado de caché de una página que utiliza ISR puede determinarse leyendo el valor del encabezado de respuesta x-nextjs-cache. Los valores posibles son los siguientes:

• MISS - la ruta no está en la caché (ocurre como máximo una vez, en la primera visita)
• STALE - la ruta está en la caché pero excedió el tiempo de revalidación, por lo que se actualizará en segundo plano
• HIT - la ruta está en la caché y no ha excedido el tiempo de revalidación

notFound

El booleano notFound permite que la página devuelva un estado 404 y una Página 404. Con notFound: true, la página devolverá un 404 incluso si hubo una página generada exitosamente antes. Esto está diseñado para soportar casos de uso como contenido generado por usuarios que es eliminado por su autor. Nota: notFound sigue el mismo comportamiento de revalidate descrito aquí.

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

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

  return {
    props: { data }, // se pasará al componente de la página como props
  }
}

Nota importante: notFound no es necesario para el modo fallback: false ya que solo las rutas devueltas por getStaticPaths serán pre-renderizadas.

redirect

El objeto redirect permite redirigir a recursos internos o externos. Debe coincidir con la forma { destino: string, permanente: boolean }.

En algunos casos raros, es posible que necesites asignar un código de estado personalizado para que los clientes HTTP antiguos redirijan correctamente. En estos casos, puedes usar la propiedad statusCode en lugar de la propiedad permanent, pero no ambas. También puedes configurar basePath: false similar a las redirecciones en 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 }, // se pasará al componente de la página como props
  }
}

Si las redirecciones son conocidas en el momento de construcción, deben agregarse en next.config.js en su lugar.

Lectura de archivos: Usa process.cwd()

Los archivos pueden leerse directamente del sistema de archivos en getStaticProps.

Para hacerlo, debes obtener la ruta completa al archivo.

Dado que Next.js compila tu código en un directorio separado, no puedes usar __dirname ya que la ruta que devuelve será diferente del Enrutador de Páginas.

En su lugar, puedes usar process.cwd() que te da el directorio donde se está ejecutando Next.js.

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

// posts se llenará en el momento de construcción por getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

// Esta función se llama en el momento de construcción en el servidor.
// No se llamará en el cliente, por lo que incluso puedes hacer
// consultas directas a la base de datos.
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')

    // Generalmente analizarías/transformarías el contenido
    // Por ejemplo, puedes transformar markdown a HTML aquí

    return {
      filename,
      content: fileContents,
    }
  })
  // Al devolver { props: { posts } }, el componente Blog
  // recibirá `posts` como prop en el momento de construcción
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog

Historial de versiones