This Next.js project provides a minimal example site to demonstrate basic usage of various Wix Headless APIs. The implementation focuses on simplicity and readability, rather than feature richness, performance, or completeness. This repository can be used as a quick reference for bootstrapping a Wix Headless application, but it should not be treated as a best practices guide.
For a more comprehensive example of Wix Headless integration, we recommend checking out our starter templates.
You can view the latest version of this repo deployed at https://wix-headless-example.vercel.app/, but we recommend cloning it and experimenting with it locally.
First, run the development server:
yarn
yarn devOpen http://localhost:3000 in your browser to see the result.
This project demonstrates the usage of various Wix Headless APIs. Here's a brief overview of each:
The authentication process is handled in the following files:
pages/members.js: This file contains the Login/Logout button implementation. It demonstrates how to use the Wix Members API to get the current user's information.pages/login-callback.js: This file handles the login callback process. It demonstrates how to use the Wix OAuthStrategy API to authenticate users.middleware.js: This file generates a visitor cookie if no session exists. It demonstrates how to use the Wix OAuthStrategy API to generate a visitor cookie.
Wix Members API: This API allows you to manage a site's members, including creating, updating, deleting members, retrieving member's information, and managing a member's community status.
Wix OAuthStrategy API: This is an authentication strategy used with a Wix Client to authenticate API calls using OAuth tokens. It helps in identifying the requester's identity and their assigned roles.
The Headless CMS API is demonstrated in the pages/content.js file. This file fetches and
displays content from the Wix CMS.
It demonstrates how to use the Wix Data API to
retrieve, create, update, and delete content in your site database collections.
Wix Data API: This API provides a complete solution for accessing, organizing, configuring, and managing data stored in a Wix project or your site's database. It allows you to create, modify, delete data collections, manage data items, create indexes for data collections, and connect external databases to a Wix project or site.
The Headless Bookings API is demonstrated in the pages/booking.js file. This file handles the
booking process.
It demonstrates how to use
the Wix Bookings API to manage and create
bookings for services provided by your site.
Wix Bookings API: This API allows you to manage bookings for a site's services. It holds information about the customer and the session or schedule they have booked.
The Headless Store API is demonstrated in the pages/store.js file. This file handles the store
operations.
It demonstrates how to use the Wix Stores API allows you to
manage your store inventory, orders, and collections,
and it also demonstrates how to use
the Wix eCommerce API to manage carts, checkouts,
discount rules, item promotion, and orders.
Wix Stores API: This API allows you to manage your store inventory, orders, and collections. It provides a comprehensive set of services for customizing store functionality.
Wix eCommerce API: This API provides a comprehensive set of services for customizing eCommerce functionality on your sites. It allows you to manage a site visitor's cart, handle checkout and payment flow, create and manage discount rules, promote items, and manage orders.
The Headless Tickets API is demonstrated in the pages/tickets.js file. This file handles the
ticket operations.
It demonstrates how to use the Wix Events API to
manage and sell tickets for events on your site.
Wix Events API: This API provides functionality for creating, updating, and managing events. It allows you to manage event details like location, scheduling, registration, tickets, RSVPs, online conferencing, messaging customization, and basic registration form customization.
The Headless Subscriptions API is demonstrated in the pages/subscriptions.js file. This
file handles the subscription operations.
It demonstrates how to use
the Wix Pricing Plans API to manage and sell
subscriptions to services provided by your site.
Wix Pricing Plans API: This API allows you to create and manage your plans and orders. It supports different pricing models like subscription, single payment for duration, and single payment unlimited. It also allows you to manage plan visibility, handle free plans and trial periods, and manage orders and subscriptions.
To ensure this repo always uses the latest APIs from the Wix JavaScript SDK, the repo is preconfigured with Dependabot, GitHub's automated dependency management system. Due to the numerous pull requests generated by Dependabot, the repo also includes a preconfigured GitHub Action called " Combine PRs." This action can be executed manually to merge all of Dependabot's pull requests into a single PR, allowing for sanity checks to be performed only once. If the sanity check fails, each Dependabot PR can be inspected individually.