v0.dev by Vercel generates React/Next.js components and applications from text prompts. To add Affonso tracking to your existing v0 project, use the optimized prompt below.

Promopt

Copy and paste this prompt into v0.dev to add Affonso tracking to your existing project:

Add Affonso.io affiliate tracking to this Next.js/React project with the following specification:

TRACKING IMPLEMENTATION:
Import Script from 'next/script' and add this tracking script:

<Script
  src="https://affonso.io/js/pixel.min.js"
  data-affonso="YOUR_PUBLIC_PROGRAM_ID"
  data-cookie_duration="30"
  strategy="afterInteractive"
/>

INTEGRATION REQUIREMENTS:
1. Add the Script component to the root layout or _app.js file
2. Use next/script import: import Script from 'next/script'
3. Set strategy to "afterInteractive" for optimal performance
4. Place in the <head> section or at the top of the layout
5. Ensure it loads on all pages and routes
6. Must work with Next.js App Router and Pages Router

TECHNICAL SPECIFICATIONS:
- Compatible with Next.js 13+ and App Router
- Should not block page rendering or hydration
- Must persist across client-side navigation
- No conflicts with existing Next.js optimizations
- Properly handles server-side rendering

CODE STRUCTURE:
- For App Router: Add to app/layout.tsx
- For Pages Router: Add to pages/_app.tsx
- Ensure TypeScript compatibility if used
- Follow Next.js best practices for script loading

Please implement this tracking script following Next.js conventions.

Replace YOUR_PUBLIC_PROGRAM_ID with your actual Program ID.

Next.js Specific Troubleshooting

App Router issues:

The tracking script isn't working with Next.js App Router. Please:
1. Ensure the Script component is in app/layout.tsx
2. Place it inside the <html> or <head> section
3. Verify strategy="afterInteractive" is set
4. Check that it's not wrapped in client-side only components

Pages Router issues:

The tracking script needs to work with Pages Router. Please:
1. Add the Script component to pages/_app.tsx
2. Import Script from 'next/script'
3. Place it at the top level of the component return
4. Ensure it loads before page components

TypeScript errors:

Fix TypeScript errors for the tracking script:
1. Ensure proper import: import Script from 'next/script'
2. Add type annotations if needed
3. Verify all props are correctly typed
4. Check that data attributes are properly formatted