# Vercel / Next.js

> Middleware en el edge de Vercel, para Next.js o cualquier sitio estático en Vercel.

Página original: https://docs.jazui.com/integrations/vercel/es

Vercel ejecuta `middleware.js` antes de cada petición. El de Jazui pide a Jazui las páginas para bots y deja pasar el resto: si devuelve `undefined`, la petición sigue su camino normal.

## Antes de empezar

- Un proyecto en Vercel (Next.js, Vite, Angular, React…).
- Tu sitio verificado en Jazui y tu token.

## Instalación

Descarga estos dos archivos y ponlos en la raíz del proyecto (en Next.js, junto a `app/` o `pages/`; si usas `src/`, dentro de `src/`). El primero se tiene que llamar `middleware.js`:

```bash
mi-proyecto/
├── app/            (o pages/, o tu SPA)
├── middleware.js   ← vercel-middleware.js
└── core.js
```

`middleware.js` (https://docs.jazui.com/example_config/vercel-middleware.js):

```javascript
// Middleware de Vercel (también de Next.js): copia este archivo como middleware.js en la raíz del proyecto, con
// core.js al lado, y define JAZUI_TOKEN en las variables de entorno. Sin respuesta, la petición sigue su camino.
import { renderRequest } from './core.js';

export default async function middleware(request, context) {
  const ip = (request.headers.get('x-forwarded-for') || '').split(',')[0].trim() || request.headers.get('x-real-ip');
  const rendered = await renderRequest(request, {
    token: process.env.JAZUI_TOKEN,
    api: process.env.JAZUI_API,
    siteUrl: process.env.JAZUI_SITE_URL,
    waitUntil: context?.waitUntil?.bind(context),
  }, ip);
  return rendered ?? undefined;
}

export const config = { matcher: '/((?!api/|_next/|_vercel/).*)' };
```

`core.js` (https://docs.jazui.com/example_config/core.js):

```javascript
// Núcleo común de las integraciones JavaScript de Jazui (Cloudflare Workers, Netlify, Vercel y Express).
// Solo usa la API Fetch estándar: funciona en Node 18+, Deno y los runtimes de borde.

export const DEFAULT_API = 'https://api.jazui.com';
export const DEFAULT_TIMEOUT_MS = 20000;

// Bots a los que se sirve el HTML renderizado (bots.txt; lo rellena Sync-Integrations.ps1)
export const BOTS = [
  // BOTS:BEGIN
  'googlebot', 'google-inspectiontool', 'storebot-google', 'adsbot-google', 'bingbot', 'bingpreview', 'msnbot',
  'adidxbot', 'yandex', 'baiduspider', 'duckduckbot', 'slurp', 'applebot', 'seznambot', 'qwantbot', 'qwantify',
  'petalbot', 'sogou', 'naver', 'exabot', 'yetibot', '360spider', 'soso', 'gptbot', 'chatgpt', 'oai-searchbot',
  'claudebot', 'claude-user', 'claude-searchbot', 'anthropic-ai', 'perplexity', 'google-cloudvertexbot',
  'bytespider', 'ccbot', 'amazonbot', 'meta-externalagent', 'cohere-ai', 'mistralai-user', 'youbot',
  'duckassistbot', 'yibot', 'qwenbot', 'tongyibot', 'erniebot', 'yiyanbot', 'doubaobot', 'tiktokspider',
  'deepseekbot', 'pangubot', 'manus-user', 'kimi-agent', 'kimi-searchbot', 'kimi-user', 'kimibot', 'moonshotbot',
  'hunyuan', 'chatglm-spider', 'agi agent', 'ai2bot', 'ai2bot-deepresearcheval', 'ai2bot-dolma', 'aihitbot',
  'amazon-kendra', 'amazon-qbusiness', 'amazonbuyforme', 'amzn-searchbot', 'amzn-user', 'bedrockbot', 'novaact',
  'andibot', 'claude-web', 'apifybot', 'apifywebsitecontentcrawler', 'atlassian-bot', 'awario', 'bigsur.ai',
  'brightbot', 'buddybot', 'cartai agentic commerce', 'terracotta', 'cledarabot', 'cloudflare-autorag',
  'cloudflarebrowserrenderingcrawler', 'cohere-training-data-crawler', 'cragcrawler', 'crawlspace',
  'datenbank crawler', 'diffbot', 'diffbot-user', 'anomura', 'echobot bot', 'echoboxbot', 'elevenlabsbot',
  'elevenlabscrawler', 'exasearchbot', 'exauser', 'factset_spyderbot', 'firecrawlagent', 'geisthaus-pagefetcher',
  'cloudvertexbot', 'gemini-deep-research', 'google-agent', 'google-firebase', 'google-notebooklm',
  'googleagent-mariner', 'googleagent-urlcontext', 'googleother', 'googleother-image', 'googleother-video',
  'notebooklm', 'iaskbot', 'iaskspider', 'imagesiftbot', 'img2dataset', 'isscyberriskcrawler', 'kagi-fetcher',
  'keenablebot', 'klaviyoaibot', 'laiondownloader', 'linguee bot', 'linkupbot', 'aiwebindex',
  'meta-externalfetcher', 'meta-webindexer', 'facebookbot', 'azureai-searchbot', 'mistralai-index',
  'mistralai-training', 'mozilla-tabstack', 'nagetbot', 'netestate imprint crawler', 'icc-crawler', 'oai-adsbot',
  'panscient', 'panscient.com', 'shapbot', 'payhawk invoice fetching agent', 'phindbot', 'poggio-citations',
  'poseidon research crawler', 'qualifiedbot', 'wpbot', 'querit-searchbot', 'queritbot', 'quillbot',
  'quillbot.com', 'reflectionbot', 'cotoyogi', 'sbintuitionsbot', 'scrybot', 'sidetrade indexer bot', 'tavilybot',
  'agenttimes', 'thinkbot', 'timpibot', 'twinagent', 'velenpublicwebcrawler', 'wardbot', 'omgili', 'omgilibot',
  'grok bot', 'grokappandroid', 'grokbot', 'addsearchbot', 'agentdatabot', 'aranet-searchbot', 'bixelbot',
  'bravebot', 'channel3bot', 'friendlycrawler', 'henkbot', 'imagespider', 'kangaroo bot', 'kunatocrawler',
  'laion-huggingface-processor', 'linerbot', 'mycentralaiscraperbot', 'terra cotta', 'wrtnbot', 'zanistabot',
  'facebookexternalhit', 'facebot', 'twitterbot', 'linkedinbot', 'slackbot', 'whatsapp', 'telegrambot',
  'discordbot', 'pinterest', 'redditbot', 'skypeuripreview', 'embedly', 'quora link preview', 'showyoubot',
  'outbrain', 'developers.google.com/+/web/snippet', 'vkshare', 'tumblr', 'bitlybot', 'nuzzel', 'flipboard',
  'snapchat', 'viber', 'mattermost', 'bitrix link preview', 'xing-contenttabreceiver', 'ahrefsbot', 'semrushbot',
  'mj12bot', 'majestic-12', 'dotbot', 'rogerbot', 'screaming frog', 'sitebulb', 'serpstatbot', 'seokicks',
  'siteimprove', 'lighthouse', 'google page speed', 'gtmetrix', 'pingdom', 'uptimerobot', 'uptimebot',
  'w3c_validator', 'w3c-checklink', 'archive.org_bot', 'paperlibot', 'dataprovider.com', 'grapeshotcrawler',
  'zoominfobot', 'feedly', 'newsblur', 'inoreader', 'integration-test',
  // BOTS:END
];

// Archivos que nunca se renderizan (extensions.txt)
export const STATIC_EXTENSIONS = [
  // EXTENSIONS:BEGIN
  'js', 'mjs', 'css', 'less', 'map', 'json', 'xml', 'rss', 'txt', 'webmanifest', 'ico', 'png', 'jpg', 'jpeg',
  'gif', 'webp', 'avif', 'svg', 'bmp', 'tif', 'tiff', 'psd', 'ai', 'woff', 'woff2', 'ttf', 'otf', 'eot', 'mp3',
  'm4a', 'wav', 'ogg', 'mp4', 'm4v', 'webm', 'avi', 'mov', 'mpg', 'mpeg', 'wmv', 'flv', 'swf', 'pdf', 'doc',
  'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'csv', 'zip', 'gz', 'rar', '7z', 'iso', 'torrent', 'exe', 'dmg', 'apk',
  'wasm', 'dll', 'dat', 'blat',
  // EXTENSIONS:END
];

const escapeRegex = (text) => text.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
// Patrón de la lista incluida; refreshBots lo sustituye por el del catálogo de Jazui (GET /v2/bots)
export const BOT_PATTERN = new RegExp(BOTS.map(escapeRegex).join('|'), 'i');
export const STATIC_PATTERN = new RegExp(`\\.(${STATIC_EXTENSIONS.join('|')})$`, 'i');

let botPattern = BOT_PATTERN;
let botsVersion = 'incluida';
let botsCheckedAt = 0;
let botsLoading = null;
const BOTS_REFRESH_MS = 24 * 60 * 60 * 1000;
const BOTS_RETRY_MS = 60 * 60 * 1000;

/** Patrón de bots en uso: el del catálogo si ya se descargó, si no el de la lista incluida. */
export const currentBotPattern = () => botPattern;

/** Versión de la lista en uso ('incluida' hasta la primera descarga). */
export const currentBotsVersion = () => botsVersion;

/**
 * Descarga la lista de bots del catálogo de Jazui (GET /v2/bots) si toca: al arrancar y cada 24 h; si falla se
 * sigue con la que hay y se reintenta en una hora. Nunca falla ni retrasa la petición: devuelve la promesa para
 * waitUntil (Cloudflare, Vercel, Netlify) o null si no toca. Se desactiva con remoteBots: false.
 */
export function refreshBots({ api = DEFAULT_API, remoteBots = true } = {}) {
  const now = Date.now();
  if (!remoteBots || botsLoading || now - botsCheckedAt < BOTS_REFRESH_MS) return null;
  botsCheckedAt = now;
  botsLoading = fetch(`${(api || DEFAULT_API).replace(/\/+$/, '')}/v2/bots`, { signal: AbortSignal.timeout(5000) })
    .then((response) => (response.ok ? response.json() : null))
    .then((data) => {
      if (data && Array.isArray(data.bots) && data.bots.length > 0) {
        botPattern = new RegExp(data.bots.map(escapeRegex).join('|'), 'i');
        botsVersion = data.version || botsVersion;
      } else {
        botsCheckedAt = now - BOTS_REFRESH_MS + BOTS_RETRY_MS;
      }
    }, () => { botsCheckedAt = now - BOTS_REFRESH_MS + BOTS_RETRY_MS; })
    .finally(() => { botsLoading = null; });
  return botsLoading;
}

// Cabeceras de Jazui que se devuelven al bot
const PASS_HEADERS = ['content-type', 'location', 'etag', 'last-modified', 'x-jazui', 'x-jazui-cache'];

/**
 * Si la petición hay que pasarla por Jazui: GET/HEAD de un bot conocido (o con _escaped_fragment_, el esquema
 * antiguo de Google para las SPA) a una página, no a un archivo.
 */
export function shouldRender({ method, url, userAgent, headers }) {
  if (method !== 'GET' && method !== 'HEAD') return false;
  if (headers && headers.get('x-jazui')) return false; // nunca a sí mismo
  const { pathname, search } = new URL(url);
  if (STATIC_PATTERN.test(pathname)) return false;
  return (!!userAgent && botPattern.test(userAgent)) || search.includes('_escaped_fragment_');
}

/**
 * Pide a Jazui el HTML de la URL. Devuelve la Response para el bot o null si hay que servir la página normal
 * (Jazui no respondió, se pasó del límite, el sitio no está verificado…): el bot nunca ve un error de Jazui.
 * Solo un 403 marcado con X-Jazui-Blocked (regla o bot de IA bloqueado) llega al bot.
 */
export async function fetchRendered({ url, method = 'GET', userAgent, clientIp, ifNoneMatch, token, api = DEFAULT_API,
                                      siteUrl, timeoutMs = DEFAULT_TIMEOUT_MS }) {
  if (!token) return null;
  let target = url;
  if (siteUrl) {
    // Dominio público del sitio cuando el servidor lo ve con otro (proxy, entorno de pruebas)
    const original = new URL(url);
    target = new URL(original.pathname + original.search, siteUrl).toString();
  }
  const query = new URLSearchParams({ url: target, botAgent: userAgent || '' });
  const headers = { Authorization: `Bearer ${token}` };
  if (clientIp) headers['X-Jazui-Client-IP'] = clientIp;
  if (ifNoneMatch) headers['If-None-Match'] = ifNoneMatch;

  let response;
  try {
    response = await fetch(`${(api || DEFAULT_API).replace(/\/+$/, '')}/Render?${query}`, {
      headers,
      redirect: 'manual',
      signal: AbortSignal.timeout(timeoutMs),
    });
  } catch {
    return null;
  }

  const blocked = response.status === 403 && response.headers.get('x-jazui-blocked');
  if (!response.headers.get('x-jazui') && !blocked) {
    response.body?.cancel();
    return null;
  }
  const out = new Headers();
  for (const name of PASS_HEADERS) {
    const value = response.headers.get(name);
    if (value) out.set(name, value);
  }
  if (blocked) out.set('x-jazui-blocked', blocked);
  const empty = method === 'HEAD' || response.status === 304;
  if (empty) response.body?.cancel();
  return new Response(empty ? null : response.body, { status: response.status, headers: out });
}

// User-agents con pinta de bot: si no están en BOTS se avisa a Jazui sin enviarle la página (el mismo patrón que la API)
export const UNKNOWN_BOT_PATTERN = /bot|crawl|spider|scrap|fetch|headless|preview|archiv|index/i;
const MAX_REPORTED = 1000;
const reported = new Set();
let reportedDay = '';

/**
 * Avisa a Jazui (POST /Render/Seen) de un user-agent con pinta de bot que no está en la lista, una vez al día por
 * user-agent y proceso, para que se pueda añadir al catálogo. No gasta renders y nunca falla: devuelve la promesa para
 * waitUntil (Cloudflare, Vercel) o null si no hay que avisar.
 */
export function reportUnknownBot({ method, url, userAgent, token, api = DEFAULT_API, reportUnknownBots = true }) {
  if (!reportUnknownBots || !token || !userAgent || (method !== 'GET' && method !== 'HEAD')) return null;
  if (STATIC_PATTERN.test(new URL(url).pathname)) return null;
  if (!UNKNOWN_BOT_PATTERN.test(userAgent) || botPattern.test(userAgent)) return null;
  const today = new Date().toISOString().slice(0, 10);
  if (reportedDay !== today) {
    reported.clear();
    reportedDay = today;
  }
  if (reported.size >= MAX_REPORTED || reported.has(userAgent)) return null;
  reported.add(userAgent);
  return fetch(`${(api || DEFAULT_API).replace(/\/+$/, '')}/Render/Seen`, {
    method: 'POST',
    headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({ userAgent, url }),
    signal: AbortSignal.timeout(5000),
  }).then((response) => { response.body?.cancel(); }, () => {});
}

/**
 * Atajo para los runtimes con Request estándar: la Response de Jazui o null. Con options.waitUntil (Cloudflare,
 * Vercel) la descarga de la lista de bots y el aviso de bots desconocidos siguen aunque la respuesta ya se haya enviado.
 */
export function renderRequest(request, options, clientIp) {
  const refresh = refreshBots(options);
  if (refresh && options.waitUntil) options.waitUntil(refresh);
  const userAgent = request.headers.get('user-agent') || '';
  if (!shouldRender({ method: request.method, url: request.url, userAgent, headers: request.headers })) {
    const report = reportUnknownBot({ ...options, method: request.method, url: request.url, userAgent });
    if (report && options.waitUntil) options.waitUntil(report);
    return null;
  }
  return fetchRendered({
    ...options,
    url: request.url,
    method: request.method,
    userAgent,
    clientIp,
    ifNoneMatch: request.headers.get('if-none-match'),
  });
}
```

El `matcher` deja fuera `/api/`, `/_next/` y `/_vercel/`. Si ya tenías un `middleware.js`, llama primero a la función de Jazui y, si devuelve una respuesta, devuélvela; si no, sigue con tu lógica.

## Variables de entorno

| Variable | Obligatoria | Para qué |
|---|---|---|
| `JAZUI_TOKEN` | Sí | Tu token de la cuenta o del sitio. Guárdalo como **secreto**, nunca en el código. |
| `JAZUI_API` | No | Dirección de la API. Por defecto `https://api.jazui.com`. |
| `JAZUI_SITE_URL` | No | Tu dominio público (por ejemplo `https://misitio.com`) si la plataforma ve otro, como una dirección de vista previa: Jazui renderiza la página con ese dominio. |

Sin `JAZUI_TOKEN` la integración no hace nada y toda la web se sirve normal.

```bash
vercel env add JAZUI_TOKEN production
```

## Qué hace

Toma la IP del bot de `x-forwarded-for` (o `x-real-ip`), pide la página a Jazui y la devuelve si llega. La lista de bots y los avisos se hacen en segundo plano con `waitUntil`. Tras añadir la variable, vuelve a desplegar para que la use.

## <p>Pide tu portada como si fueras un bot, con el agente de usuario de pruebas integration-test:</p><pre>curl -I -A "integration-test" https://misitio.com/</pre><p>La respuesta debe llevar x-jazui: true y x-jazui-cache: MISS la primera vez y HIT después. Sin agente de bot (curl -I https://misitio.com/) debe llegar tu web de siempre, sin x-jazui. En el panel, la petición aparece en Tráfico de bots y la página en Páginas en caché.</p>

Pide tu portada como si fueras un bot, con el agente de usuario de pruebas `integration-test`:

```
curl -I -A "integration-test" https://misitio.com/
```

La respuesta debe llevar `x-jazui: true` y `x-jazui-cache: MISS` la primera vez y `HIT` después. Sin agente de bot (`curl -I https://misitio.com/`) debe llegar tu web de siempre, sin `x-jazui`. En el panel, la petición aparece en **Tráfico de bots** y la página en **Páginas en caché**.

## Si algo no funciona

- **No aparece `x-jazui`**: el archivo tiene que llamarse `middleware.js` y estar en la raíz (o en `src/`); comprueba en el registro del despliegue que Vercel lo detecta como Middleware.
- **La variable no llega**: añádela al entorno **Production** (y Preview si pruebas ahí) y vuelve a desplegar.
- **Pruebas en una dirección de vista previa**: define `JAZUI_SITE_URL` con tu dominio verificado, porque `*.vercel.app` no está verificado.