Comment exposer un serveur de développement Next.js avec PortPreview ?

Démarrez votre application Next.js sur localhost (généralement le port 3000), puis exécutez npx portpreview 3000 dans un autre terminal. Utilisez l'URL HTTPS pour les webhooks, les redirections OAuth et le partage.

Puis-je tester les rappels OAuth sur localhost avec Next.js ?

Les fournisseurs externes nécessitent un URI de redirection HTTPS public. Enregistrez l'URL de votre tunnel PortPreview comme rappel pendant le développement au lieu de http://localhost.

Quelle est l’erreur de tunneling Next.js la plus courante ?

La lecture du corps de la requête dans le middleware racine ou l'appel de request.json() avant la vérification de la signature interrompt les routes des webhooks. Excluez les chemins de webhook et utilisez wait request.text() pour les corps bruts.

Est-il sûr de partager une URL de tunnel Next.js ?

Traitez les URL de tunnel comme des informations d'identification temporaires. Partagez uniquement avec des collaborateurs de confiance, désactivez-le une fois terminé et n'exposez jamais les routes d'administration sans authentification. Consultez les meilleures pratiques en matière de sécurité du tunnel localhost.

Comment utiliser PortPreview avec une application Next.js

Pour utiliser PortPreview avec une application Next.js, exécutez next dev sur le port 3000, démarrez npx portpreview 3000 et utilisez l'URL HTTPS pour les redirections OAuth, les gestionnaires de routes webhook, les aperçus mobiles et le partage de l'interface utilisateur en cours — aucun déploiement n'est requis.

Pourquoi tunneler une application Next.js

Next.js est souvent la face publique d'un produit : pages marketing, tableaux de bord et gestionnaires de routes API dans un seul dépôt. Les tiers ne peuvent toujours pas accéder à localhost. Un tunnel vous donne une origine HTTPS publique stable pendant que vous itérez dans next dev ou next dev --turbo.

Webhooks. Stripe, Clerk et Renvoyer le POST à vos itinéraires app/api/.... Voir Next.js webhook local testing pour les modèles de corps bruts.
OAuth. Enregistrez https://your-tunnel.portpreview.dev/api/auth/callback/... dans Auth0, Google ou GitHub pendant le développement. Voir test OAuth callbacks locally.
Aperçus mobiles et pour les parties prenantes. Envoyez le lien du tunnel au contrôle qualité ou à la conception. Voir share a local dev server.

Démarrage rapide

Depuis votre projet Next.js : npm run dev (port par défaut 3000).
Dans un deuxième terminal : npx portpreview 3000.
Ouvrez l'URL https://....portpreview.dev imprimée dans un navigateur ou un téléphone.
Pointez les services externes vers la même origine ainsi que votre chemin d'API.

Routages de l'API App Router derrière un tunnel

Les gestionnaires de routes reçoivent les requêtes proxy avec les en-têtes d'origine intacts – utile pour les signatures de webhooks. Conservez les routes des webhooks sur l'environnement d'exécution Node lorsque les fournisseurs ont besoin du chiffrement Node :

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

Pour la vérification de la signature, lisez await request.text() avant d'analyser JSON. Un middleware qui lit le corps à l'échelle mondiale brisera les webhooks ; exclure /api/webhooks dans le matcher middleware.ts.

Variables d'environnement et URL publiques

Lorsque le code client doit connaître son origine publique (OAuth, URL d'actifs absolues), stockez le tunnel actif dans .env.local :

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Redémarrez next dev après avoir modifié les fichiers env. Pour les secrets de webhook réservés au serveur, utilisez des variables sans préfixe telles que STRIPE_WEBHOOK_SECRET.

WebSockets et serveurs personnalisés

Si vous exécutez un serveur Node personnalisé avec socket.io aux côtés de Next.js, PortPreview transmet les mises à niveau de WebSocket par défaut. Turbopack ne modifie pas le comportement du tunnel, uniquement le bundler.

Liste de contrôle de sécurité

Ne validez pas .env.local et ne tunnelez pas les URL vers git.
Protégez les routes d'administration et de prévisualisation avec authentification, même sur les tunnels.
Alternez les sessions tunnel lors d'un partage à grande échelle.
Revoir localhost tunnel security.

Next.js documentation couvre les gestionnaires de routes et le chargement d'environnement. Start PortPreview free pour les tunnels HTTPS compatibles Next.js.