Usage Examples · Splitlab Developers

App Router (recommended)

// app/layout.tsx — Server Component, no 'use client'
import { MVTScripts } from '@splitlabio/nextjs-orchestrator';
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MVTScripts orchestratorKey="abc123xyz" />
        {children}
      </body>
    </html>
  );
}

Pages Router

// pages/_app.tsx
import { MVTOrchestrator } from '@splitlabio/nextjs-orchestrator';
 
export default function MyApp({ Component, pageProps }) {
  return (
    <MVTOrchestrator orchestratorKey="abc123xyz">
      <Component {...pageProps} />
    </MVTOrchestrator>
  );
}

Scope to a single funnel (App Router)

To load the engine only under a route (e.g. /lp/*) instead of the whole site, put MVTScripts in a nested layout rather than the root:

// app/lp/layout.tsx
import { MVTScripts } from '@splitlabio/nextjs-orchestrator';
 
export default function LpLayout({ children }) {
  return (
    <>
      <MVTScripts orchestratorKey="abc123xyz" />
      {children}
    </>
  );
}

Environment variables

Store your project key in an environment variable (must use the NEXT_PUBLIC_ prefix to be readable on the client):

# .env.local
NEXT_PUBLIC_SPLITLAB_PROJECT_KEY=your_key_here

<MVTScripts orchestratorKey={process.env.NEXT_PUBLIC_SPLITLAB_PROJECT_KEY!} />

Point at staging

Override the engine URL with the engineUrl prop. It defaults to the production CDN (https://cdn.splitlab.io/cdn/engine.js):

<MVTScripts
  orchestratorKey="abc123xyz"
  engineUrl="https://staging-svc.splitlab.io/scripts/engine.js"
/>

Disable anti-flicker

<MVTScripts orchestratorKey="abc123xyz" antiFlickerEnabled={false} />

Custom timeout

<MVTScripts orchestratorKey="abc123xyz" antiFlickerTimeoutMs={5000} />