capriosa / wix-cms-nextjs-template Goto Github PK

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:

• Option A: Quick start deployment.
• Option B: Create an OAuth client ID in the Wix dashboard.

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.

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:

1. At the terminal, in the template's root folder, type cp .env.template .env.local.
2. In the new .env.local file, paste the client ID after NEXT_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 dev

or

npm i
npm run dev

Open 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:

• React Server Components
• TypeScript
• TanStack Query ^v4
• Tailwind CSS
• Flowbite
• Wix client SDK

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.