Include Google Analytics via Next.js instead of Netlify snippet

Following the steps at https://nextjs.org/docs/app/guides/third-party-libraries#google-analytics

Signed-off-by: Julius Volz <julius.volz@gmail.com>

package-lock.json

@@ -12,6 +12,7 @@
         "@mantine/core": "^8.0.2",
         "@mantine/hooks": "^8.0.2",
         "@mantine/spotlight": "^8.0.2",
+        "@next/third-parties": "^15.3.2",
         "@tabler/icons-react": "^3.31.0",
         "@types/semver": "^7.7.0",
         "dayjs": "^1.11.13",
@@ -1399,6 +1400,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "15.3.2",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-15.3.2.tgz",
+      "integrity": "sha512-zE9xYkMKZ6gLbkP6lWt60yaeKB5r0A4eZhFKAhgik/eO+zzZPFkTy5K7+0ykgfB6MTkcend3BaDXZhz9KnDjYw==",
+      "license": "MIT",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -9014,6 +9028,12 @@
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==",
+      "license": "ISC"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",

package.json

@@ -19,6 +19,7 @@
     "@mantine/core": "^8.0.2",
     "@mantine/hooks": "^8.0.2",
     "@mantine/spotlight": "^8.0.2",
+    "@next/third-parties": "^15.3.2",
     "@tabler/icons-react": "^3.31.0",
     "@types/semver": "^7.7.0",
     "dayjs": "^1.11.13",

src/app/layout.tsx

@@ -1,4 +1,4 @@
-// import type { Metadata } from "next";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { Inter } from "next/font/google";
 import { Lato } from "next/font/google";
 import {
@@ -99,6 +99,11 @@ export default function RootLayout({
           </AppShell>
         </MantineProvider>
       </body>
+      {/* The Google Analytics ID is not secret, but we want to keep it in an environment variable so that
+          people who clone and host this repo somewhere else don't accidentally pollute our GA4 stats */}
+      {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
+      )}
     </html>
   );
 }