Next.js

Name: Rybbit
Author: Rybbit

Next.js is a popular React framework that enables features like server-side rendering and static site generation. This guide explains how to integrate Rybbit with your Next.js application.

How to Add Rybbit to Next.js

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your site ID. You’ll need this for the data-site-id attribute.

2. Install the Script Using Next.js Script Component

Next.js provides a built-in Script component that handles script loading efficiently. This is the recommended approach.

3. Add to Your Layout File

Create or modify your layout file depending on your Next.js version:

For App Router (Next.js 13+):


// app/layout.js
import Script from "next/script"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <Script
          src="https://app.rybbit.io/api/script.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

For Pages Router:


// pages/_app.js
import Script from "next/script"
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.rybbit.io/api/script.js"
        data-site-id="YOUR_SITE_ID"
        strategy="afterInteractive"
      />
    </>
  )
}
 
export default MyApp

(optional) 4. Rewrite the script serving to bypass ad blockers

While Rybbit is not using any cookied based tracking and is fully compliant with GDPR, CCPA, and other privacy regulations, some ad blockers may still agressively block it no matter how the tracking is implemented or operated.

With Next.js’s rewrites feature, you can rewrite the script serving to reduce the chance of being blocked by ad blockers.


# .env
 
# use this value if you are self-hosting Rybbit
NEXT_PUBLIC_RYBBIT_HOST=https://your-hosted-rybbit-instance.com
 
# use this value if you are using the Rybbit hosted tracking
NEXT_PUBLIC_RYBBIT_HOST=https://app.rybbit.io


// next.config.js
module.exports = {
  // ... other configurations
  async rewrites() {
    return [
      {
        source: "/api/script.js",
        destination: `${process.env.NEXT_PUBLIC_RYBBIT_HOST}/api/script.js`,
      },
      {
        source: "/api/track",
        destination: `${process.env.NEXT_PUBLIC_RYBBIT_HOST}/api/track`,
      },
    ]
  },
}

and where you are using the script:


// app/layout.js or pages/_app.js
<Script
  src="/api/script.js"
  data-site-id="YOUR_SITE_ID"
  strategy="afterInteractive"
/>

Note that this rewrite will consume the bandwidth of your server, as all tracking requests will be proxied through your Next.js application. Consider this when evaluating your hosting costs and server capacity requirements.

Page View Tracking in Next.js: Rybbit’s tracking script is designed to automatically detect route changes when using Next.js’s <Link> component or router.push() and track them as page views. If you encounter a rare scenario where page views are not being tracked correctly after client-side navigation, you might need to manually trigger page views using window.rybbit.trackPageview(). However, test the default behavior first, as manual tracking is typically not necessary.

Custom Event Tracking

Once the Rybbit script is loaded via the Next.js Script component, you can track custom events from any of your React components within your Next.js application.


// Example in a Next.js component
// components/MyButton.js
'use client'; // If using App Router and this component has interactivity
 
// Declare rybbit on window for TypeScript if you're using it
// declare global {
//   interface Window {
//     rybbit?: {
//       trackEvent: (eventName: string, eventData?: Record<string, any>) => void;
//       trackPageview: () => void;
//       // Add other methods if you use them
//     };
//   }
// }
 
export default function MyButton({ title }) {
  const handleClick = () => {
    if (typeof window !== 'undefined' && window.rybbit && typeof window.rybbit.trackEvent === 'function') {
      window.rybbit.trackEvent('button_click', { buttonTitle: title });
    } else {
      console.warn('Rybbit tracking not available.');
    }
  };
 
  return <button onClick={handleClick}>{title || 'Click Me'}</button>;
}

Always ensure window.rybbit and its methods are available before calling them, especially since the script loading is managed by Next.js’s strategy. Consider the script’s loading strategy (afterInteractive in the examples) when deciding where and how early you can reliably call these tracking functions.