@wizestudio/renderer-next

Next.js integration for WizeStudio: App Router rendering, draft mode and cache tagging.

Where this sits

WizeStudio is a visual page builder for headless CMS platforms. Pages are stored as JSON, your React components render them, and the editor never gets to see those components — it frames your real application instead.

This package is deliberately thin. Everything about rendering lives in @wizestudio/renderer-react; this contributes only what is genuinely Next-specific — validating a layout that arrived from a database, fetching the data sources a page actually binds to, draft mode, and cache tags. The split is not decoration: plain React is a planned SDK, and if Next had shipped first as a monolith, extracting React later would have meant untangling Next-isms from the recursion core.

Install

npm install @wizestudio/renderer-next @wizestudio/renderer-react

Next 14 or later and React 18 or later are peer dependencies.

Usage

// app/[...slug]/page.tsx
import { WizePage } from '@wizestudio/renderer-next';
import { components } from '@wizestudio/components';

export default async function Page({ params }) {
  const entry = await getPage((await params).slug);
  return <WizePage layout={entry.layout} components={components} data={{ page: entry }} />;
}

WizePage is a Server Component: no hooks, no effects, no client JavaScript beyond whatever your own widgets bring.

The layout is validated rather than trusted. It arrives from a database that other tools can write to, and a malformed document should degrade to fallback — with onInvalid wired to your error tracking — rather than crash a production route. Stale documents are migrated on the way through.

Revalidation

// In a route handler reached by a CMS webhook
import { cacheTagsFor } from '@wizestudio/renderer-next';

for (const tag of cacheTagsFor(document, 'page:home')) revalidateTag(tag);

cacheTagsFor returns the page tag, wizestudio, a tag per referenced data source and one per token set — so publishing invalidates exactly the pages a change can affect rather than the whole site.

Fetching only what is bound

const data = await resolveDataSources({
  document,
  seed: { page: entry },
  fetch: (name, source) => cms.query(name, source),
});

Only sources the document actually binds to are fetched. A document may declare a dozen sources while a given page binds to two, and fetching the other ten on every request is the kind of quiet waste that only shows up under load.

Key exports

| Export | Purpose | |---|---| | WizePage | Validates, migrates and renders a stored layout. layout, components, data, tokens, fallback, onInvalid | | cacheTagsFor | The cache tags a page's layout depends on | | resolveDataSources | Fetches only the data sources a document references | | isPreview | Whether the request is an editor preview — draft mode, or ?wizePreview=1 |

Licence

MIT.

WizeStudio is open core, and this package is on the production render path. It is MIT deliberately and contains no licensing code of any kind, which is what makes "a lapsed subscription cannot break your live site" a property of the build rather than a promise. schema, core, canvas-bridge, renderer-react and cli are MIT for the same reason; the authoring side — editor, plugin-strapi, components, cms-strapi — is commercial.

wizestudio.wizeb.com