Wix Bookings: Next.js Appointments Starter

The Wix Bookings Next.js Template is a web-starter project for building appointment-based professional service sites powered by Wix Headless Bookings and Wix Pricing Plans. It pairs the Next.js 13 App Router with Wix's booking and subscription APIs to handle session scheduling, client payment plans, and content pages out of the box.

What is the Wix Bookings Next.js Template?

This template is a Next.js application bootstrapped with create-next-app that connects to a Wix Headless project through the Wix JavaScript SDK. It uses the Wix Bookings solution to let visitors schedule appointments and the Wix Pricing Plans solution to offer recurring packages or subscriptions. The template requires a Wix project with the Bookings and Pricing Plans apps installed, and it exposes a complete coaching site with a home page, service listings, and booking-oriented flows. The frontend runs on Next.js 13 with the App Router, and the backend relies entirely on Wix's hosted services.

Key Features

• Next.js 13 App Router — Uses the app directory and file-based routing from app/page.tsx, with support for React Server Components.
• Wix Bookings integration — Lets you create and manage appointments through Wix's headless booking APIs.
• Wix Pricing Plans integration — Adds support for offering ongoing plans or memberships to clients.
• TypeScript — The entire codebase is written in TypeScript for type-safe development.
• TanStack Query v4 — Handles server-state fetching, caching, and synchronization for Wix API calls.
• Tailwind CSS — Provides utility-first styling for building custom interfaces quickly.
• Flowbite UI — Adds ready-to-use Tailwind CSS components for navigation and interactive elements.
• Single environment variable setup — Requires only NEXT_PUBLIC_WIX_CLIENT_ID to authorize access to your Wix project.

Who is it for?

• Coaches and consultants — Professionals who want an online booking system for one-on-one appointments without building booking logic from scratch.
• Service businesses — Teams that need pricing plans or subscription options for recurring services like training or advisory calls.
• Next.js developers — Developers looking for a reference implementation of Wix Headless with the App Router, TypeScript, and TanStack Query.

What can you do with it?

• Fitness coaches: Let clients book personal training sessions directly through your site, with availability managed by Wix Bookings.
• Consultants: Sell monthly advisory packages using Wix Pricing Plans, with signup flows tied to your coaching site design.
• Workshop hosts: Offer paid event or group-session bookings while keeping the site on Next.js for full layout control.

How does the template work?

The template connects to a Wix Headless project you create and configure. You add the Bookings and Pricing Plans apps, authorize the template through quick start or an OAuth app, copy the environment file to .env.local, and paste your Wix client ID into NEXT_PUBLIC_WIX_CLIENT_ID. After running npm run dev (or yarn dev), the site loads at localhost:3000.

FAQ

Is a Wix account required?

Yes. You must create a Wix Headless project and install the Bookings and Pricing Plans apps before the template can fetch or write booking data.

What environment variables are needed?

Only one: NEXT_PUBLIC_WIX_CLIENT_ID, which should contain the client ID of an OAuth app authorized to access your Wix project's data.

Which Next.js version does the template use?

It uses Next.js 13 with the App Router and React Server Components, so it requires a deployment platform that supports Next.js 13.

Can I customize the homepage?

Yes. Edit app/page.tsx to change the content, and the page auto-updates during development. For other routes, follow the same file-based routing pattern.

Does the template include pricing or payment pages?

The Wix Pricing Plans integration handles plan creation and payment processing on the Wix side, while the template provides the booking flow and plan display components.