The Wix CMS Next.js Education Template is a Next.js 13 starter project that uses Wix Headless to pull content from the Wix CMS into an education-focused site. Built on the App Router with TypeScript, it gives developers a headless frontend for Wix-managed content.
What is the Wix CMS Next.js Education Template?
The template is a Next.js application bootstrapped with create-next-app that leverages Wix Headless to manage and display content for an education website. It uses the Wix client SDK to read data from the Wix Cloud CMS, meaning editors update content in Wix Content Manager while the Next.js frontend renders it. The output is a fully static or server-rendered education site deployable to any platform supporting Next.js 13 and the App Router.
Key Features
- Next.js 13 App Router — Built with the modern App Router, where each page is a file under app/ (for example, the homepage is app/page.tsx).
- Wix Headless integration — Uses the Wix client SDK to fetch CMS content; requires a single environment variable named
NEXT_PUBLIC_WIX_CLIENT_IDset to an OAuth client ID. - TypeScript — The entire project is written in TypeScript, offering type safety during development.
- Tailwind CSS — Styling is handled by the utility-first Tailwind CSS framework.
- Flowbite components — Includes Flowbite, a Tailwind-compatible UI component library, for building interfaces quickly.
- TanStack Query v4 — Uses TanStack Query to handle server state and data fetching from Wix APIs.
- React Server Components — Takes advantage of React Server Components, supported by Next.js 13, for efficient server-side rendering.
- Deployment-ready — Can be deployed to any platform that supports Next.js 13 and the App Router; the included integration guide shows setup on Vercel.
Who is it for?
- Next.js developers who want a pre-configured CMS-backed project and prefer to edit code rather than click through a site builder.
- Wix users who need a custom frontend beyond Wix's hosted pages but want to keep Wix Content Manager for editing.
- Education startups looking to stand up a course or learning portal quickly with a content management layer.
What can you do with the template?
- Course sites: Create a website that lists courses and lessons stored as CMS items in Wix Content Manager.
- Content-driven education pages: Update text, images, and structured data from the Wix CMS without redeploying the Next.js app.
- Headless CMS learning: Use it as a working reference for integrating Wix Headless with a TypeScript Next.js application.
How does the template work?
First, you create a Wix Headless project and add the Content Manager app to it. Then you authorize the template either through Wix's quick-start deployment flow or by creating a custom OAuth app. After pasting the client ID into a local .env.local file (copying from .env.template), you run npm install and npm run dev to see the site at localhost:3000.
FAQ
What environment variables are required?
Only one variable is required: NEXT_PUBLIC_WIX_CLIENT_ID. It must contain a client ID that authorizes access to a Wix project's data. There is no need for a server-side secret for basic CMS reads.
How do I run the template locally?
After setting up a Wix Headless project and OAuth credentials, copy .env.template to .env.local, add your client ID after NEXT_PUBLIC_WIX_CLIENT_ID=, then run npm install and npm run dev. The site will be available at http://localhost:3000.
Can I deploy this template to Vercel?
Yes. The template supports any platform that runs Next.js 13 with the App Router. The repository includes a dedicated integration guide that walks through configuring Wix as a headless Booking solution and deploying to Vercel.
What Next.js version does it use?
It uses Next.js 13 and the new App Router (the file-based routing system introduced in that version). The template also relies on React Server Components, which are supported in Next.js 13.
Does the template include the Wix Content Manager app?
It assumes you add Content Manager to your Wix project. The setup instructions link to Wix documentation for adding apps to a project, and the template is designed to consume the CMS data that Content Manager provides.
