Next.js component for VWO SmartCode integration

The VWO SmartCode Next.js package enables seamless integration of VWO SmartCode into Next.js applications. This component is designed to work with both Page Router and App Router, allowing developers to integrate VWO SmartCode efficiently.

Install the package using npm or yarn:

# via npm
npm install vwo-smartcode-nextjs

# via yarn
yarn add vwo-smartcode-nextjs

For applications using the Page Router, add the VWOScript component inside _document.js (or _document.tsx if using TypeScript) to include it in the <head> of your HTML document.

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { VWOScript } from 'vwo-smartcode-nextjs';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <VWOScript accountId="YOUR_ACCOUNT_ID" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

For applications using the App Router, include the VWOScript component in layout.tsx to ensure it loads correctly within the <head> of your HTML document.

// app/layout.tsx
import { VWOScript } from 'vwo-smartcode-nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <VWOScript accountId="YOUR_ACCOUNT_ID" />
      </head>
      <body>{children}</body>
    </html>
  );
}

To add a nonce attribute for Content Security Policy:

<VWOScript
  accountId="YOUR_ACCOUNT_ID"
  scriptAttributes={{
    nonce: 'your-nonce-value',
  }}
/>

The VWOScript component accepts the following props:

Use SmartCode version 3.0 only when it is enabled for your VWO account. If 3.0 is not enabled for that account, do not set version={3.0}. It will not load. Confirm 3.0 is shown in your VWO dashboard before using it. If it is not shown, contact your CSM or VWO Support to have it enabled, and keep the default version 2.2 until then.

• Apoorv Tiwari

yarn install

yarn build

We welcome contributions to improve this package! Please read our contributing guidelines before submitting a PR.

Our Code of Conduct outlines expectations for all contributors and maintainers.

Apache License, Version 2.0

© 2025 Wingify Software Pvt. Ltd.