Proxyman で Next.js のサーバーサイド HTTP リクエストをキャプチャ
1. 問題点
サーバーサイドの Next.js で fetch() を使って HTTP/HTTPS リクエストを送信すると、ネットワーク通信のデバッグは非常に困難です。回避策としては、console.log() を使ってリクエストとレスポンスをターミナルアプリに出力する方法がありますが、数百ものリクエストがある大規模なコードベースをデバッグするのは悪夢のようなものです。
この記事で扱う内容
- Proxyman を使って Next.js 15 のサーバーサイドから送信される HTTP/HTTPS リクエストをキャプチャする方法
2. 解決策
Proxyman には、設定済みのターミナルアプリを開く Automatic Setup 機能があります。このターミナルで Next.js サーバーを起動すると、Proxyman が Next.js プロジェクトのすべての HTTP/HTTPS 通信を自動的にキャプチャします。
メリット
- プロキシを設定する必要はありません
- Proxyman 証明書を信頼させる必要はありません
- 追加の設定なしですぐに使えます
- Reverse Proxy ツールを使うより簡単に設定できます
手順は次のとおりです：
- すべてのリクエストをサーバーまで確実に届かせたい場合は、
cache: 'no-store'を指定して、fetch()が保存済みの結果を再利用しないようにします。
export default async function MyPage() {
const res = await fetch('https://httpbin.org/anything', { cache: 'no-store' })
return <div>My Page{res.text()}</div>
}
=> キャッシュの動作は、Next.js のバージョンや、ルートが事前にビルドされるか、リクエストごとにレンダリングされるかによって異なります。開発時のホットリロードでも、Server Component の fetch 結果が再利用されることがあります。
=> { cache: 'no-store' } を指定すると、Next.js はリクエストごとにリモートサーバーから取得します。Proxyman で呼び出しを確認する際に便利です。
- Proxyman で Setup -> Automatic Setup -> Open new Terminal を開きます。
- このターミナルで
npm run devを実行して Next.js を起動します。
- 完了です。
fetch()によるすべての HTTP/HTTPS 通信が、Proxyman でキャプチャおよびインターセプトされます。
3. 次のステップ
- 普段お使いのターミナルアプリを使いたい場合は、Manual Setup を利用できます。設定方法は、次のドキュメントをご覧ください：https://proxyman.com/docs/automatic-setup/manual-setup
- Automatic/Manual Setup ツールは、Node.js、Python、Ruby に対応しています。
Next.js のコマンドは、Proxyman が開いたターミナルで実行してください。この設定はそのターミナルのセッションに紐づいています。それでも呼び出しが表示されない場合は、ホットリロードではなく、ページを完全に読み込み直して、そのコードパスがサーバー上で実行されていることを確認してください。ブラウザ側の fetch 呼び出しには、代わりにブラウザの設定が適用されます。
Noah Tran