Skip to main content

Next.js Orchestrator

React component for integrating MVTLab.io CDN engine into Next.js applications with optional anti-flicker support.

What is MVTLab.io?​

MVTLab.io 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.

Features​

  • ✅ Zero-config setup - Works out of the box with sensible defaults
  • ✅ Anti-flicker protection - Prevents users from seeing unoptimized content
  • ✅ TypeScript support - Full type definitions included
  • ✅ SSR-safe - All DOM operations run client-side only
  • ✅ Single script injection - Prevents duplicate script tags
  • ✅ Project key validation - Enforces one key per website
  • ✅ Framework agnostic - Works with both App Router and Pages Router

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://staging-svc.mvtlab.io/scripts/engine.js"
  data-project-key="Kjnqjkf277nYGYUSoA0IXQ"
  data-mvt="engine"
></script>

After (React Component):

import { MVTOrchestrator } from '@mvtlab/nextjs-orchestrator';

<MVTOrchestrator orchestratorKey="Kjnqjkf277nYGYUSoA0IXQ" antiFlickerEnabled>
  {children}
</MVTOrchestrator>