How to Add Affiliate Program to Next.js with Blossu

Install the Blossu SDK and start tracking referrals in your Next.js application in under 5 minutes.

Image: Next.js + Blossu integration overview

Install the package

Add the Blossu SDK to your Next.js project using npm or yarn.

Terminal

npm install @blossu/ui

Or if you prefer yarn:

Terminal

yarn add @blossu/ui

Add the Analytics component to your layout

Add the ReferralTracker component to your root layout to track all pages. This will automatically capture referral clicks and store the referral ID.

TypeScript

import { ReferralTracker } from "@blossu/ui/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <ReferralTracker programId="YOUR_PROGRAM_ID" />
    </html>
  );
}

Replace YOUR_PROGRAM_ID with your actual program ID from the Blossu dashboard. You can find this in your program settings.

Image: Where to find your program ID in the dashboard

Verify the installation

To verify the installation is working correctly:

Visit your site with a test referral link (e.g., yoursite.com?via=test)
Open your browser's developer console
Check if window.blossu_ref_id is defined

How it works

When a visitor arrives via a partner referral link (e.g., yoursite.com?via=partner), the script automatically captures the referral and stores it in window.blossu_ref_id. This ID is then used to attribute any purchases to the referring partner.

The referral ID is also stored as a first-party cookie, so it persists for 60 days even if the visitor closes their browser and returns later.

Image: Diagram showing the referral tracking flow

Next steps

Now that you have tracking set up, you need to connect your payment platform to automatically track conversions and calculate partner commissions.

How to track affiliates and revenue with Stripe