Wix Bookings Next.js Template

The Wix Bookings Next.js Template is a boilerplate for building a personal trainer website with class bookings and membership plans on any Next.js 13 host.

What is the Wix Bookings Next.js Template?

The template is a headless website starter that connects a custom Next.js frontend to Wix's Bookings and Pricing Plans business solutions. It takes a Wix project with these apps installed and renders class schedules, booking flows, and membership offers on the public site. The codebase is written in TypeScript, bootstrapped with create-next-app, and runs on Next.js 13 using the App Router.

Key Features

• Next.js 13 with App Router — Uses file-based routing and React Server Components, so pages can be server-rendered for performance.
• Wix Headless integration — Pulls data from Wix Bookings and Wix Pricing Plans through the Wix JavaScript SDK, so all business data stays in the Wix dashboard.
• Tailwind CSS — Utility-first styling is set up with Tailwind, and UI components come from Flowbite.
• TanStack Query v4 — Handles server-state fetching and caching for Wix API responses.
• TypeScript — The entire template is written in TypeScript for static typing and better editor support.
• Single environment variable — Only NEXT_PUBLIC_WIX_CLIENT_ID is needed, set in a .env.local file created from .env.template.
• Deploy anywhere — Works on Vercel or any platform supporting Next.js 13 with the App Router.

Who is it for?

• Personal trainers — Want a branded site where clients can view available class times and book directly instead of using a generic booking page.
• Gym and studio owners — Need to sell class packages or memberships via Wix Pricing Plans, with the template rendering the plans on the frontend.
• Next.js developers — Looking for a production-ready example of integrating Wix Headless with the App Router, including the required OAuth authorization flow.

What can you do with it?

• Fitness professionals: Publish a class calendar with bookable slots, letting clients reserve sessions through your own Next.js interface.
• Membership sellers: Offer memberships and pricing plans created in Wix, with the template displaying them for purchase.
• Developers: Use the template as a reference for building other Wix Headless booking integrations, from OAuth setup to environment configuration.

How does it work?

A developer creates a Wix Headless project, adds the Bookings and Pricing Plans apps, and authorizes the template either through quick-start deployment or by creating an OAuth app. The OAuth client ID is then pasted into a .env.local file as NEXT_PUBLIC_WIX_CLIENT_ID. After running npm run dev, the site is available at http://localhost:3000 and the homepage can be edited at app/page.tsx.

FAQ

What is NEXT_PUBLIC_WIX_CLIENT_ID?

It is the client ID from a Wix OAuth app that grants the template access to your Wix project's Bookings and Pricing Plans data. Without it the site cannot fetch any classes or membership plans.

How do I run the template locally?

Copy .env.template to .env.local, paste your Wix OAuth client ID after the NEXT_PUBLIC_WIX_CLIENT_ID= line, install dependencies with npm i, and run npm run dev. The site will be served at http://localhost:3000.

Can I deploy the template anywhere?

Yes, any platform that supports Next.js 13 with the App Router can host it. The repository needs only the single environment variable NEXT_PUBLIC_WIX_CLIENT_ID to be set during deployment.

Does the template include payment processing?

Payment handling is managed by the Wix Pricing Plans and Bookings apps in the Wix dashboard; the template renders the booking and purchase flows using Wix Headless, but the actual payments happen through Wix.