↳ See other learning resources

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);
  1. 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>;
}
  1. Add the website to your dashboard on plausible.io