Followup from the chat sample (`examples/chat/`). Add a Next.js
(App Router) variant alongside the plain HTML and Lit frontends.
Scaffolding plan
```bash
cd examples/chat
npx create-next-app@latest frontend-next --typescript --app
cd frontend-next
npm install
Configure for static export in next.config.js: { output: 'export' }
npm run build
cp -r out/* ../static/next/
```
Pages
- `app/login/page.tsx` — Server Component shell + Client form.
- `app/chat/page.tsx` — `'use client'`, three-column layout.
- `app/chat/_components/{rooms-panel,chat-window,users-panel}.tsx`.
- `app/chat/_lib/websocket.ts` — Client-side WS hook.
State
- `useReducer` + Context for cross-component WS access.
Versions / requirements
- Next.js >= 15 (App Router, latest), Turbopack optional.
- React >= 19 (bundled with Next).
Shared types
Relative import from `examples/chat/shared/protocol.ts` — make sure
`tsconfig.json` has `"baseUrl": ".."` so imports resolve.
Stub `frontend-next/README.md` already in the repo.
Followup from the chat sample (`examples/chat/`). Add a Next.js
(App Router) variant alongside the plain HTML and Lit frontends.
Scaffolding plan
```bash
cd examples/chat
npx create-next-app@latest frontend-next --typescript --app
cd frontend-next
npm install
Configure for static export in next.config.js: { output: 'export' }
npm run build
cp -r out/* ../static/next/
```
Pages
State
Versions / requirements
Shared types
Relative import from `examples/chat/shared/protocol.ts` — make sure
`tsconfig.json` has `"baseUrl": ".."` so imports resolve.
Stub `frontend-next/README.md` already in the repo.