Cómo utilizar PortPreview con una aplicación Next.js

Para usar PortPreview con una aplicación Next.js, ejecute next dev en el puerto 3000, inicie npx portpreview 3000 y use la URL HTTPS para redireccionamientos OAuth, controladores de ruta de webhook, vistas previas móviles y uso compartido de la interfaz de usuario en progreso; no se requiere implementación.

Por qué hacer un túnel en una aplicación Next.js

Next.js suele ser la cara pública de un producto: páginas de marketing, paneles y controladores de ruta API en un solo repositorio. Los terceros aún no pueden comunicarse con localhost. Un túnel le brinda un origen HTTPS público estable mientras itera en next dev o next dev --turbo.

• Webhooks. Stripe, Clerk y reenvíe POST a sus rutas app/api/.... Ver Next.js webhook local testing para patrones de cuerpo crudo.
• OAuth. Registre https://your-tunnel.portpreview.dev/api/auth/callback/... en Auth0, Google o GitHub durante el desarrollo. Ver test OAuth callbacks locally.
• Vistas previas móviles y de partes interesadas. Envíe el enlace del túnel a control de calidad o diseño. Ver share a local dev server.

Inicio rápido

1. Desde su proyecto Next.js: npm run dev (puerto predeterminado 3000).
2. En una segunda terminal: npx portpreview 3000.
3. Abra la URL https://....portpreview.dev impresa en un navegador o teléfono.
4. Apunte servicios externos al mismo origen más su ruta API.

Rutas API de App Router detrás de un túnel

Los controladores de ruta reciben solicitudes proxy con los encabezados originales intactos, lo que resulta útil para las firmas de webhooks. Mantenga las rutas de webhook en el tiempo de ejecución de Node cuando los proveedores necesiten criptografía de Node:

// app/api/health/route.ts
export async function GET() {
  return Response.json({ ok: true });
}

Para verificar la firma, lea await request.text() antes de analizar JSON. El middleware que lee el cuerpo globalmente romperá los webhooks; excluir /api/webhooks en el comparador middleware.ts.

Variables de entorno y URL públicas

Cuando el código del cliente debe conocer su origen público (OAuth, URL de activos absolutos), almacene el túnel activo en .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Reinicie next dev después de cambiar los archivos env. Para secretos de webhook exclusivos del servidor, utilice variables sin prefijo como STRIPE_WEBHOOK_SECRET.

WebSockets y servidores personalizados

Si ejecuta un servidor Node personalizado con socket.io junto con Next.js, PortPreview reenvía las actualizaciones de WebSocket de forma predeterminada. Turbopack no cambia el comportamiento del túnel, solo el paquete.

Lista de control de seguridad

• No confirme .env.local ni haga túneles de URL a git.
• Proteja el administrador y obtenga una vista previa de las rutas con autenticación incluso en túneles.
• Rote las sesiones del túnel cuando las comparta ampliamente.
• Revisar localhost tunnel security.

Next.js documentation cubre controladores de ruta y carga de entorno. Start PortPreview free para túneles HTTPS compatibles con Next.js.