Merge pull request #116 from tatsutakein/feature/#113

👍 型安全に環境変数を扱うよう変更

apps/frontend/next.config.mjs

@@ -0,0 +1,14 @@
+// Importing env files here to validate on build
+import './src/env.mjs';
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  /** Enables hot reloading for local packages without a build step */
+  transpilePackages: [],
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+};
+
+export default config;

apps/frontend/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@tailwindcss/line-clamp": "0.4.4",
+    "@t3-oss/env-nextjs": "^0.6.0",
     "@types/react-syntax-highlighter": "15.5.7",
     "@vercel/analytics": "^1.0.1",
     "clsx": "1.2.1",
@@ -39,7 +40,8 @@
     "react-hook-form": "7.45.1",
     "react-markdown": "8.0.7",
     "react-syntax-highlighter": "15.5.0",
-    "recoil": "0.7.7"
+    "recoil": "0.7.7",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "7.22.5",

apps/frontend/src/components/Utils/GoogleAnalytics.tsx

@@ -3,14 +3,14 @@
 import { usePathname, useSearchParams } from 'next/navigation';
 import Script from 'next/script';
 import { useEffect } from 'react';
-import { GA_TRACKING_ID, pageView } from '@/lib';
+import { pageView } from '@/lib';
+import { env } from '@/env.mjs';
 
 const GoogleAnalytics: React.FC = () => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
-    if (!GA_TRACKING_ID) return;
     const url = pathname + searchParams.toString();
     pageView(url);
   }, [pathname, searchParams]);
@@ -19,7 +19,7 @@ const GoogleAnalytics: React.FC = () => {
     <>
       <Script
         strategy='lazyOnload'
-        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+        src={`https://www.googletagmanager.com/gtag/js?id=${env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
       />
       <Script
         id='gtag-init'
@@ -29,7 +29,7 @@ const GoogleAnalytics: React.FC = () => {
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
-          gtag('config', '${GA_TRACKING_ID}', {
+          gtag('config', '${env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {
             page_path: window.location.pathname,
           });
         `}

apps/frontend/src/env.mjs

@@ -0,0 +1,27 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app isn't
+   * built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z.string().min(1),
+  },
+  /**
+   * Specify your client-side environment variables schema here.
+   * For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.
+   */
+  client: {
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: z.string().min(1),
+  },
+  /**
+   * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
+  },
+  skipValidation: !!process.env.CI || !!process.env.SKIP_ENV_VALIDATION,
+});

apps/frontend/src/lib/analytics/gtag.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { GA_TRACKING_ID } from '@/lib';
+import { env } from '@/env.mjs';
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 export const pageView = (url: string) => {
-  if (!GA_TRACKING_ID) return;
-  window.gtag('config', GA_TRACKING_ID, {
+  window.gtag('config', env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, {
     page_path: url,
   });
 };

apps/frontend/src/lib/index.ts

@@ -1,2 +1 @@
 export * from './analytics';
-export * from './constants';