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

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.