サンプルアプリ
完全に動作するサンプルは apps/ にあります — 記録メカニズムごとに 1 つ。それぞれ、完全なセットアップと記録/再生のワークフローを記した独自の README を備えています。
Next.js 16
Section titled “Next.js 16”apps/example-nextjs16 — モックバックエンド、プロキシ、Playwright の e2e テストを備えた Next.js 16 の ToDo アプリ。SSR フェッチ(.mock.json)とブラウザフェッチ(.har)の両方を記録し、ローカルバックエンドに対する WebSocket チャットを含みます。README を参照。
Next.js Edge runtime
Section titled “Next.js Edge runtime”apps/example-nextjs-edge — ページが Edge runtime(export const runtime = 'edge')でレンダリングされる Next.js 16 アプリ。SSR の fetch は、registerProxyFetch()(ルートレイアウトから呼び出し)によって記録セッションの id でタグ付けされるため、instrumentation.ts が届かない場所でも並行する再生セッションが区別されたままになります。README を参照してください。
TanStack Start
Section titled “TanStack Start”apps/example-tanstack-start — TanStack Query で構築された TanStack Start(Vite + Nitro)アプリ。SSR の fetch(.mock.json、src/router.tsx の registerProxyFetch() でタグ付け)とブラウザーの fetch(.har)の両方を記録し、ライブの todo リスト、キャッシュヘッダーベースの ISR ルート、WebSocket チャット、そして本物の AWS Cognito ログイン(transparent モードの認証 + トークンを秘匿した保護 API)を網羅します。README を参照してください。
Chrome 拡張
Section titled “Chrome 拡張”apps/example-extension — content script から X/Twitter の API を呼ぶ実際の Chrome 拡張。ブラウザのリクエストは .har に記録され、ライブ API や CI 上のアカウントなしでオフライン再生されます。README を参照。
暗号ティッカー — サードパーティ WebSocket
Section titled “暗号ティッカー — サードパーティ WebSocket”apps/example-websocket — Binance の公開 WebSocket フィードに支えられたライブの BTC-USD 価格ティッカー。実際のフィードをプロキシ経由で一度記録し、ネットワークも取引所アカウントもなしで CI 上で決定論的な価格を再生します。README を参照。
認証済みアプリ
Section titled “認証済みアプリ”apps/example-auth-cognito — 実際の AWS Cognito ユーザープールにログインし、保護された API を記録/再生する Next.js アプリ。ログインは毎回ライブのまま(記録されません)で、保護データはバックエンドをオフにして再生され、認証トークンは記録からマスキングされます。統合はごく少数のファイルだけです — README を参照。クラウドアカウント不要の同じパターンは apps/example-auth-mock を参照してください。