Never Punch Manticores

    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    Next-Plausible · npm version

    Simple integration for analytics and

    See this commit for a real world example.

    Important: If you're using a version of next lower than 11.1.0 please use next-plausible@2 to avoid type checking errors (see


    Include the Analytics Script

    To enable Plausible analytics in your Next.js app you'll need to expose the Plausible context, <PlausibleProvider />, at the top level of your application inside _app.js:

    // pages/_app.js
    import PlausibleProvider from 'next-plausible'
    export default function MyApp({ Component, pageProps }) {
      return (
        <PlausibleProvider domain="">
          <Component {...pageProps} />

    If you want to enable Plausible analytics only on a single page you can wrap the page in a PlausibleProvider component:

    // pages/home.js
    import PlausibleProvider from 'next-plausible'
    export default Home() {
      return (
        <PlausibleProvider domain="">
          <h1>My Site</h1>
          {/* ... */}

    PlausibleProvider Props

    Name Description
    domain The domain of the site you want to monitor.
    customDomain Set this if you use a custom domain to serve the analytics script. Defaults to See for more details.
    trackOutboundLinks Set this to true if you want to enable outbound link click tracking.
    trackLocalhost Set this to true if you want to enable localhost tracking as described here.
    manualPageviews Set this to true if you want to disable automatic pageview events as described here.
    exclude Set this if you want to exclude a set of pages from being tracked. See for more details.
    selfHosted Set this to true if you are self hosting your Plausible instance. Otherwise you will get a 404 when requesting the script.
    enabled Use this to explicitly decide whether or not to render script. If not passed the script will be rendered when process.env.NODE_ENV === 'production'.
    integrity Optionally define the subresource integrity attribute for extra security.
    scriptProps Optionally override any of the props passed to the script element. See example.

    Proxy the Analytics Script

    To avoid being blocked by adblockers plausible recommends proxying the script. To do this you need to wrap your next.config.js with the withPlausibleProxy function:

    const { withPlausibleProxy } = require('next-plausible')
    module.exports = withPlausibleProxy()({
      // ...your next js config, if any

    This will set up the necessary rewrites as described here and configure PlausibleProvider to use the local URLs so you can keep using it like this:

      <PlausibleProvider domain="">

    Note: This will only work if you serve your site using next start. Statically generated sites won't be able to rewrite the requests.

    Optionally you can overwrite the proxied script subdirectory and name, as well as the custom domain for the original script:

    const { withPlausibleProxy } = require('next-plausible')
    module.exports = withPlausibleProxy({
      subdirectory: 'yoursubdirectory',
      scriptName: 'scriptName',
      customDomain: '',
      // ...your next js config, if any

    This will load the script from /js/yoursubdirectory/scriptName.js and fetch it from

    Send Custom Events

    Plausible supports custom events as described at This package provides the usePlausible hook to safely access the plausible function like this:

    import { usePlausible } from 'next-plausible'
    export default function PlausibleButton() {
      const plausible = usePlausible()
      return (
          <button onClick={() => plausible('customEventName')}>Send</button>
            onClick={() =>
              plausible('customEventName', {
                props: {
                  buttonId: 'foo',
            Send with props

    If you use Typescript you can type check your custom events like this:

    import { usePlausible } from 'next-plausible'
    type MyEvents = {
      event1: { prop1: string }
      event2: { prop2: string }
      event3: never
    const plausible = usePlausible<MyEvents>()

    Only those events with the right props will be allowed to be sent using the plausible function.


    • yarn build will generate the production scripts under the dist folder.


    npm i next-plausible

    DownloadsWeekly Downloads






    Unpacked Size

    47.9 kB

    Total Files


    Last publish


    • 4lejandrito