infisical/frontend/pages/_app.js

import "../styles/globals.css";
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
import Layout from "../components/basic/layout";
import RouteGuard from "../components/RouteGuard";
import { publicPaths } from "../const.js";
import { useEffect } from "react";
import { useRouter } from "next/router";
import { initPostHog } from "../components/analytics/posthog";
import { ENV } from "../components/utilities/config";

config.autoAddCss = false;

const App = ({ Component, pageProps, ...appProps }) => {
	const router = useRouter();
	const posthog = initPostHog();

	useEffect(() => {
		// Init for auto capturing
		const posthog = initPostHog();

		const handleRouteChange = () => {
			if (typeof window !== "undefined") {
				if (ENV == "production") {
					posthog.capture("$pageview");
				}
			}
		};

		router.events.on("routeChangeComplete", handleRouteChange);

		return () => {
			router.events.off("routeChangeComplete", handleRouteChange);
		};
	}, [router.events]);

	// If it's one of these routes, don't add the layout (e.g., these routes are external)
	if (
		publicPaths.includes("/" + appProps.router.pathname.split("/")[1]) ||
		!Component.requireAuth
	) {
		return (
			<Component {...pageProps} />
		)
	}

	return (
		<RouteGuard>
			<Layout>
				<Component {...pageProps} />
			</Layout>
		</RouteGuard>
	);
};

export default App;

{
	/* <Script
src="https://www.googletagmanager.com/gtag/js?id=G-DQ1XLJJGG1"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
    window.dataLayer = window.dataLayer || [];
    function gtag(){window.dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-DQ1XLJJGG1');
  `}
</Script> */
}