Generación estática con y sin datos

La Generación estática (Static Generation) puede realizarse con y sin datos.

Hasta ahora, todas las páginas que hemos creado no requieren obtener datos externos. Esas páginas se generarán automáticamente de forma estática cuando la aplicación se construya para producción.

Sin embargo, para algunas páginas, puede que no sea posible renderizar el HTML sin primero obtener algunos datos externos. Tal vez necesite acceder al sistema de archivos, consumir una API externa o consultar su base de datos en tiempo de construcción. Next.js soporta este caso — Generación estática con datos — de forma nativa.

Generación estática con datos usando getStaticProps

¿Cómo funciona? En Next.js, cuando exportas un componente de página, también puedes exportar una función async llamada getStaticProps. Si lo haces, entonces:

• getStaticProps se ejecuta en tiempo de construcción en producción, y...
• Dentro de la función, puedes obtener datos externos y enviarlos como props a la página.

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // Obtener datos externos del sistema de archivos, API, BD, etc.
  const data = ...
 
  // El valor de la clave `props` será
  // pasado al componente `Home`
  return {
    props: ...
  }
}

Esencialmente, getStaticProps te permite decirle a Next.js: "Oye, esta página tiene algunas dependencias de datos — ¡así que cuando pre-renderices esta página en tiempo de construcción, asegúrate de resolverlas primero!"

Nota: En modo desarrollo, getStaticProps se ejecuta en cada solicitud en lugar de en tiempo de construcción.

Usemos getStaticProps

Es más fácil aprender haciendo, así que a partir de la siguiente página, usaremos getStaticProps para implementar nuestro blog.