Integra Next.js con Headless CMS en 4 Pasos Simples

Introducción

Actualmente, los Headless CMS ganan protagonismo al permitir la separación entre la gestión de contenido y la presentación visual. Este modelo, que utiliza APIs para la entrega de contenido, resulta en sitios más rápidos y escalables.

Next.js es uno de los frameworks más utilizados con React y es especialmente adecuado para la integración con Headless CMS. Sus funcionalidades, como renderizado del lado del servidor (SSR), generación de sitio estático (SSG) y rutas de API, lo convierten en la elección ideal para plataformas como Strapi, Contentful, Sanity y WordPress en modo headless.

En este artículo, abordaremos:

• Definición y funcionamiento de un Headless CMS;
• Por qué Next.js es la elección ideal para esta integración;
• Una guía paso a paso para la integración;
• Las mejores opciones de Headless CMS para Next.js.

Vamos a comenzar entendiendo qué es un Headless CMS.

¿Qué es un Headless CMS?

Un Headless CMS es un sistema de gestión de contenido que desacopla la creación y el almacenamiento de datos de la presentación visual. En términos prácticos, permite que los usuarios creen y gestionen contenidos, como textos e imágenes, sin definir cómo se mostrarán esos contenidos.

Para visualizar, imagina una biblioteca: un CMS tradicional, como WordPress, actúa como un bibliotecario que organiza la exhibición de los libros, mientras que un Headless CMS solo almacena los libros, dejando la exhibición a criterio del desarrollador.

Así, un Headless CMS se enfoca en el almacenamiento de contenido, facilitando su entrega en múltiples plataformas.

¿Cómo funciona un Headless CMS?

• El contenido es creado y almacenado en el Headless CMS;
• El CMS proporciona una API REST o GraphQL para acceder a ese contenido;
• Next.js consume la API y muestra el contenido dinámicamente.

Esta arquitectura desacoplada proporciona una gestión de contenido más flexible y escalable.

¿Por qué Next.js es perfecto para integraciones con Headless CMS?

Next.js ofrece variadas opciones de renderizado, rutas de API y recursos de optimización, convirtiéndose en la elección ideal para plataformas de Headless CMS.

Renderizado del Lado del Servidor (SSR)

La SSR permite que Next.js busque contenido del Headless CMS cuando se solicita, siendo especialmente útil para sitios que necesitan actualizaciones en tiempo real.

export async function getServerSideProps() {
  const res = await fetch("https://cms-api.com/posts");
  const posts = await res.json();

  return { props: { posts } };
}

Generación de Sitio Estático (SSG)

El SSG permite la pre-renderización de páginas durante la construcción del sitio, reduciendo la carga del servidor y mejorando el SEO.

export async function getStaticProps() {
  const res = await fetch("https://cms-api.com/posts");
  const posts = await res.json();

  return { props: { posts } };
}

Rutas de API

Next.js permite crear rutas de API, viabilizando lógicas personalizadas, como manipulación de webhooks.

export default function handler(req, res) {
  res.status(200).json({ message: "¡Hola desde la API de Next.js!" });
}

Regeneración Estática Incremental (ISR)

La ISR permite actualizar páginas estáticas sin reconstruir todo el sitio, siendo eficaz para contenido dinámico.

export async function getStaticProps() {
  const res = await fetch("https://cms-api.com/posts");
  const posts = await res.json();

  return { props: { posts }, revalidate: 60 }; // Actualiza cada 60 segundos
}

Optimización de Imágenes

Next.js optimiza automáticamente las imágenes almacenadas en el Headless CMS, mejorando el rendimiento y las clasificaciones en Google PageSpeed.

import Image from "next/image";

<Image src="https://cms-api.com/images/post.jpg" width={500} height={300} alt="Imagen del Blog" />;

Guía Paso a Paso: Integrando un Headless CMS con Next.js

Para la integración, sigue los pasos a continuación:

Paso 1: Elige un Headless CMS

Ve algunas opciones populares:

• Strapi – CMS open-source y auto-hospedado;
• Contentful – CMS basado en API y hospedaje en la nube;
• Sanity – Edición colaborativa en tiempo real;
• WordPress (Headless) – Famoso, pero en modo desacoplado.

Paso 2: Busca Datos de la API del CMS

Utiliza getStaticProps o getServerSideProps según la necesidad de actualizaciones.

export async function getStaticProps() {
  const res = await fetch("https://cms-api.com/posts");
  const posts = await res.json();

  return { props: { posts } };
}

Paso 3: Muestra el Contenido en las Páginas de Next.js

Usa el método map para presentar los datos.

export default function Blog({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <h2 key={post.id}>{post.title}</h2>
      ))}
    </div>
  );
}

Paso 4: Implementa en Vercel para Mejor Desempeño

Next.js está optimizado para Vercel, garantizando un despliegue eficiente.

vercel deploy

Mejores Opciones de Headless CMS para Next.js

1. Strapi
Sitio: https://strapi.io/
Mejor para: Auto-hospedaje y personalización.

• Open-source y auto-hospedado;
• APIs REST y GraphQL.

2. Contentful
Sitio: https://www.contentful.com/
Mejor para: Empresas y hospedaje en la nube.

• Estructura de contenido flexible;
• Gestión completa y escalabilidad.

3. Sanity
Sitio: https://www.sanity.io/
Mejor para: Colaboración en tiempo real.

• Soporte a actualizaciones en tiempo real;
• Ideal para equipos de contenido.

4. WordPress
Sitio: https://wordpress.org/
Mejor para: Familiaridad en modo headless.

• Facilidad para editores no técnicos;
• Utiliza la API REST de WordPress.

Conclusión

Next.js se convierte en una opción robusta para integrar un Headless CMS debido a sus capacidades diversas:

• Opciones de búsqueda de datos flexibles (SSR, SSG, ISR);
• Desempeño superior para SEO y experiencia del usuario;
• Rutas de API y lógica personalizada;
• Optimización automática de imágenes;
• Despliegue facilitado con Vercel.

Para proyectos que requieren escalabilidad y desempeño, la combinación de Next.js con un Headless CMS es un enfoque eficaz para desarrollar aplicaciones web contemporáneas.