Integrations: Next.js

Next.js is a react framework for the Web. It enables you to create full-stack web applications by
extending the latest React features.

Monitor your traffic

Integrating MetricsWave with Next.js is easy. You only need to add the Script using the next/script tag.

Something like this is enough.

import Script from "next/script";

export default function Home() {
  return (<>
    <Script defer
            event-uuid="00000000-0000-0000-0000-000000000000"
            src="https://tracker.metricswave.com/js/visits.js"></Script>

    {/* Rest of your page */}
  </>)
}

It's important that this script should be included on all the pages of your application, maybe you can use a layout or
extend the app from this component.

How to trigger events

To trigger events whenever you want you will need to
use the API.

You have multiple options to do this, but a simple one it's to create a function like the next and use it everywhere in
your application.

You only need to pass the trigger UUID and the parameters of your event.

export function triggerEvent(eventUuid: string, params: Object = {}) {
  if (!app.isProduction) {
    console.log(`[EventTracker] ${eventUuid}`, params)
    return
  }

  fetch(`https://metricswave.com/webhooks/${eventUuid}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
    },
    body: JSON.stringify(params),
  })
}

← Go back to Documentation