Next.js Orchestrator · Splitlab Developers

React SDK for integrating the Splitlab CDN engine into Next.js applications with anti-flicker support.

Package renamed

This package is now published as @splitlabio/nextjs-orchestrator (previously @mvtlab/nextjs-orchestrator). The old package is deprecated and points here. The public API is unchanged — component names (MVTScripts, MVTOrchestrator), the orchestratorKey prop, and the data-mvt-* engine attributes are kept as-is because the deployed CDN engine matches on them.

What is Splitlab?

Splitlab is a CDN-based engine for running A/B tests and multivariate tests. This SDK provides a React-friendly wrapper around the standard HTML integration snippet, making it easy to use in modern Next.js applications.

Two components

Component	Type	Use it in	Prevents SSR flash?
`MVTScripts` ✅ recommended	Server Component	root `app/layout.tsx`	Yes — scripts are in the server HTML, before hydration
`MVTOrchestrator`	Client Component (`'use client'`)	`pages/_app.tsx`, or anywhere you can't edit `layout.tsx`	No — injects after hydration

Features

✅ SSR-safe anti-flicker — with MVTScripts the hide/reveal runs before hydration, so there is no content flash
✅ TypeScript support — full type definitions included (MVTScriptsProps, MVTOrchestratorProps)
✅ Single script injection — enforces one engine script and one project key per page
✅ App Router and Pages Router — a component for each
✅ Configurable engine URL — defaults to production, override for staging

Before vs After

Before (Plain HTML):

<script>
  var timeout = 3000;
  !(function (h, i, d, e) {
    var t,
      n = h.createElement('style');
    (n.id = e),
      (n.innerHTML = 'body{opacity:0}'),
      h.head.appendChild(n),
      (t = d),
      (i.rmfk = function () {
        var t = h.getElementById(e);
        t && t.parentNode.removeChild(t);
      }),
      setTimeout(i.rmfk, t);
  })(document, window, timeout, 'abhide');
</script>
<script
  src="https://cdn.splitlab.io/cdn/engine.js"
  data-project-key="Kjnqjkf277nYGYUSoA0IXQ"
  data-mvt="engine"
  data-mvt-engine="true"
  crossorigin="anonymous"
  async
></script>

After (React Component):

// app/layout.tsx — Server Component, no 'use client' needed
import { MVTScripts } from '@splitlabio/nextjs-orchestrator';
 
<MVTScripts orchestratorKey="Kjnqjkf277nYGYUSoA0IXQ" />