¿Quieres generar imágenes OG dinámicas en tu proyecto Next.js pero no quieres usar la librería @vercel/og?

El truco

// ANTES
// Usando @vercel/og, que puede no ser deseado por su overhead o restricciones.
import { ImageResponse } from '@vercel/og';

export async function getStaticProps() {
  return new ImageResponse(
    <div>Tu imagen OG</div>
  );
}

// DESPUÉS
// Generando sin @vercel/og usando Puppeteer
import puppeteer from 'puppeteer';

export async function getStaticProps() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setContent(`
    <html>
      <body>
        <h1>¡Hola Mundo!</h1>
      </body>
    </html>
  `);

  const screenshot = await page.screenshot({ type: 'png' });

  await browser.close();

  return {
    props: { screenshot: screenshot.toString('base64') }
  };
}

Aprovechamos Puppeteer para renderizar HTML y capturar una captura de pantalla como imagen OG. Este método es flexible y evita depender de librerías específicas para OG. Usamos puppeteer.launch() para iniciar un navegador y page.screenshot() para obtener la imagen. La imagen se convierte a base64 para un manejo sencillo en la parte frontend.

Generar imágenes OG sin librerías específicas te da más control y flexibilidad en tus proyectos.