Wix Events and Wix eCommerce Next.js Music Tour Template

The Wix Events and Wix eCommerce Next.js Music Tour Template is an open-source Next.js starter that uses Wix Headless to combine event ticketing (Wix Events) with an online store (Wix Stores) in a single music-tour site.

What is the Wix Events and Wix eCommerce Next.js Music Tour Template?

This template is a web application starter for building a music tour site that sells event tickets and merchandise through Wix. It uses Wix Headless to connect a Next.js front end to Wix Events (ticketing) and Wix Stores (eCommerce) business solutions. The template takes a Wix client ID, set as the NEXT_PUBLIC_WIX_CLIENT_ID environment variable, as its only required configuration, and produces a deployable site with a homepage (app/page.tsx) that you can extend with additional routes.

Key Features

• Next.js 13 App Router — Uses the app/ directory for file-based routing; editing app/page.tsx updates the homepage with automatic hot reload.
• Wix Headless integration — Connects to Wix Events and Wix Stores through the Wix client SDK, so ticket and product data stay in your Wix dashboard.
• TanStack Query v4 — Handles server state for Wix API data inside React components.
• Tailwind CSS — Utility-first styling is used for layout and component design.
• Flowbite — Prebuilt UI components (buttons, cards, etc.) are available for faster development.
• TypeScript — The whole template is written in TypeScript, giving compile-time type safety.
• React Server Components — Data fetching and rendering happen on the server using RSC features built into Next.js 13.
• One environment variable — Only NEXT_PUBLIC_WIX_CLIENT_ID is needed to authorize access to your Wix project.

Who is it for?

• Music tour operators — Stand up a professional site quickly that sells event tickets via Wix Events and tour merchandise via Wix Stores.
• Developers building event or eCommerce sites — Use this as a reference implementation of Wix Headless with Next.js to avoid building ticketing and store infrastructure from scratch.
• Agencies — Deliver a branded music tour site for clients, reusing the template's architecture and Wix dashboard for content management.
• Solo artists — Manage ticketing and merch sales through one Wix project while keeping a custom Next.js front end.

How does the template work?

The README provides a step-by-step setup: first create a Wix Headless project, add the Stores and Events apps, authorize the template either through quick start deployment or by creating an OAuth app, then copy .env.template to .env.local and paste the OAuth app client ID after NEXT_PUBLIC_WIX_CLIENT_ID=. After that, run npm i and npm run dev to start the site locally at http://localhost:3000. The template also includes an integration guide in docs/integration-guide.md for configuring Wix Headless with Next.js on Vercel.

What can you do with it?

• Tour organizers: Publish event pages and sell tickets through Wix Events while keeping a custom Next.js design; the store sells merch using Wix Stores.
• Developers: Extend the site by editing app/page.tsx and adding new route files in the app/ directory, following the Next.js defining-routes pattern.
• Deployment teams: Deploy to any platform that supports Next.js 13 and the App Router, with a single environment variable required by the repository.