Domina Next.js creando imágenes OG dinámicas sin @vercel/og

Crear imágenes OG dinámicas en Next.js normalmente implica depender de bibliotecas externas, pero puedes hacerlo de manera nativa con un simple truco.

El truco

import { createCanvas, loadImage } from 'canvas';
import { NextResponse } from 'next/server';

export const GET = async (req) => {
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  const backgroundImage = await loadImage('https://via.placeholder.com/1200x630');
  ctx.drawImage(backgroundImage, 0, 0, 1200, 630);

  ctx.font = 'bold 72px Arial';
  ctx.fillStyle = '#FFFFFF';
  ctx.fillText('Tu Texto Dinámico', 100, 300);

  const buffer = canvas.toBuffer('image/png');
  return new NextResponse(buffer, {
    headers: {
      'Content-Type': 'image/png',
      'Content-Disposition': 'inline',
    },
  });
};

Gracias al módulo canvas, puedes renderizar imágenes en un contexto de servidor dentro de Next.js y utilizar JavaScript puro para personalizar tus imágenes OG, evitando dependencias innecesarias. Solo necesitas definir tus elementos gráficos y manipularlos mediante el contexto de canvas.

Este enfoque no solo simplifica tu stack eliminando dependencias, sino que también te permite personalizar completamente tus imágenes OG de forma dinámica y eficiente.