▲ Next.js Integration

Integrate Sypnia with your Next.js application - it's just two lines of code.

Next.js integration is super simple! Just add the Script components to your layout.

🚀 Quick Setup

Add the Sypnia scripts to your root layout. That's it!

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* Sypnia Analytics SDK */}
        <Script
          src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"
          strategy="afterInteractive"
        />
        
        {/* Sypnia Survey Widget (optional) */}
        <Script
          src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_PROJECT_KEY with your actual project key from the dashboard settings.

📝 Track Custom Events

Track events from any client component:

components/SignupButton.tsx

'use client';

export function SignupButton() {
  const handleClick = () => {
    // Track the event
    window.Sypnia?.track('signup_clicked', {
      location: 'header',
      variant: 'primary'
    });
    
    // Continue with signup logic...
  };

  return (
    <button onClick={handleClick}>
      Sign Up
    </button>
  );
}

👤 Identify Users

Identify users after authentication:

// After successful login
window.Sypnia?.identify(user.id, {
  email: user.email,
  name: user.name,
  plan: user.plan
});

🔄 SPA Route Tracking (Optional)

The SDK automatically tracks the initial page load. For SPA route changes, you can add a tracker component:

components/Analytics.tsx

'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, Suspense } from 'react';

function PageTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    window.Sypnia?.page();
  }, [pathname, searchParams]);

  return null;
}

export function Analytics() {
  return (
    <Suspense fallback={null}>
      <PageTracker />
    </Suspense>
  );
}

// Then add <Analytics /> to your layout

🔧 TypeScript Types

For TypeScript support, add this to a types/sypnia.d.ts file:

types/sypnia.d.ts

declare global {
  interface Window {
    Sypnia: {
      track: (event: string, properties?: Record<string, unknown>) => void;
      identify: (userId: string, traits?: Record<string, unknown>) => void;
      page: () => void;
      feedback: (score: number | null, message?: string) => void;
    };
  }
}

export {};

📄 Pages Router

If you're using the Pages Router:

pages/_app.tsx

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      
      <Script
        src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"
        strategy="afterInteractive"
      />
      <Script
        src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"
        strategy="afterInteractive"
      />
    </>
  );
}

SDK Methods React Integration