アナリティクスを見れるように変更を行なった

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_API_KEY=
+NEXT_PUBLIC_AUTH_DOMAIN=
+NEXT_PUBLIC_PROJECT_ID=
+NEXT_PUBLIC_STORAGE_BUCKET=
+NEXT_PUBLIC_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_APP_ID=
+NEXT_PUBLIC_MEASUREMENT_ID=

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/_component/Analytics.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { logEvent } from 'firebase/analytics';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import { analytics } from '../firebase';
+
+export default function Analytics() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!analytics) return;
+    logEvent(analytics, 'page_view', {
+      page_location: pathname,
+    });
+  }, [pathname]);
+
+  return <></>;
+}

app/firebase.ts

@@ -0,0 +1,20 @@
+// Import the functions you need from the SDKs you need
+import { getAnalytics } from 'firebase/analytics';
+import { initializeApp } from 'firebase/app';
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
+};
+
+const firebaseApp = initializeApp(firebaseConfig);
+const analytics = getAnalytics(firebaseApp);
+
+export { firebaseApp, analytics };

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import React from 'react';
 import './globals.css';
 import 'swiper/css/bundle';
+import Analytics from './_component/Analytics';
 import Footer from './_component/footer';
 import Header from './_component/header/header';
 import { getPages } from '@/components/loadFiles';
@@ -57,6 +58,7 @@ export default function RootLayout({ children }: Props) {
         <Header pages={pages} />
         {children}
         <Footer />
+        <Analytics />
       </body>
     </html>
   );

package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "firebase": "^10.11.0",
     "next": "14.0.2",
     "react": "^18",
     "react-dom": "^18",