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>
)
}