So verwenden Sie PortPreview mit einer Next.js-App

Um PortPreview mit einer Next.js-App zu verwenden, führen Sie next dev auf Port 3000 aus, starten Sie npx portpreview 3000 und verwenden Sie die HTTPS-URL für OAuth-Weiterleitungen, Webhook-Routenhandler, mobile Vorschauen und die Freigabe laufender Benutzeroberflächen – keine Bereitstellung erforderlich.

Warum eine Next.js-App tunneln

Next.js ist oft das öffentliche Gesicht eines Produkts: Marketingseiten, Dashboards und API-Routenhandler in einem Repository. Dritte können localhost immer noch nicht erreichen. Ein Tunnel bietet Ihnen einen stabilen öffentlichen HTTPS-Ursprung, während Sie in next dev oder next dev --turbo iterieren.

• Webhooks. Stripe, Clerk und POST erneut an Ihre app/api/...-Routen senden. Siehe Next.js webhook local testing für Rohkörpermuster.
• OAuth. Registrieren Sie https://your-tunnel.portpreview.dev/api/auth/callback/... während der Entwicklung in Auth0, Google oder GitHub. Siehe test OAuth callbacks locally.
• Mobile und Stakeholder-Vorschauen. Senden Sie den Tunnellink an die Qualitätssicherung oder den Entwurf. Siehe share a local dev server.

Schnellstart

1. Aus Ihrem Next.js-Projekt: npm run dev (Standardport 3000).
2. In einem zweiten Terminal: npx portpreview 3000.
3. Öffnen Sie die gedruckte https://....portpreview.dev-URL in einem Browser oder Telefon.
4. Externe Dienste auf denselben Ursprung und Ihren API-Pfad verweisen.

App Router API-Routen hinter einem Tunnel

Route-Handler empfangen Proxy-Anfragen mit intakten Original-Headern – nützlich für Webhook-Signaturen. Behalten Sie Webhook-Routen auf der Node-Laufzeit bei, wenn Anbieter Node-Verschlüsselung benötigen:

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

Lesen Sie zur Signaturüberprüfung await request.text(), bevor Sie JSON analysieren. Middleware, die den Körper global liest, unterbricht Webhooks; /api/webhooks im middleware.ts-Matcher ausschließen.

Umgebungsvariablen und öffentliche URLs

Wenn der Client-Code seinen öffentlichen Ursprung kennen muss (OAuth, absolute Asset-URLs), speichern Sie den aktiven Tunnel in .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Starten Sie next dev neu, nachdem Sie die Env-Dateien geändert haben. Verwenden Sie für nur serverbasierte Webhook-Geheimnisse Variablen ohne Präfix wie STRIPE_WEBHOOK_SECRET.

WebSockets und benutzerdefinierte Server

Wenn Sie neben Next.js einen benutzerdefinierten Knotenserver mit socket.io ausführen, leitet PortPreview WebSocket-Upgrades standardmäßig weiter. Turbopack ändert das Tunnelverhalten nicht – nur den Bundler.

Sicherheitscheckliste

• Übertragen Sie keine .env.local- oder Tunnel-URLs an Git.
• Schützen Sie Administrator- und Vorschaurouten mit Authentifizierung, auch in Tunneln.
• Tunnelsitzungen rotieren, wenn weitreichende Freigaben erfolgen.
• Rezension localhost tunnel security.

Next.js documentation behandelt Routenhandler und Umgebungsladen. Start PortPreview free für Next.js-freundliche HTTPS-Tunnel.