Cómo utilizar getStaticProps en Next.js para consumir datos de una API externa

Next.js es un framework de desarrollo web que permite construir aplicaciones web modernas y escalables utilizando React. Una de las características más poderosas de Next.js es la capacidad de generar páginas estáticas a partir de datos dinámicos.

Una manera de consumir datos de una API externa en Next.js es utilizando la función getStaticProps. Esta función se utiliza en un componente de página para obtener los datos necesarios antes de renderizar la página estática.

Para utilizar getStaticProps, primero necesitas importar la función en tu archivo de página:

      
        import { getStaticProps } from 'next'
      
    

Luego, debes crear una función async llamada getStaticProps que devuelva los datos que deseas consumir de la API externa. Por ejemplo:

      
        export async function getStaticProps() {
          const res = await fetch('https://api.example.com/data')
          const data = await res.json()

          return {
            props: {
              data
            }
          }
        }
      
    

En este ejemplo, la función getStaticProps realiza una petición a la API externa y devuelve los datos como una propiedad de la página. Estos datos estarán disponibles para el componente de la página cuando se renderice.

Finalmente, debes exportar la función getStaticProps desde tu archivo de página para que Next.js la utilice al generar la página estática:

      
        export async function getStaticProps() {
          // ...
        }

        export default function MyPage({ data }) {
          // ...
        }
      
    

Al utilizar getStaticProps en Next.js, puedes consumir datos de una API externa y generar páginas estáticas con esos datos. Esto te permite crear aplicaciones web rápidas y eficientes que ofrecen una experiencia de usuario de alta calidad.