# NextJS（fetch）

> Automatic Setup の事前設定済みのターミナルを使って、NextJS のサーバーサイドの fetch() と Server Components からの HTTPS リクエストをキャプチャします。

## 1. 問題 {#1-problem}

* NextJS の `use server` コードからの通信は、Proxyman でキャプチャできません
* NextJS の `fetch` はシステムの HTTP プロキシを使用しないためです。そのため、通信は Proxyman アプリを経由しません。

## 2. 解決方法 {#2-solution}

1. 事前設定済みのターミナルを起動します：**Setup** メニュー → **Automatic Setup** → 「**Open New Terminal**」をクリック
2. 新しいターミナルが開きます → このターミナルで NextJS サーバーを起動します。例：`npm run dev`
3. `fetch` で `no-cache` を使用します

```js
export default async function MyPage() {
  const res = await fetch('https://httpbin.org/anything', { cache: 'no-cache' }) // no cache, or no request is sent to Proxyman
  return <div>My Page{res.text()}</div>
}
```

4. ウェブサイトを再読み込みします
5. 完了 ✅ Proxyman アプリで HTTP 通信がキャプチャされます

![Proxyman の事前設定済みターミナルで起動した Next.js 開発サーバーと、Proxyman でキャプチャされたサーバーサイドの fetch リクエスト](https://proxyman.com/docs/assets/335782543-6e0c4eeb-435d-4589-b2dd-4087f3827f3a.jpg)

_Proxyman で NextJS の fetch をキャプチャする_

## 3. 参考情報 {#3-reference}

* [https://github.com/ProxymanApp/Proxyman/issues/2038](https://github.com/ProxymanApp/Proxyman/issues/2038)

## 関連記事 {#learn-more}

* [NextJS のサーバーサイドから HTTP リクエストをキャプチャする](https://proxyman.com/posts/2024-06-10-Capture-HTTPS-From-NextJS-Server-Components)