How to add the script to your NextJS site

You can add the script directly to your head via "next/head" or react-helmet. However there is a simpler way that also provides custom events functionality:

"Next-Plausible" built and maintained by 4lejandrito. It supports:

Serving the Plausible script#

import PlausibleProvider from 'next-plausible'

export default Home() {
    return (
        <PlausibleProvider domain="example.com">
            <h1>My Site</h1>
            ...
        </PlausibleProvider>
    )
}

Sending custom events#

import {usePlausible} from 'next-plausible'

export default PlausibleButton() {
    const plausible = usePlausible()
    return (
        <button onClick={() => plausible('customEventName')}>
            Send
        </button>
    )
}