How to Set up Plausible Analytics with Next.js

1. npm i next-plausible
2. To proxy the plausible scripts so ad blockers do not stop the collection, configure next.config.js like so:

const { withPlausibleProxy }=require('next-plausible');
const nextConfig={
    ...
};
module.exports=withPlausibleProxy()(nextConfig);

3. Add <PlausibleProvider> to _app.tsx:

import PlausibleProvider from 'next-plausible';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
    return <PlausibleProvider domain='joelgrayson.com' enabled>
        <Component {...pageProps} />
    </PlausibleProvider>;
}

4. Add the website to your dashboard on plausible.io