How to Connect Next.js to a Wix Backend

Blog Team

Aug 3

6 min read

Updated: 2 days ago

Connecting Next.js to a Wix backend gives you a production-grade content management system, ecommerce engine, authentication layer, and data API, without standing up any server infrastructure yourself. Wix Headless exposes the full Wix business stack through a typed JavaScript SDK and REST API, making it a backend-as-a-service purpose-built for teams building on modern frameworks like Next.js.

Quick Answer: To connect Next.js to a Wix backend, create an OAuth app in Wix Headless Settings to get a clientId, install @wix/sdk and relevant domain packages (e.g. @wix/data for CMS, @wix/stores-catalog for products), then call createClient() with OAuthStrategy({ clientId }). Any Next.js Server Component or Route Handler can then call Wix APIs directly, fetching CMS collections, querying product catalogs, or managing member sessions, while your frontend deploys independently of the Wix editor.

What Wix Headless Gives You as a Backend

When you connect Next.js to Wix, you are not just getting a CMS. Wix Headless is a complete backend-as-a-service that exposes the following through a unified API surface:

CMS / Data Collections: Structured content in typed schema collections, queryable with @wix/data or the Wix Data REST API.
Wix Stores: Full ecommerce, product catalogs, carts, checkout, and orders, via @wix/stores-catalog and @wix/ecom.
Members and Auth: Visitor and member session management, including Wix-managed login pages or fully custom external login flows.
Bookings: Appointment scheduling, availability windows, and confirmation workflows out of the box.
Pricing Plans: Subscription and one-time plan management with built-in payment processing.
Events: Event creation, RSVP, and ticketing with integrated payment support.

The nuance: Wix Headless is not a dumb content store. Each business solution carries its own business logic, inventory management, availability windows, payment flows, that you would otherwise build yourself. When you connect Next.js to Wix, you inherit that logic rather than reinventing it.

The connection is bidirectional. You can read data from Wix to render pages, and write data back, submitting orders, creating member accounts, booking appointments, from within your Next.js app.

Step 1, Create an OAuth App and Get Your Client ID

Every connection between Next.js and a Wix backend is authorized through an OAuth app. Here is how to create one:

Open your Wix project dashboard and navigate to Settings then Headless Settings.
Under OAuth Apps, click Create New.
Name the app (e.g., Next.js Frontend) and configure allowed domains for development and production.
Copy the generated Client ID and add it to your .env.local as NEXT_PUBLIC_WIX_CLIENT_ID.

Here is the subtlety: Wix OAuth for headless requires only a clientId, no client secret needed for visitor and member flows. The clientId is safe to expose in a browser environment (hence the NEXT_PUBLIC_ prefix), because all requests are scoped to your project data. For admin-level access, use an API key in a server-only environment variable instead.

Step 2, Install the SDK and Initialize Your Client

Install @wix/sdk and the domain-specific packages your app needs:

npm install @wix/sdk @wix/data @wix/stores-catalog @wix/members

Create a shared client module at lib/wix-client.ts that Server Components and Route Handlers can import:

import { createClient, OAuthStrategy } from '@wix/sdk';
import { items } from '@wix/data';
import { products } from '@wix/stores-catalog';
import { members } from '@wix/members';

export const wixClient = createClient({
  modules: { items, products, members },
  auth: OAuthStrategy({
    clientId: process.env.NEXT_PUBLIC_WIX_CLIENT_ID!,
  }),
});

This client is safe to instantiate at the module level in Server Components. It will not be included in the browser bundle unless you explicitly import it in a Client Component, in that case, route the call through a Server Action to keep credentials server-side.

"Fundamentally, Next.js has always been an API framework." -- Guillermo Rauch, CEO of Vercel and creator of Next.js, @rauchg on X, February 28, 2025

That framing matters for this integration. When you initialize the Wix client in a Next.js Server Component, the Wix API call happens on the server, the response is serialized and sent as rendered HTML. Zero SDK code ships to the browser unless you route it there deliberately.

Step 3, Fetch Wix CMS Data in Next.js Server Components

With the client initialized, fetching from a Wix CMS collection in a Server Component looks like this:

// app/blog/page.tsx
import { wixClient } from '@/lib/wix-client';

export default async function BlogPage() {
  const { items: posts } = await wixClient.items
    .queryDataItems({ dataCollectionId: 'BlogPosts' })
    .find();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post._id}>{post.data?.title}</li>
      ))}
    </ul>
  );
}

No useEffect, no client-side fetch, no loading state for the initial render. The data arrives with the page, fully server-rendered and immediately indexable by search engines.

