↳ See other learning resources
How to Set up Plausible Analytics with Next.js
npm i next-plausible
- 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);
- 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>;
}
- Add the website to your dashboard on plausible.io