Install Simple Analytics with Next.js edit

Download PDF

Next.js has a lovely Script component.

In your app, you can add this Script component:

// _app.tsx
import type { AppProps } from "next/app";
import React from "react";
import Script from "next/script";

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <Component {...pageProps} />
      <Script src="" />
        {/* eslint-disable @next/next/no-img-element */}

export default MyApp;

It will use the afterInteractive strategy to load the script. From the docs:

For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.

Send events with JavaSript

export const saEvent = (eventName) => {
  if (window && window.sa_event) return window.sa_event(eventName);

Send events with TypeScript

declare function sa_event(eventName: string);

export const saEvent = (eventName: string) => {
  if (window && window.sa_event) return window.sa_event(eventName);