Skip to main content

Quick Start

Add MVTScripts once at the top of <body> in your root layout.tsx. It is a Server Component — no 'use client' needed — so the anti-flicker style and engine script are injected into the server-rendered HTML and run before hydration, preventing any content flash.

// app/layout.tsx
import { MVTScripts } from '@splitlabio/nextjs-orchestrator';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MVTScripts orchestratorKey="YOUR_PROJECT_KEY" />
        {children}
      </body>
    </html>
  );
}

Pages Router​

Use MVTOrchestrator in pages/_app.tsx:

// pages/_app.tsx
import { MVTOrchestrator } from '@splitlabio/nextjs-orchestrator';

export default function MyApp({ Component, pageProps }) {
  return (
    <MVTOrchestrator orchestratorKey="YOUR_PROJECT_KEY">
      <Component {...pageProps} />
    </MVTOrchestrator>
  );
}

Note: Replace YOUR_PROJECT_KEY with your actual Splitlab project key. You can find this in your Splitlab dashboard on the website's install / SmartCode screen.

Verify it works​

  1. Load a page of your site, open DevTools → Network, and filter for engine.js. It should return 200 from cdn.splitlab.io.
  2. In Elements, confirm <script id="mvt-engine-script" data-project-key="…" data-mvt-engine="true"> is present.
  3. In the Splitlab dashboard, the website's install status flips to installed once the engine phones home from your host.