How Wix Headless compares to other headless CMS options for Next.js:

Feature	Wix Headless	Contentful	Sanity
Built-in ecommerce	Yes (Wix Stores)	No	No
Built-in auth/members	Yes	No	No
JS SDK for Next.js	Yes (@wix/sdk)	Yes	Yes
Free tier	Yes	Limited	Yes
Official Vercel templates	Yes (multiple)	Yes	Yes

"We have been building the infrastructure to make those things operate at scale." -- Shahar Talmi, General Manager of Developer Platform at Wix, GlobeNewsWire, July 21, 2026

That infrastructure difference is visible in the table. Contentful and Sanity are excellent pure-content stores. Wix Headless is a content store plus a business backend, the distinction becomes critical the moment your app needs to process payments, schedule appointments, or manage member subscriptions.

Ready to start building? Visit Wix Headless to create your Wix Headless project, explore Next.js templates, and access the full SDK reference.

Step 4, Handle Authentication for Member-Gated Routes

Wix Headless supports two authentication levels: visitors (anonymous sessions) and members (logged-in users). Both are managed through session tokens stored in cookies. In your Next.js middleware.ts, check for an existing session cookie and generate a visitor token if none exists:

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { createClient, OAuthStrategy } from '@wix/sdk';
import { members } from '@wix/members';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const sessionCookie = req.cookies.get('wix-session');

  if (!sessionCookie) {
    const client = createClient({
      modules: { members },
      auth: OAuthStrategy({ clientId: process.env.NEXT_PUBLIC_WIX_CLIENT_ID! }),
    });
    const tokens = await client.auth.generateVisitorTokens();
    res.cookies.set('wix-session', JSON.stringify(tokens), {
      httpOnly: true,
      maxAge: 60 * 60 * 24 * 30,
    });
  }

  return res;
}

Here is the nuance: Wix issues short-lived access tokens and long-lived refresh tokens. Your middleware needs to detect expired access tokens and call refreshTokens() before the next API request fails. The official Wix Next.js templates on Vercel handle token rotation out of the box, which is why cloning one of those templates is a faster starting point than building the auth layer from scratch.

Frequently Asked Questions

Does Wix Headless work with the Next.js App Router?

Yes. The Wix JavaScript SDK runs in any JavaScript environment including Node.js, which is the runtime for Next.js Server Components and Route Handlers. You can call Wix APIs directly from async Server Components without a wrapper. The SDK also works in Client Components, but for credential security route calls through Server Actions or Route Handlers when possible.

Do I need a Wix premium plan to use Wix Headless?

You can start with a free Wix project. Some business solutions, Wix Stores with live payment processing, Wix Bookings with larger team configurations, require a paid plan. The CMS data API, OAuth setup, and the SDK itself are available at no cost for development and testing.

Can I use the Wix REST API instead of the JavaScript SDK?

Yes. Every Wix API available through the SDK is also accessible as a REST endpoint. If you are working in an environment where npm packages are impractical, a serverless function with tight dependency constraints, the REST API is fully supported with both API keys and OAuth tokens accepted as authorization methods.

How do I deploy a Next.js app connected to Wix Headless?

Vercel is the recommended platform and hosts official Wix starter templates that deploy in one click. Any platform that runs Next.js, Netlify, Render, self-hosted Docker, AWS Lambda@Edge, works without special configuration beyond setting the NEXT_PUBLIC_WIX_CLIENT_ID environment variable.

What is the difference between Wix CMS collections and Wix page content?

Wix CMS collections are structured data tables you define in the Wix dashboard, similar to a database schema with typed fields (text, number, date, reference, image). This is distinct from content created inside the Wix site editor, which is editor-specific and not queryable via API. For headless projects, CMS collections are the canonical way to store and retrieve structured content programmatically.

Does Wix Headless work with frameworks other than Next.js?

Yes. Wix Headless works with any JavaScript frontend: React, Vue, Nuxt, SvelteKit, Astro, Remix, or plain HTML with a script tag. Next.js has the most official template support because Wix publishes starters on Vercel, but the SDK is framework-agnostic and the REST API works from any HTTP client in any language.

Connecting Next.js to a Wix backend gives your frontend access to a fully managed business infrastructure, CMS collections, ecommerce, authentication, bookings, and subscriptions, through a typed SDK that integrates cleanly with the App Router Server Components model. The connection comes down to three steps: create an OAuth app, initialize the Wix client with your clientId, and call Wix APIs from Server Components. Authentication for member-gated routes adds middleware complexity, but the official Next.js templates on Vercel handle the boilerplate so your team can focus on the product.