# Next.js example

Two pages in one small App Router app, both against `https://app.nisebookings.com`:

- `/` — the widget in a client component (`app/booking-widget.tsx`): one script tag plus `<nise-booking>`.
- `/headless` — own UI (`app/headless/`): a server component fetches the services, a client component
  fetches slots and posts the booking, and handles `409 slot_unavailable` by re-picking.

## Run it

```bash
cp .env.example .env.local        # paste a key: your own or POST /api/sandbox
npm install
npm run dev                        # http://localhost:3000
```

Verified with Next 16 / React 19 (App Router): `tsc --noEmit` clean, `next build && next start` builds
(`/` static, `/headless` dynamic), both pages work in a browser, and the headless page booked a real
appointment in a sandbox through the public API. Open the dev server as **http://localhost:3000**, not
`127.0.0.1`: Next 16's dev runtime binds to the `localhost` origin, and on `127.0.0.1` the client
components do not hydrate.

The widget component also works as-is in the Pages Router. The step-by-step explanation is
[`../11-nextjs.md`](../../11-nextjs.md).