feat: 環境変数にGA_IDを追加し、Google Analyticsをレイアウトに統合

Author: bmthd

.env.example

@@ -1,2 +1,3 @@
 GMAIL_ADDRESS="[email protected]"
-GMAIL_PASSWORD="fixme"
+GMAIL_PASSWORD="fixme"
+NEXT_PUBLIC_GA_ID="UA-XXXXXXXXX-X"

bun.lock

@@ -6,7 +6,9 @@
       "dependencies": {
         "@conform-to/react": "^1.6.1",
         "@conform-to/valibot": "^1.6.1",
+        "@next/third-parties": "^15.3.3",
         "@valibot/i18n": "^1.0.0",
+        "@vercel/analytics": "^1.5.0",
         "@yamada-ui/lucide": "^1.10.5",
         "@yamada-ui/markdown": "^1.1.3",
         "@yamada-ui/react": "^1.7.6",
@@ -235,6 +237,8 @@
 
     "@next/swc-win32-x64-msvc": ["@next/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-6xomMuu54FAFxttYr5PJbEfu96godcxBTRk1OhAvJq0/EnmFU/Ybiax30Snis4vdWZ9LGpf7Roy5fSs7v/5ROQ=="],
 
+    "@next/third-parties": ["@next/[email protected]", "", { "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" } }, "sha512-kwhDkK/3klTvW6SuNkmIMSqzEk9Rnc7PkpGeAi3x0mcbPJhFTwdC/qTEd/HZt53J2yFv73YohOBk6dUG3TEIkQ=="],
+
     "@pkgjs/parseargs": ["@pkgjs/[email protected]", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
     "@popperjs/core": ["@popperjs/[email protected]", "", {}, "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="],
@@ -279,6 +283,8 @@
 
     "@valibot/i18n": ["@valibot/[email protected]", "", { "peerDependencies": { "valibot": "^1.0.0" } }, "sha512-daCwLqQOHAbUAWtWm1zE2JV6Gn3lqS3Qw/Rm4s+FGbwyfrk3ljee2eiZBVACFet3oanB2TZpZeLssppH3YxfiQ=="],
 
+    "@vercel/analytics": ["@vercel/[email protected]", "", { "peerDependencies": { "@remix-run/react": "^2", "@sveltejs/kit": "^1 || ^2", "next": ">= 13", "react": "^18 || ^19 || ^19.0.0-rc", "svelte": ">= 4", "vue": "^3", "vue-router": "^4" }, "optionalPeers": ["@remix-run/react", "@sveltejs/kit", "next", "react", "svelte", "vue", "vue-router"] }, "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g=="],
+
     "@yamada-ui/accordion": ["@yamada-ui/[email protected]", "", { "dependencies": { "@yamada-ui/core": "1.17.3", "@yamada-ui/icon": "1.1.21", "@yamada-ui/motion": "2.3.3", "@yamada-ui/transitions": "1.1.19", "@yamada-ui/use-controllable-state": "1.0.29", "@yamada-ui/use-descendant": "1.0.31", "@yamada-ui/utils": "1.7.2" }, "peerDependencies": { "react": ">=18" } }, "sha512-aX5iwtAWLEE31mnJxxCc+ntRbWaOGbgPXYZ5wAUfijylQylQVsSZJ9zL4hm7pBxjlQZ3/gEqOoG1ts9QF55uyg=="],
 
     "@yamada-ui/alert": ["@yamada-ui/[email protected]", "", { "dependencies": { "@yamada-ui/core": "1.17.3", "@yamada-ui/icon": "1.1.21", "@yamada-ui/loading": "1.1.32", "@yamada-ui/utils": "1.7.2" }, "peerDependencies": { "react": ">=18" } }, "sha512-PHxXLZwXn5SopOpzsEjLx9ZDau5De37TDm/dQ+IYfU9D0TgfwSB4yirlZChJm9+kGGby7+U+dvqhtOJnyQkEfA=="],
@@ -971,6 +977,8 @@
 
     "tar": ["[email protected]", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.0.1", "mkdirp": "^3.0.1", "yallist": "^5.0.0" } }, "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw=="],
 
+    "third-party-capital": ["[email protected]", "", {}, "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA=="],
+
     "toggle-selection": ["[email protected]", "", {}, "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="],
 
     "tr46": ["[email protected]", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],

package.json

@@ -27,7 +27,9 @@
   "dependencies": {
     "@conform-to/react": "^1.6.1",
     "@conform-to/valibot": "^1.6.1",
+    "@next/third-parties": "^15.3.3",
     "@valibot/i18n": "^1.0.0",
+    "@vercel/analytics": "^1.5.0",
     "@yamada-ui/lucide": "^1.10.5",
     "@yamada-ui/markdown": "^1.1.3",
     "@yamada-ui/react": "^1.7.6",

src/utils/env/index.ts

@@ -14,11 +14,13 @@ export const env = createEnv({
     },
     shared: {
       NODE_ENV: v.union([v.literal("development"), v.literal("production"), v.literal("test")]),
+      GA_ID: v.string(),
     },
   },
   values: {
     NODE_ENV: process.env.NODE_ENV,
     GMAIL_ADDRESS: process.env.GMAIL_ADDRESS,
     GMAIL_PASSWORD: process.env.GMAIL_PASSWORD,
+    GA_ID: process.env.NEXT_PUBLIC_GA_ID,
   },
 });

src/views/layout/index.tsx

@@ -1,4 +1,7 @@
 import { configureValidationSettings } from "@/lib/validation";
+import { env } from "@/utils/env";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { Analytics } from "@vercel/analytics/next";
 import { Container, Separator } from "@yamada-ui/react";
 import { FC, ReactNode } from "react";
 import { Header } from "./header";
@@ -9,6 +12,8 @@ export const LayoutPage: FC<{ children: ReactNode }> = ({ children }) => {
   configureValidationSettings();
   return (
     <Providers>
+      <Analytics />
+      <GoogleAnalytics gaId={env.GA_ID} />
       <Header />
       <Separator />
       <Navigation />