Skip to main content

Usage Examples

// 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} />