Install Simple Analytics with Next.js 
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 (
<React.Fragment>
<Component {...pageProps} />
<Script src="https://scripts.simpleanalyticscdn.com/latest.js" />
<noscript>
{/* eslint-disable @next/next/no-img-element */}
<img
src="https://queue.simpleanalyticscdn.com/noscript.gif"
alt=""
referrerPolicy="no-referrer-when-downgrade"
/>
</noscript>
</React.Fragment>
);
}
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);
};