“LinkJolt made affiliate programs easy for us. Some of the other platforms were very difficult and clunky to use, but this UI is so simple and it just works. Highly recommend!”
Next.js Integration
Next.js Affiliate Tracking
Add affiliate tracking to your Next.js app with the Script component and App Router. Server-side conversion tracking via Stripe or Paddle webhooks. Full TypeScript support, 0% transaction fees.
App Router ready
TypeScript support
0% transaction fees
How It Works
1.
Script component loads tracking
2.
Cookies store attribution for 30 days
3.
Customer completes checkout
4.
Stripe/Paddle webhook tracks the sale
Next.js Affiliate Tracking Features
Native support for App Router, Script component, and server-side webhook tracking
App Router Compatible
Full support for Next.js 13+ App Router. Works seamlessly with Server Components, Client Components, and Route Handlers.
Script Component Integration
Load the tracking script using the native Next.js Script component with strategy="afterInteractive". No hydration issues, no render blocking.
TypeScript Support
Fully typed tracking methods with TypeScript definitions. Autocomplete for all conversion events and tracking API calls.
Server-Side Tracking
Conversions are tracked server-side via Stripe, Paddle, Polar or Creem webhooks. No client-side conversion calls needed for the primary tracking method.
Real-Time Analytics
Track clicks, conversions, and revenue instantly. Affiliates get their own performance dashboard with detailed insights.
Fraud Prevention
Rule-based fraud detection with IP matching, email comparison, order deduplication, and configurable risk scoring.
Setup in 4 Steps
Add affiliate tracking to your Next.js app in about 5 minutes
Watch how it is done
Add an Affiliate Tracking Script to Next.js (App Router) (1:20)
Plumquote is a demo account made for this tutorial.
Watch on YouTubeRead the transcript
Find your script in LinkJolt 0:00
Your Next.js app needs one script for LinkJolt to see affiliate links. Here's where it goes in the App Router, and how to check that it works.
In LinkJolt, open Integrations. On your payment tab, step three has your tracking script, with your own ID in the address.
Open "Using Next.js, React, Vite or Lovable?" and pick Next.js. It's the same address, in Next's Script component.
Add it to app/layout.tsx 0:33
Open your root layout, app/layout.tsx. Import Script from next/script.
Then add the Script inside the body, with the strategy afterInteractive.
On the Pages Router, put it in pages/_app.tsx instead.
Check it works 0:46
Deploy, then open your site with the test link from Check it works. In the console, the script has loaded, and it's holding the test affiliate.
Back in LinkJolt, the tracking script now shows as detected on your site.
From now on, a visitor who arrives through an affiliate's link is remembered for thirty days. If your own code creates Stripe Checkout, pass that affiliate to the session: the next video shows how.
Try LinkJolt free for seven days at linkjolt.io.
1
Create LinkJolt Account
Sign up, create a campaign, and copy your Merchant ID from the Integration Hub.
2
Add Script Component to layout.tsx
Import the Next.js Script component and add the LinkJolt tracking script to your root layout with strategy="afterInteractive".
3
Connect Stripe, Paddle, Polar or Creem Webhooks
Add your LinkJolt webhook URL in your Stripe or Paddle dashboard, or connect Polar with one approval. Conversions are tracked automatically via server-side webhooks.
4
Invite Affiliates
Send invitations or create public signup links. Affiliates start promoting your Next.js app immediately.
Code Snippets to Copy
Step 2
Script Component in layout.tsxAdd to your root layout for automatic click tracking
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children
}: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://www.linkjolt.io/api/tracking.js?id=YOUR_MERCHANT_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}Replace YOUR_MERCHANT_ID with your actual Merchant ID from the LinkJolt Integration Hub.
Step 3
Stripe Checkout with AttributionPass affiliate attribution via client_reference_id
// 1. In the browser: send the referral with your checkout request
const referral = window.linkjolt?.referral || '';
const res = await fetch('/api/create-checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ priceId: 'price_123', referral }),
});
window.location.href = (await res.json()).url;
// 2. On your server: read it and pass it when you create the session
// (a Next.js route handler; with Express, add app.use(express.json()) and read req.body)
const { priceId, referral } = await req.json();
const session = await stripe.checkout.sessions.create({
line_items: [{ price: priceId, quantity: 1 }],
// ...your other options (mode, success_url)
client_reference_id: referral || undefined,
});
return Response.json({ url: session.url });The tracking script sets window.linkjolt.referral; it does not touch a session your server creates. Send it to your checkout route as JSON and set it as client_reference_id.
Watch how it is done
Stripe Checkout Affiliate Tracking in Next.js (client_reference_id) (1:46)
Plumquote is a demo account made for this tutorial.
Watch on YouTubeRead the transcript
The result 0:00
This sale came through a Stripe Checkout session that a Next.js app creates in its own code, and it's credited to the affiliate who sent the customer. It takes two changes. Here they are.
Pick Checkout from my code 0:11
In LinkJolt, connect Stripe on the Stripe tab. Then, under How do your customers pay, pick Checkout from my code.
Step three has two parts. The first is the tracking script, in your root layout. There's a separate video on that.
The second: pass the affiliate when you create the Checkout session. The browser reads window.linkjolt.referral, and sends it to your server with the checkout request, as JSON.
Send it with the content type header, or most servers won't read it.
Send the referral, set client_reference_id 0:43
In the page with your buy button, read the referral, and send it in the body of the request.
On your server, read it from the body, and set it as the session's client_reference_id. When a visitor didn't come through an affiliate link, it's empty, and no commission is created.
Using TypeScript? Declare window.linkjolt once, in a global.d.ts file.
And if your app already uses client_reference_id for its own value, keep it, and put the referral in the session's metadata as linkjolt_ref instead. LinkJolt reads either.
A sale through an affiliate's link 1:18
Here's a reader arriving through Leo's link. They click subscribe, and the server creates the session with Leo's reference.
They pay on Stripe's checkout as usual, and the sale reaches LinkJolt.
Credited to Leo: fifteen dollars, three dollars of commission, waiting for your approval.
That's the setup. Try LinkJolt free for seven days at linkjolt.io.
How LinkJolt Compares
| Feature | LinkJolt | Manual Setup | Other Platforms |
|---|---|---|---|
| Setup Time | 5 minutes | Hours/Days | 15-30 min |
| Transaction Fees | 0% | N/A | 3-5% |
| App Router Support | Native | Custom | Varies |
| Server-Side Tracking | Webhooks | Custom code | Varies |
| TypeScript Support | Built-in | DIY | Some |
| Recurring Commissions | Automatic | Manual | Some platforms |
| Fraud Detection | Built-in | None | Extra cost |
What People Say About Us
Don’t just take our word for it. Hear from some of our satisfied customers!
“We've increased our conversion rates by 37% since we started using LinkJolt. The tracking features and instant payouts alone are worth the price! .”
“The dashboard gives our team the insights we need to work more efficiently and help our partners earn more money. ”
“I really appreciate how quick you are to respond and how willing to work with me you've been throughout our setup process.”
“This is f***ing awesome!! Haha sorry for the language but really happy with how you guys reply to everything and were able to implement changes so quickly and I really see that you're trying to make it as good possible for the people using it.”
“Thanks for your help, I'm glad everything is working as it should.”
Simple Pricing
Choose the perfect plan for your business. Start with a 7-day free trial.
✓ No hidden fees✓ Cancel anytime✓ 0% transaction fees
3.5 months free with annual billing
| Find your fit.Let others sell your product for you. Every plan starts with a | For small teamsStarter | Most popularProfessional | For scale-upsUltimate |
|---|---|---|---|
| Your program | |||
| Affiliate-driven sales / month | Up to $5,000 | Up to $25,000 | Up to $50,000 |
| Active campaigns | 5 | Unlimited | Unlimited |
| Active affiliates | 10 | Unlimited | Unlimited |
| Staff seats | × Not included | 2 | 20 |
| Analytics data retention | 3 months | 12 months | 12 months |
| Tracking & growth | |||
| Affiliate tracking | Standard | Advanced | Advanced |
| Fraud protection | Standard | Enhanced | Enhanced |
| Stripe payout integration | ✓ Included | ✓ Included | ✓ Included |
| Bulk payouts | ✓ Included | ✓ Included | ✓ Included |
| Affiliate discovery | × Not included | ✓ Included | ✓ Included |
| Custom commission structures | × Not included | ✓ Included | ✓ Included |
| Developer API | × Not included | Read + setup | Full access |
| MCP Server | × Not included | Read + setup | Full access |
| Direct affiliate & staff chat | × Not included | × Not included | ✓ Included |
| Your brand & support | |||
| Branded affiliate signup pages | × Not included | ✓ Included | ✓ Included |
| Affiliate portal on your domain | × Not included | × Not included | ✓ Included |
| Remove the LinkJolt badge | × Not included | × Not included | ✓ Included |
| Support | Priority Chat + Email | Priority Chat + Email | |
More automation with Professional & Ultimate
Auto-approve affiliates and automate payout management. Commission tiers: up to 5 on Professional, up to 10 on Ultimate.
Doing more than $50,000 a month in sales?
See the Scale plan The Scale plan has unlimited tracked sales for a flat $249 a month on monthly billing, $199.20/mo, billed annually.
Want to earn commissions as an affiliate? Joining is free.
Frequently Asked Questions
Does LinkJolt work with the Next.js App Router?
Yes. LinkJolt fully supports Next.js 13+ App Router. Add the tracking script to your root layout.tsx using the Next.js Script component with strategy="afterInteractive". The script handles click tracking automatically via cookies and localStorage. No changes to your routing or page structure are needed.
Does it work with Server Components?
Yes. The LinkJolt tracking script is added to your root layout and runs client-side without causing hydration issues. It is fully compatible with React Server Components. Conversion tracking happens server-side through Stripe or Paddle webhooks, so no client component wrappers are required for tracking purchases.
How are conversions tracked?
Conversions are tracked server-side via Stripe or Paddle webhooks (recommended). When a customer clicks an affiliate link, the tracking script stores attribution in cookies. At checkout, the attribution data is passed to Stripe via client_reference_id. Stripe then sends a webhook to LinkJolt with the conversion details. No client-side conversion code is needed for this flow.
Does affiliate tracking affect Next.js performance?
No. The LinkJolt script loads asynchronously after the page is interactive using the Next.js Script component. It does not block rendering or affect Lighthouse scores. The script is lightweight, uses passive event listeners, and has zero impact on Core Web Vitals.
Can I use this with both Stripe and Paddle?
Yes. LinkJolt supports both Stripe and Paddle as payment processors. Add the tracking script to your layout.tsx for click attribution, then connect whichever payment processor you use. Webhook-based conversion tracking works with both providers out of the box.
