Installation Guide

Next.js

Add ChurnFast tracking to your Next.js application with a single component. Works with both the App Router and Pages Router.

Installation

Install the package

npm install @churnfa_st/react

bash

Add the component to your root layout

Import and render the <ChurnFast /> component, passing your Site ID and the authenticated user's email:

app/layout.tsx

import { ChurnFast } from '@churnfa_st/react';
import { auth } from '@/lib/auth';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();

  return (
    <html lang="en">
      <body>
        {children}
        {session?.user?.email && (
          <ChurnFast
            siteId="YOUR_SITE_ID"
            email={session.user.email}
          />
        )}
      </body>
    </html>
  );
}

tsx

Tip

The component is marked 'use client' internally, so it works in Server Component layouts without any extra configuration.

Verify installation

Run your app, visit a page as an authenticated user, then check ChurnFast's Integrations page and click Verify Installation.

Pages Router

If you're using the Pages Router, add the component in _app.tsx:

pages/_app.tsx

import type { AppProps } from 'next/app';
import { useSession } from 'next-auth/react';
import { ChurnFast } from '@churnfa_st/react';

export default function App({ Component, pageProps }: AppProps) {
  const { data: session } = useSession();

  return (
    <>
      <Component {...pageProps} />
      {session?.user?.email && (
        <ChurnFast
          siteId="YOUR_SITE_ID"
          email={session.user.email}
        />
      )}
    </>
  );
}

tsx

What's tracked

Note

The ChurnFast script automatically tracks page views and session durations. Client-side navigation is detected automatically — no additional setup is needed for route changes in Next.js.

Props

Prop	Type	Required	Description
`siteId`	string	Yes	Your ChurnFast Site ID (UUID)
`email`	string	Yes	The authenticated user's email
`scriptUrl`	string	No	Override the tracking script URL

Next steps

Script Configuration Reference — full details on tracking behavior and the underlying script