El error común con proxy.ts en Next.js que debes evitar

Te estás quedando atrás con el enrutamiento si no configuras bien el archivo proxy.ts en Next.js.

El truco

ANTES (mal):

import { createProxyMiddleware } from 'http-proxy-middleware';

export default function proxy(req, res) {
  const apiProxy = createProxyMiddleware('/api', { target: 'https://api.example.com' });
  return apiProxy(req, res);
}

DESPUÉS (bien):

import { createProxyMiddleware } from 'http-proxy-middleware';

export default function proxy(req, res) {
  return createProxyMiddleware({
    target: 'https://api.example.com',
    changeOrigin: true,
    pathRewrite: { '^/api': '' }, 
    secure: false,
  })(req, res);
}

Si solo usas createProxyMiddleware sin opciones adicionales, es probable que te encuentres con problemas de enrutamiento. Añadir changeOrigin: true es esencial para cambiar la cabecera de Host del proxy al destino del servidor, mientras que pathRewrite te ayuda a modificar las rutas adecuadamente. secure: false es útil cuando trabajas con servidores de desarrollo con certificados SSL autofirmados.

Pequeños cambios en la configuración pueden hacer una gran diferencia para evitar problemas innecesarios en producción.