Skip to main content

Next.js

Steps to install snippet on a Next.js site

Standard Installation​

  • Copy the JS snippet from Data Collection under settings
  • And paste into corresponding file as shown below:
app/layout.jsx
import Script from "next/script";

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="syft_script"
          dangerouslySetInnerHTML={{
            __html: `{JS_SNIPPET}`,
          }}
        />
      </body>
    </html>
  );
}

CSP Compatible Installation​

If you have a strict Content Security Policy (CSP) and cannot use inline scripts with dangerouslySetInnerHTML, you can load the script directly from our CDN.

app/layout.jsx
import Script from "next/script";

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="syft-loader"
          src="https://cdn.sy-d.io/syftnext/syft.umd.js"
          data-api-key="{YOUR_API_KEY}"
        />
      </body>
    </html>
  );
}

Note: You must allowlist sy-d.io in your CSP configuration (specifically https://cdn.sy-d.io for script-src and https://sy-d.io for connect-src).

Important: When loading the script directly from the CDN, the window.syft object may not be available immediately (unlike the inline snippet which sets up a proxy). You must ensure the script has loaded before calling syft.enable(), syft.identify(), or other methods. You can check for availability or use the script's onLoad callback.