How to Publish Events In NextJs To Self Hosted Plausible Instance

Updated at November 2023

I started to self-host a plausible instance and needed to publish events to it.

With the following setup I was able to do so in NextJS 14.

First run yarn add next-plausible

Then you need a component like this around your layout:

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use client";
import {ReactNode} from "react";
import PlausibleProvider from "next-plausible";

interface Props {
    children: ReactNode;
}

export function Providers({children}: Props) {
    return (
        <PlausibleProvider domain={'<your-app-domain.com>'} customDomain={'https://<your-plausible-domain.com>'}>
            {children}
        </PlausibleProvider>
    );
}