How to use Panelbear with Next.js

Once you have added your website to Panelbear, all that is left to do is integrate our analytics snippet.

It's a small piece of code that runs on your website, and it collects the metrics necessary to show you the insights in the dashboard.

Steps

Installing the analytics script on your Next.js based website is super simple.

We're going to be using the Panelbear client library to build a simple React hook that will track navigation changes for a NextJS website.

Simply install the library in your project:

npm install @panelbear/panelbear-js

# Or with yarn:
yarn add @panelbear/panelbear-js

Now add the following React hook to your project:

// ./hooks/panelbear.js

import * as Panelbear from "@panelbear/panelbear-js";
import { useRouter } from "next/router";
import { useEffect } from "react";

export const usePanelbear = (site, config = {}) => {
  const router = useRouter();

  useEffect(() => {
    Panelbear.load(site, config);

    // Trigger initial page view
    Panelbear.trackPageview();

    // Add on route change handler for client-side navigation
    const handleRouteChange = () => Panelbear.trackPageview();
    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, []);
};

And now load the hook on your main App:

Don't forget to replace YOUR_SITE_ID with the Site ID you got from Panelbear.

// ./pages/_app.js

import { usePanelbear } from "./../hooks/panelbear";

function CustomApp({ Component, pageProps }) {
  // Load Panelbear only once during the app lifecycle
  usePanelbear("YOUR_SITE_ID", {
    // Uncomment to allow sending events on localhost, and log to console too.
    // debug: true
  });

  return <Component {...pageProps} />;
}

export default CustomApp;

That's all you need to add analytics to your NextJS project.

Serving the analytics script from your own domain

While the analytics script and API calls are handled by Panelbear's servers, you can point all requests to first pass through your own server.

Using Next.js it's super simple. You just need to configure rewrites in your next.config.js (this only works in Node mode, if you export your site as static-only, there's no server to perform the rewrites):

module.exports = {
  async rewrites() {
    return [
      {
        source: '/bear.js',
        destination: 'https://cdn.panelbear.com/analytics.js',
      },
    ];
  },
};

Then when loading the Panelbear script:

Panelbear.load('YOUR_SITE_ID', { scriptSrc: '/bear.js' });

You can also rewrite API calls, but the reported Country and User Agent will be your server's. Just set the analyticsHost: '/_panelbear' option when loading Panelbear on your website, and add the following rewrite rule to your next.config.js rewrites list:

{
  source: '/_panelbear/:path*',
  destination: 'https://api.panelbear.com/:path*',
}

Check your installation

After you have added our analytics script to the HTML of your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

If you need help, you can reach out to us at [email protected].

Tip: Check out our local development guide for some tips and tricks when testing Panelbear on your machine.

Get simple, privacy-focused analytics

Get startedarrow_forward