How to add Google Analytics?

The following piece of code adds pageview tracking functionality to the custom Next.js App in /pages/_app.tsx, but you can use it only in specific pages if you want.

// /pages/_app.tsx
import { useRouter } from "next/router";
import { useEffect } from "react";
import Script from "next/script";

// Step 0:
// Add your Google tag ID to your local .env.local file, e.g. under GA_TRACKING_ID

// Step 1: create the following pageview function
const pageview = ({
    url,
    analyticsID,
}: {
    url: string;
    analyticsID: string;
}) => {
    if (typeof window.gtag !== undefined) {
        window.gtag("config", analyticsID, {
            page_path: url,
        });
    }
};

export default function MyApp({ Component, pageProps }) {
	const router = useRouter();

    // ... your code

    // Step 3: Add the following useEffect to trigger pageview on each route change
    useEffect(() => {
        const handleRouteChange = (url) => {
            pageview(url, GA_TRACKING_ID);
        };
        router.events.on("routeChangeComplete", handleRouteChange);
        return () => {
            router.events.off("routeChangeComplete", handleRouteChange);
        };
    }, [router.events]);

    return (
		{/* Step 4: Install Google Analytics tag */}
        <>
            <Script
                strategy="afterInteractive"
                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            />
            <Script
                id="gtag-init"
                strategy="afterInteractive"
                dangerouslySetInnerHTML={{
                    __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_TRACKING_ID}', {
                page_path: window.location.pathname,
              });
            `,
                }}
            />
            <Component {...pageProps} />
        </>
    );
};