Capturar solicitudes HTTP del servidor en Next.js con Proxyman

1. Problemas

Cuando haces una solicitud HTTP/HTTPS desde Next.js en el servidor usando fetch(), depurar la red resulta muy difícil. La solución temporal consiste en usar console.log() para imprimir la solicitud y la respuesta en la app Terminal.

Por eso, depurar una base de código grande con cientos de solicitudes es una pesadilla.

Este artículo cubre lo siguiente:

• Cómo capturar solicitudes HTTP/HTTPS del servidor en Next.js 15 con Proxyman

2. Solución

Proxyman presenta la función Automatic Setup, que abre una app Terminal ya configurada. Al iniciar tu servidor de Next.js en esta Terminal, Proxyman captura automáticamente todo el tráfico HTTP/HTTPS de tu proyecto de Next.js.

Ventajas:

• No necesitas configurar el proxy
• No necesitas confiar en el certificado de Proxyman
• Funciona desde el primer momento
• Más fácil de configurar que usar la herramienta Reverse Proxy

Estos son los pasos:

1. Indica a fetch() que no reutilice un resultado guardado en caché con cache: 'no-store' cuando necesites que cada solicitud llegue al servidor.

export default async function MyPage() {
    const res = await fetch('https://httpbin.org/anything', { cache: 'no-store' })
    return <div>My Page{res.text()}</div>
}

=> El comportamiento de la caché depende de la versión de Next.js y de si la ruta se compila de antemano o se renderiza en cada solicitud. La recarga en caliente del modo desarrollo también puede reutilizar el resultado de fetch de un Server Component. => { cache: 'no-store' } hace que Next.js consulte el servidor remoto en cada solicitud, lo que resulta útil mientras verificas la llamada en Proxyman.

2. Abre Proxyman -> Setup -> Automatic Setup -> Open new Terminal

3. Desde esta Terminal -> inicia tu proyecto de Next.js aquí con npm run dev

4. Listo: Proxyman captura e intercepta todas las solicitudes HTTP/HTTPS de fetch().

3. Próximos pasos

• Si prefieres usar tu propia app de Terminal, puedes usar la configuración manual (Manual Setup). Consulta esta documentación para saber cómo configurarla: https://proxyman.com/docs/automatic-setup/manual-setup
• La herramienta Automatic/Manual Setup funciona con NodeJS, Python y Ruby.

Ejecuta el comando de Next.js en la terminal que abre Proxyman, ya que la configuración pertenece a esa sesión de terminal. Si una llamada sigue sin aparecer, navega a la página completa en lugar de usar la recarga en caliente y confirma que el código se ejecuta en el servidor. Las llamadas fetch del lado del navegador siguen la configuración del navegador.