PortPreview を使用して Next.js 開発サーバーを公開するにはどうすればよいですか?

ローカルホスト (通常はポート 3000) で Next.js アプリを起動し、別のターミナルで npx portpreview 3000 を実行します。 Webhook、OAuth リダイレクト、共有には HTTPS URL を使用します。

Next.js を使用してローカルホストで OAuth コールバックをテストできますか?

外部プロバイダーにはパブリック HTTPS リダイレクト URI が必要です。開発中に http://localhost の代わりに PortPreview トンネル URL をコールバックとして登録します。

Next.js トンネリングで最もよくある間違いは何ですか?

署名検証の前にルートミドルウェアでリクエスト本文を読み取るか、 request.json() を呼び出すと、Webhook ルートが中断されます。 Webhook パスを除外し、生の本文に対して await request.text() を使用します。

Next.js トンネル URL を共有しても安全ですか?

トンネル URL を一時的な認証情報のように扱います。信頼できる共同作業者とのみ共有し、完了したら無効にし、認証なしで管理ルートを公開しないでください。 localhost トンネルのセキュリティのベストプラクティスを参照してください。

Next.js アプリで PortPreview を使用する方法

Next.js アプリで PortPreview を使用するには、ポート 3000 で next dev を実行し、npx portpreview 3000 を起動し、OAuth リダイレクト、Webhook ルートハンドラー、モバイルプレビュー、進行中の UI の共有に HTTPS URL を使用します。デプロイは必要ありません。

Next.js アプリをトンネリングする理由

Next.js は、マーケティングページ、ダッシュボード、API ルートハンドラーなどを 1 つのリポジトリに収めるなど、製品の公的な顔となることがよくあります。サードパーティは依然として localhost に到達できません。トンネルにより、next dev または next dev --turbo で反復する間、安定したパブリック HTTPS オリジンが提供されます。

Webhook。 app/api/... ルートへのストライプ、クラーク、および POST の再送信。 raw-body パターンについては、Next.js webhook local testing を参照してください。
OAuth。 開発中に https://your-tunnel.portpreview.dev/api/auth/callback/... を Auth0、Google、または GitHub に登録します。 test OAuth callbacks locally を参照してください。
モバイルと関係者のプレビュー。 トンネルリンクを QA または設計に送信します。 share a local dev server を参照してください。

クイックスタート

<オル>

Next.js プロジェクトから: npm run dev (デフォルトのポート 3000)。

2 番目のターミナル: npx portpreview 3000。

印刷された https://....portpreview.dev URL をブラウザまたは携帯電話で開きます。

外部サービスが同じオリジンと API パスを指すようにします。

トンネルの背後にある App Router API ルート

ルートハンドラーは、元のヘッダーをそのままにしてプロキシされたリクエストを受信します。これは Webhook 署名に役立ちます。プロバイダーがノード暗号化を必要とする場合は、ノードランタイム上で Webhook ルートを維持します。

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

署名の検証については、JSON を解析する前に await request.text() をお読みください。本体をグローバルに読み取るミドルウェアは Webhook を破壊します。 middleware.ts マッチャーから /api/webhooks を除外します。

環境変数とパブリック URL

クライアントコードがそのパブリックオリジン (OAuth、絶対アセット URL) を認識する必要がある場合は、アクティブなトンネルを .env.local に保存します。

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

env ファイルを変更した後、next dev を再起動します。サーバーのみの Webhook シークレットの場合は、STRIPE_WEBHOOK_SECRET のようなプレフィックスのない変数を使用します。

WebSocket とカスタムサーバー

Next.js とともに socket.io を使用してカスタムノードサーバーを実行する場合、PortPreview はデフォルトで WebSocket アップグレードを転送します。 Turbopack はトンネルの動作を変更せず、バンドラーのみを変更します。

セキュリティチェックリスト

.env.local をコミットしたり、URL を git にトンネルしたりしないでください。
トンネル上でも認証を使用して管理ルートとプレビュールートを保護します。
広く共有する場合は、トンネルセッションをローテーションします。
localhost tunnel security を確認してください。

Next.js documentation では、ルートハンドラーと環境の読み込みについて説明します。 Start PortPreview free Next.js 対応の HTTPS トンネル。