From 6faaaf7991a42cb51d2ae772010a36ca59f10644 Mon Sep 17 00:00:00 2001 From: sonpiaz Date: Fri, 16 Oct 2026 00:23:00 -0700 Subject: [PATCH 1/2] docs: the Quickstart npm snippet wraps AffitorProvider in a client component The snippet rendered AffitorProvider directly in app/layout.tsx, which fails next build on @affitor/sdk 2.1.2 (layout.tsx is a Server Component). It now uses the same client-component Providers pattern as the click-tracking page, which works on every SDK version, and names the Pages Router alternative. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../docs/brand/quickstart/setup-program.mdx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/content/docs/brand/quickstart/setup-program.mdx b/content/docs/brand/quickstart/setup-program.mdx index a59ce4b3..b0ad1638 100644 --- a/content/docs/brand/quickstart/setup-program.mdx +++ b/content/docs/brand/quickstart/setup-program.mdx @@ -87,22 +87,32 @@ npm install @affitor/sdk ``` ```tsx -// app/layout.tsx (or your root layout) +// app/providers.tsx (a client component) +'use client'; import { AffitorProvider } from '@affitor/sdk/react'; -export default function RootLayout({ children }) { +export function Providers({ children }: { children: React.ReactNode }) { + return {children}; +} +``` + +```tsx +// app/layout.tsx (Next.js App Router): render it once around your app +import { Providers } from './providers'; + +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - - {children} - + {children} ); } ``` +The provider runs in the browser, so it lives in a client component: in the App Router, `layout.tsx` is a Server Component. With the Pages Router, wrap your app in `AffitorProvider` in `pages/_app.tsx`. + Below the snippets, **Tracker on** your site shows **Waiting for the first visit**, **Tracker not found on your site yet**, or **First click** and how long ago it arrived. **Check now** asks Affitor to look for the tracker on your website again. Nothing is saved on this step: **Continue** turns on after the first click, and **Skip for now** moves on to Payments. The step is done once Affitor finds the tracker on your website or receives real tracking events. Signup tracking is a separate install: see [signup tracking](/docs/brand/tracking/lead-tracking-signup), and [click tracking](/docs/brand/tracking/click-tracking) for the full click guide. From 5242b14b738003329ffa3a31eab64d93835bdd5d Mon Sep 17 00:00:00 2001 From: sonpiaz Date: Fri, 16 Oct 2026 00:26:28 -0700 Subject: [PATCH 2/2] docs: Quickstart npm lead-in names the App Router client component Co-Authored-By: Claude Opus 5.5 (1M context) --- content/docs/brand/quickstart/setup-program.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/brand/quickstart/setup-program.mdx b/content/docs/brand/quickstart/setup-program.mdx index b0ad1638..072aa288 100644 --- a/content/docs/brand/quickstart/setup-program.mdx +++ b/content/docs/brand/quickstart/setup-program.mdx @@ -69,7 +69,7 @@ The **Tracking** step (**Install tracking**) puts the click tracker on your site - **Your agent**: select **Connect your AI** to connect Claude, Cursor or another AI app and let it add the tracker. Shown only when AI agents are available for your program. - **Script tag**: paste the tag in `` on every page of your site. -- **npm**: install the SDK and wrap your root layout. +- **npm**: install the SDK and wrap your app in the provider. The snippets on the page already carry your Program ID: @@ -86,6 +86,8 @@ The snippets on the page already carry your Program ID: npm install @affitor/sdk ``` +On Next.js App Router, put the provider in a client component and render it once in your layout: + ```tsx // app/providers.tsx (a client component) 'use client';