Next.js Installation Guide

Step-by-step guide to install TwoBucks Analytics on Next.js.

App Router (Next.js 13+)

Quick Start

Add the TwoBucks script to your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://twobucks.ai/script.js"
          data-website-id="your-website-id"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pages Router (Next.js 12 and below)

Add the script to your _document.tsx:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://twobucks.ai/script.js"
          data-website-id="your-website-id"
          strategy="afterInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

SPA Navigation Setup

TwoBucks automatically tracks Next.js route changes using the History API. No additional configuration is needed for:

next/link navigation
router.push() and router.replace()
Browser back/forward buttons

Common Issues

Script Not Loading

If the script doesn't load, check:

Ensure strategy="afterInteractive" is set
Check browser console for errors
Verify data-website-id is set correctly

Route Changes Not Tracked

TwoBucks automatically tracks Next.js navigation. If routes aren't tracked:

Ensure script is loaded before navigation occurs
Check that you're using next/link or router.push() (not window.location)

TypeScript Errors

If you see TypeScript errors about data-website-id, add type definitions:

// types/twobucks.d.ts
declare module 'next/script' {
  interface ScriptProps {
    'data-website-id'?: string
    'data-api-url'?: string
  }
}