Externalize analytics into custom hook

src/hooks/useAnalytics.ts

@@ -0,0 +1,17 @@
+import { init } from "@socialgouv/matomo-next";
+import { useEffect, useRef } from "react";
+
+const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL as string;
+const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID as string;
+
+export function useAnalytics() {
+	const matomoInitialized = useRef(false);
+	useEffect(() => {
+		if (MATOMO_URL && MATOMO_SITE_ID && matomoInitialized.current === false) {
+			init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
+		}
+		return () => {
+			matomoInitialized.current = true;
+		};
+	}, []);
+}

src/pages/_app.tsx

@@ -1,27 +1,15 @@
-import { init } from "@socialgouv/matomo-next";
 import { NextIntlClientProvider } from "next-intl";
 import type { AppProps } from "next/app";
-import { useEffect, useRef } from "react";
 import "react-tooltip/dist/react-tooltip.css";
 import GlobalStyles from "../components/GlobalStyles";
-
-const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL as string;
-const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID as string;
+import { useAnalytics } from "../hooks/useAnalytics";
 
 type CustomPageProps = {
 	messages: IntlMessages;
 };
 
 export default function App({ Component, pageProps }: AppProps<CustomPageProps>) {
-	const matomoInitialized = useRef(false);
-	useEffect(() => {
-		if (MATOMO_URL && MATOMO_SITE_ID && matomoInitialized.current === false) {
-			init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
-		}
-		return () => {
-			matomoInitialized.current = true;
-		};
-	}, []);
+	useAnalytics();
 	return (
 		<NextIntlClientProvider messages={pageProps.messages}>
 			<GlobalStyles />