Wix Bookings: Next.js classes and pricing plans
Type: Code
Framework: Next.js
CSS: Tailwind
- Template Overview: A Next.js template designed for personal trainers, incorporating Wix Headless to utilize Wix Bookings and Pricing Plans for class and membership management.
- Local Development Setup:
- Prerequisites:
- Initialize a Wix Headless project and integrate Bookings and Pricing Plans apps.
- Authenticate the template via quick start deployment or by establishing an OAuth app.
- Configure your project’s eCommerce settings.
- Environment Variables:
- Duplicate the
.env.templateto.env.localfor local development settings. - Include your OAuth app client ID in the
.env.localfile.
- Duplicate the
- Development Server:
- Launch the development server using
yarn devor thenpmequivalent. - Access the template home page by navigating to
http://localhost:3000.
- Launch the development server using
- Template Editing:
- Modify the homepage or other pages by editing corresponding
.tsxfiles, with live updates during development.
- Modify the homepage or other pages by editing corresponding
- Prerequisites:
- Deployment:
- The template supports deployment on platforms compatible with Next.js Version 13 and App Router.
- Requires the
NEXT_PUBLIC_WIX_CLIENT_IDenvironment variable for Wix project data access authorization.
- Learning Resources:
- For template customization and additional functionalities, refer to the Wix JavaScript SDK reference.
- Explore Next.js documentation and tutorials to learn more about its features and APIs.
- Template Specifications:
- Developed with Next.js 13 and the Next.js App Router.
- Utilizes React Server Components, TypeScript, TanStack Query v4, Tailwind CSS, Flowbite, and Wix client SDK.
- Integration Guide:
- A detailed guide is available for integrating Wix as a headless Booking solution with Next.js, particularly useful for deployment on Vercel.