Next.js sin Vercel: Genera imágenes OG dinámicas tú mismo

Generar imágenes OG dinámicas es esencial para mejorar el SEO y la apariencia de las comparticiones en redes, pero puedes hacerlo sin depender de servicios externos como @vercel/og.

El truco

// ANTES: Dependencia de @vercel/og para generar imágenes OG
// import { ImageResponse } from '@vercel/og';

// DESPUÉS: Usamos node-canvas para crear la imagen
import { createCanvas, loadImage } from 'canvas';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const canvas = createCanvas(1200, 630);
  const context = canvas.getContext('2d');

  // Fondo
  context.fillStyle = '#ffffff';
  context.fillRect(0, 0, canvas.width, canvas.height);

  // Texto
  context.font = 'bold 70pt Sans';
  context.textAlign = 'center';
  context.fillStyle = '#000000';
  context.fillText('Título Dinámico', canvas.width / 2, canvas.height / 2);

  // Puedes añadir más elementos o cargar imágenes adicionales
  const buffer = canvas.toBuffer('image/png');
  res.setHeader('Content-Type', 'image/png');
  res.setHeader('Cache-Control', 's-maxage=86400');
  res.end(buffer);
}

Este enfoque utiliza la librería node-canvas para crear una imagen dinámicamente mediante un endpoint en Next.js. Configuramos un canvas, dibujamos sobre él texto o imágenes, y finalmente enviamos el resultado como una respuesta de imagen PNG. Esto te da control total sobre el diseño sin necesidad de servicios externos.

Generar tus propias imágenes OG te da flexibilidad y elimina la dependencia de servicios adicionales, potenciando la personalización de tus proyectos.