Next.js

On Next.js, install Splitlab with the Next.js Orchestrator package instead of pasting the install snippet. It renders the same engine script, plus the anti-flicker style, the way Next.js expects: server-rendered on the App Router, so visitors never see the original page flash before a variant applies.

Steps

1. Install the package:

   npm install @splitlabio/nextjs-orchestrator

2. Add it to your app with your project key (from the dashboard → Install / SmartCode).

   App Router (recommended), in 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, in pages/_app.tsx:

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

3. Deploy or restart your Next.js app.

4. Verify the install.