# Apps d'exemple

> Exemples complets et fonctionnels de test-proxy-recorder — SSR Next.js et TanStack Start, une extension Chrome, un ticker WebSocket tiers et une app authentifiée rejouée sans backend.

Canonical: <https://test-proxy-recorder.dev/fr/docs/reference/examples/>
Docs index: <https://test-proxy-recorder.dev/docs/> · All docs as one file: <https://test-proxy-recorder.dev/llms-full.txt>

---

Des exemples complets et fonctionnels se trouvent dans [`apps/`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps) — un par mécanisme d'enregistrement. Chacun a son propre README avec la configuration complète et le flux enregistrer/rejouer.

## Next.js 16 {#nextjs-16}

[`apps/example-nextjs16`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-nextjs16) — une app de tâches Next.js 16 avec un backend mock, un proxy et des tests e2e Playwright. Enregistre à la fois les fetches SSR (`.mock.json`) et les fetches navigateur (`.har`), et inclut un chat WebSocket contre le backend local. Voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-nextjs16/README.md).

## Next.js Edge runtime {#nextjs-edge}

[`apps/example-nextjs-edge`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-nextjs-edge) — une app Next.js 16 dont la page est rendue sur le **runtime Edge** (`export const runtime = 'edge'`). Son `fetch` SSR est marqué avec l'id de session d'enregistrement via `registerProxyFetch()` (appelé depuis le root layout), de sorte que les sessions de rejeu concurrentes restent distinctes là où `instrumentation.ts` ne peut pas intervenir. Voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-nextjs-edge/README.md).

## TanStack Start {#tanstack-start}

[`apps/example-tanstack-start`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-tanstack-start) — une app TanStack Start (Vite + Nitro) construite avec **TanStack Query**. Enregistre à la fois les fetch SSR (`.mock.json`, marqués via `registerProxyFetch()` dans `src/router.tsx`) et les fetch navigateur (`.har`), couvrant une liste de todos en direct, une route ISR basée sur les en-têtes de cache, un chat WebSocket et une vraie connexion **AWS Cognito** (authentification en mode transparent + une API protégée dont le token est masqué). Voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-tanstack-start/README.md).

## Extension Chrome {#chrome-extension}

[`apps/example-extension`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-extension) — une vraie extension Chrome qui appelle l'API de X/Twitter depuis un content script ; les requêtes navigateur sont enregistrées en `.har` et rejouées hors ligne, sans API en direct ni compte en CI. Voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-extension/README.md).

## Ticker crypto — WebSocket tiers {#websocket}

[`apps/example-websocket`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-websocket) — un ticker de prix BTC-USD en direct alimenté par le flux WebSocket public de Binance. Enregistre le vrai flux une fois via le proxy, puis rejoue des prix déterministes en CI sans réseau ni compte d'exchange. Voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-websocket/README.md).

## App authentifiée {#authenticated-app}

[`apps/example-auth-cognito`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-auth-cognito) — une app Next.js qui se connecte à un user pool **AWS Cognito réel**, puis enregistre/rejoue son API protégée. La connexion reste en direct à chaque exécution (jamais enregistrée) ; les données protégées sont rejouées avec le backend éteint, et le jeton d'authentification est masqué dans les enregistrements. L'intégration ne représente qu'une poignée de fichiers — voir son [README](https://github.com/asmyshlyaev177/test-proxy-recorder/blob/master/apps/example-auth-cognito/README.md). Pour le même modèle **sans compte cloud**, voir [`apps/example-auth-mock`](https://github.com/asmyshlyaev177/test-proxy-recorder/tree/master/apps/example-auth-mock).