Next.js

how to implement the worlds fastest, easiest and cheapest analytics in your next.js project (or as a replacement for vercel analytics)

if you get stuck or not feeling confident, i will personally help you integrate it :) book a time on my calendly

install the package

npm install rustalytics

set the NEXT_PUBLIC_RUSTALYTICS_API_KEY environment variable inside your .env file

NEXT_PUBLIC_RUSTALYTICS_API_KEY=your-api-key  # client side api keys must start with NEXT_PUBLIC_

automatic page view tracking

import and use the Analytics component inside your layout.tsx file

import { Analytics } from 'rustalytics';

export default function Home() {
  return (
    <Analytics />
  );
}

custom events

custom events on ANY html elements

after importing the Analytics component and using it in your layout.tsx file, you can add custom events on ANY html elements by adding a data-rustalytics attribute. The value should be the event name you want to track, for example: "clicked-checkout" or if you are a/b testing you can add the variation: "clicked-checkout-variation-a"

export default function Home() {
  return (
    <a
      data-rustalytics="clicked-checkout-variation-a"
      href="..."
    >calendly</a>
  );
}