Renderizado de Listas con Next.js y Contentful

¿Cómo configuro la página de inicio en Next.js?

Comencemos a concretar lo que hemos aprendido con Next.js creando una página de inicio que lista los ítems más recientes disponibles en Contentful. Primero, vamos a iniciar revisando nuestro archivo pages/index.tsx. Si ya hiciste cambios previos a este archivo para prueba, es buena idea descartarlos. Para ello, puedes eliminar las modificaciones con Git y asegurarte de comenzar con un archivo limpio, al que renombraremos para usarlo como documentación.

A continuación, crea un archivo index.tsx vacío y ábrelo en VS Code. Para verificar el funcionamiento, agrega un simple “Hola” en nuestro componente y ejecuta el servidor de Next.js, especificando tu space ID y access token como variables de entorno para que funcione la API de Contentful.

import React from 'react';

export default function Home() {
  return <div>Hola</div>;
}

¿Cómo obtengo y guardo datos desde la API de Contentful?

Para mostrar una lista de plantas desde nuestra API, utilizaremos el método getPlantList. Este método emplea promesas y HTTP, así que se integrará utilizando useEffect de React para hacer la llamada desde el cliente.

Dentro de Home, usaremos useEffect para traer nuestra lista desde la API limitando a diez resultados. No olvides verificar que la conexión esté estable y funcione usando console.log.

También crearemos un estado con useState para almacenar los datos obtenidos:

import React, { useEffect, useState } from 'react';

// Supongamos que esta es nuestra función de consulta a la API
import { getPlantList } from './api'; 

export default function Home() {
  const [data, setData] = useState([]); // Estado inicial como array vacío

  useEffect(() => {
    getPlantList().then(receivedData => {
      // Actualiza el estado con los datos recibidos
      setData(receivedData);
    });
  }, []);

  return <div>Hola</div>;
}

¿Cómo renderizo los datos obtenidos?

Con nuestra lista de plantas lista, el siguiente paso es renderizar los datos. Podríamos utilizar un map en data para mostrar cada ítem, con su nombre y su imagen.

return (
  <div>
    {data.map(item => (
      <div key={item.id}>
        <h2>{item.plantName}</h2>
        <img src={item.image.url} alt={item.plantName} />
      </div>
    ))}
  </div>
);

Uso de componentes de React preconstruidos

No es necesario reinvertar la rueda al crear estos componentes. El proyecto ya incluye un componente llamado PlantCollection dentro del folder components, que se encarga de renderizar las plantas. Puedes usarlo de la siguiente manera:

import PlantCollection from './components/PlantCollection';

return (
  <PlantCollection plants={data} variant="square" />
);

¿Qué tipo de renderizado hemos implementado?

Finalmente, el método useEffect se ejecuta solo en el navegador, lo que significa que estamos usando client side rendering (CSR). Esto implica que el renderizado inicial es gestionado en el cliente, a diferencia del static rendering o server-side rendering (SSR). En la próxima lección, exploraremos cómo mover este proceso hacia un static rendering.