This template is a Next.js project bootstrapped with create-next-app. It uses Wix Headless to leverage the Wix CMS business solution for managing the content on an education site.
To integrate the Wix Content Manager business solution with the template, first create and set up a project on Wix:
Create a new Wix Headless project. For instructions on creating a Wix project, see Create a Wix Headless Project.
When prompted to add functionalities to your new project, you don't need to select any business solutions, since every Wix Headless project includes CMS support:
If needed, you can add business solutions to your project later. See Add Apps to a Project.
In the project dashboard, click Content Manager in the sidebar menu to access the Content Manager.
For information on creating and managing collections, see Getting Started with the Content Manager.
There are 2 ways to authorize the template to access your Wix project:
Click the quick start deployment link below to automatically authorize your template and configure your project. You'll be prompted to log in to your Wix account and to authorize the platform to access your project or site.
Authentication credentials are automatically incorporated into the template, making it easy to get started coding and customizing.
For more information, see How to Deploy Next.js Sites to Netlify.
You can also view our live demo site.
For more information, see How to Deploy Next.js Sites to Vercel.
You can also view our live demo site.
If you don't want to use quick-start deployment, begin by forking this repo to your git account.
Read Set Up Authorization in the Wix SDK documentation for instructions on how to manually create an OAuth app and generate a client ID in the Headless Settings menu of the Wix dashboard.
After creating an OAuth app, store the Client ID in a secure location.
Note: Do not push the client ID to your source control.
To set up environment variables for consuming Wix Headless APIs, follow these steps:
- At the terminal, in the template's root folder, type
cp .env.template .env.local. - In the new
.env.localfile, paste the client ID afterNEXT_PUBLIC_WIX_CLIENT_ID=.
In your deployment provider, add an environment variable called NEXT_PUBLIC_WIX_CLIENT_ID containing the client ID.
Once you’ve authorized and configured your client, run the development server:
yarn
yarn devor
npm i
npm run devOpen http://localhost:3000 with your browser to see the template home page.
You can start editing the homepage by modifying app/page.tsx. The page auto-updates as you edit the file.
Similarly, you can edit any other page on the pattern app/<route>/page.tsx. For more information, see Defining Routes in the Next.js documentation.
To learn how to customize the template and add more functionality using Wix APIs, see the Wix JavaScript SDK reference documentation.
This template is written in Next.js 13 using Next.js app directory. To learn more about Next.js, see the following resources:
- Next.js documentation: Learn about Next.js features and APIs.
- Learn Next.js: An interactive Next.js tutorial.
- Next.js app directory: Information on the Next.js App Router Roadmap.
Additionally, this template uses the following libraries and features:
You can deploy this repository using any platform which supports Next.js Version 13 and the App Router Roadmap.
The repository only requires a single environment variable: NEXT_PUBLIC_WIX_CLIENT_ID, which should contain a client ID authorizing access to a Wix project's data.
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.
This repo is preconfigured with Playwright for both functional and UI (screenshots) testing. It contains GitHub actions (for PRs) for both Netlify: netlify-e2e.yml and Vercel: vercel-e2e.yml.
Feel free to delete the one you are not using.
Note: there is a # TODO: change to your site name in both YAML files, please change the site name to the actual site name in the relevant deployment platform
This repo includes the screenshots to validate the initial site provided by this repo. Obviously, changing it to your needs would break these tests.
To update the screenshots simply delete the failing ones under location, create a pull request and let the PR build fail, then head to Netlify E2E / netlify-e2e/Vercel E2E / vercel-e2e status checks, and under Summary, the screenshots generated by Playwright are available to download and update in the folder location
