↳ 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:

    import { withPlausibleProxy } from 'next-plausible';
const nextConfig={
    ...
}
export default withPlausibleProxy()(nextConfig);

  • Add <PlausibleProvider> to app/layout.tsx

    import PlausibleProvider from "next-plausible";

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return <html lang="en">
        <body>
            <PlausibleProvider domain="chineseisfun.com" />
            {children}
        </body>
    </html>;
}
  • Add the website to your dashboard on plausible.io