Next.js Analytics

Integrating Proxima Analytics with Next.js is a straightforward process, similar to integrating it with React. By using the Proxima Analytics Client, you can seamlessly integrate the Proxima tracking code into your application without the need for manual injection.

Getting Started

To get started, install the Proxima Client:

npm install @prxm/client

When the library is installed, you can proceed to create a React component that will allow you to easily integrate the Proxima tracking code into your application.

import { useEffect } from "react";
import * as client from "@prxm/client";

const Proxima = () => {
  useEffect(() => {
    client.init({
      site: "YOUR_WEBSITE_IDENTIFIER",
    });
  }, []);

  return null;
};

export default Proxima;

Then you can import the component into your application and place it your `_document.js` file.

pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Proxima from '../components/Proxima';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <Proxima />
        <NextScript />
      </body>
    </Html>
  )
}

Using the Next.js Script Component

Alternatively, you can use the Next.js Script Component to inject the Proxima tracking code into your application.

This approach also works really well with the Next.js App Router as it allows you to inject the tracking code without downloading our client library.

pages/index.js
import Script from "next/script";
function Home() {
  return (
    <div className="container">
      <Script
        src="https://buzz.proxima.so/script.js"
        data-site="XXXXXX"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.Proxima has been populated`)
        }
      />
    </div>
  )
}
 
export default Home
On this page
Next.js Analytics
Quick Links