Skip to content

Chat sample: Next.js frontend #96

@pathosDev

Description

@pathosDev

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions