Next.js + Webflow Cloud — Simple Booking

A minimal booking engine template: a Next.js + React project with OpenNext for Cloudflare and Webflow deploy tooling. Pick a service, a provider, and a time — with rules for online vs. call-only services, deposit requirements, and post-booking instructions.

Project structure

.
├── app/
│   ├── booking/
│   │   ├── BookingFlow.tsx
│   │   ├── booking.css
│   │   ├── data.ts
│   │   ├── slots.ts
│   │   └── types.ts
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── cloudflare-env.d.ts
├── eslint.config.mjs
├── next.config.ts
├── open-next.config.ts
├── package.json
├── tsconfig.json
├── webflow.json
└── wrangler.json

Commands

Command	Action
npm install	Install dependencies.
npm run dev	Start the Next.js dev server (http://localhost:3000).
npm run build	Create a production build.
npm run start	Run the production server locally (after npm run build).
npm run preview	Build with OpenNext and preview the Cloudflare worker locally.
npm run deploy	Deploys with webflow cloud deploy.
npm run cf-typegen	Generates Wrangler TypeScript types into cloudflare-env.d.ts.

What's modeled

Inspired by a real agency request for medical-center bookings:

• 30-min Consultation — bookable online, no deposit
• 60-min Therapeutic Massage — bookable online, 50% deposit required, post-booking pre-visit instructions
• MRI Scan — call-only, full prepayment (online flow blocks and shows the phone number)

BookingFlow is a Client Component; the rest of the app stays server-rendered. State is in-memory (no database) — wire in your DB / payments / email when you adopt it.

Learn more

• Next.js documentation
• Webflow Cloud