Tutorial: Primeros pasos con Nextjs — 6. Conectando Content Island con Nextjs

00:00 / 00:00

6. Conectando Content Island con Nextjs

Ya estamos listos para empezar a insertar contenido de Content Island en nuestro sitio.

Vamos a hacer el setup de Content Island. ¿Qué nos va a hacer falta?

Instalarnos la librería de API de Content Island.
Añadir una variable de entorno con el API Key de nuestro proyecto.

Para instalar la librería de API de Content Island:

npm install @content-island/api-client --save

También nos hace falta añadir como variable de entorno el API Key de nuestro proyecto en Content Island. ¿Por qué? Porque no todo el mundo puede acceder a mis datos de Content Island, yo en mi proyecto tengo una API Key y puedo explotarlos.

Para ello, nos vamos al portal de Content Island, elegimos el proyecto en el que estamos trabajando, y en la pestaña de "General" podemos copiar el API Key (campo Token).

Content Island Token

Ahora creamos un fichero ".env.local" en la raíz del proyecto y añadimos la variable de entorno:

CONTENT_ISLAND_SECRET_TOKEN=API_KEY

Puedes usar el valor del token del ejemplo (CONTENT_ISLAND_SECRET_TOKEN=92925813362dd0bdc4816da745a90121) si todavía no tienes el tuyo propio.

Nextjs nos permite crear ficheros de variables para cada entorno. En este caso, como estamos en desarrollo, le añadimos el sufijo ".local".

Para producción, se recomienda crear variables de entorno en la plataforma donde se despliega la aplicación o en las pipelines de CI/CD.

Vamos a iniciar ahora la librería de Content Island en nuestro proyecto e inyectarle la API Key.

./src/lib/client.ts

import { createClient } from "@content-island/api-client";

export const client = createClient({
  accessToken: process.env.CONTENT_ISLAND_SECRET_TOKEN ?? "",
});

Y ya tenemos todo listo para empezar a trabajar con los datos. :)