next-goatcounter

next-goatcounter is a plugin that makes integrating GoatCounter Analytics into you NextJS project easy.
Pull Requests are very welcome.

Feel like supporting this free plugin?

Setup

First, install it:

npm install next-goatcounter

yarn add next-goatcounter

Now, in app/layout.js

import { GCScript } from "next-goatcounter";

and in return

    <body>
    <GCScript siteUrl={"https://site.goatcounter.com/count"} />
    {
        children
    }
    </body>

Note: GCScript supports scriptSrc parameter to specify self hosted count.js location

Usage

Display View Count

The package provides two components - ViewCount and TotalViews to show no. of views from Goat Counter.

    import { ViewCount, TotalViews } from 'next-goatcounter';

    <ViewCount /> // Displays non-unique views of current page
    <TotalViews /> // Displays non-unique views of the entire webstie

Both ViewCount and TotalViews have the fallback optional prop to display a fallback while content is loading. Read More

    import { ViewCount, TotalViews } from 'next-goatcounter';

    <ViewCount fallback={<>Loading...</>} />

ViewCount also has the optional path prop to change the path for which view count is displayed.

    import { ViewCount, TotalViews } from 'next-goatcounter';

    <ViewCount path="/posts/123" />

There is also a getViewCount() function that you can use for more customisation. Ensure that it is used in a client component only.

Custom Events

To send custom events to GoatCounter,

first

import { GCEvent } from "next-goatcounter";

then use GCEvent like this

GCEvent(path, title);