Add optional Google Analytics 4

.env.example

@@ -0,0 +1,4 @@
+# Google Analytics 4 Measurement ID. Leave empty to disable GA.
+# Local dev: copy this file to `.env.local` and fill in your ID.
+# Production: set as a GitHub Actions repository variable named NEXT_PUBLIC_GA_ID.
+NEXT_PUBLIC_GA_ID=

.github/workflows/deploy.yml

@@ -41,6 +41,8 @@ jobs:
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm build
+        env:
+          NEXT_PUBLIC_GA_ID: ${{ vars.NEXT_PUBLIC_GA_ID }}
       - uses: actions/upload-pages-artifact@v3
         with:
           path: out

app/layout.tsx

@@ -1,7 +1,12 @@
 import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import "./globals.css";
 
+// Set NEXT_PUBLIC_GA_ID (e.g. "G-XXXXXXXXXX") to enable Google Analytics.
+// When unset (local dev, PR previews), GA is not loaded.
+const gaId = process.env.NEXT_PUBLIC_GA_ID;
+
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const jetbrains = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains" });
 
@@ -28,6 +33,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <script dangerouslySetInnerHTML={{ __html: noFlash }} />
       </head>
       <body className="font-sans antialiased">{children}</body>
+      {gaId ? <GoogleAnalytics gaId={gaId} /> : null}
     </html>
   );
 }

package.json

@@ -17,6 +17,7 @@
   "author": "An-Ting Hsu",
   "license": "MIT",
   "dependencies": {
+    "@next/third-parties": "15",
     "next": "15",
     "react": "19",
     "react-dom": "19"