Background
⌘K

Next.js Integration

Learn how to integrate Affonso affiliate tracking into your Next.js application using App Router.

Silvestro
Written by Silvestro
Updated more than a month ago

Next.js provides built-in Script optimization that makes it easy to add tracking scripts with optimal loading performance.

Add tracking script to your root layout

Next.js App Router allows you to add scripts globally through the root layout component for consistent tracking across all pages.

  1. Open your root layout file at app/layout.tsx (or app/layout.jsx)
  2. Import the Script component from next/script
  3. In the <head> section, add your Affonso tracking script:
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <head>
        <Script
          async
          defer
          src='https://affonso.io/js/pixel.min.js'
          data-affonso='YOUR_PUBLIC_PROGRAM_ID'
          data-cookie_duration='YOUR_COOKIE_DURATION'
          strategy='afterInteractive'
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Find your Program ID →

Testing

  1. Start your development server: npm run dev
  2. Visit localhost:3000?atp=test
  3. Check browser DevTools → ApplicationCookiesaffonso_referral
  4. Deploy and verify tracking in your Affonso dashboard

Next Steps

Once installed, you can access affiliate referral data and pass it to your payment provider. Connect your payment provider →

Was this article helpful?

If you still need help, our support team is here for you.

Contact Support
bg

Ready to Scale Your SaaS?

Affonso is the easiest way to launch your own affiliate program. We take care of the technical stuff, so you can focus on growing your business.