Adding Google analytics

.env.example

@@ -1,2 +1,4 @@
 # SQUID
 NEXT_SHIBUYA_GQL_ENDPOINT="http://18.118.77.170:4350/graphql"
+
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-ID"

package.json

@@ -24,6 +24,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",
     "@mui/material": "^5.13.5",
+    "@next/third-parties": "^14.1.2",
     "@polkadot/api": "^10.8.1",
     "@polkadot/api-contract": "^10.8.1",
     "@polkadot/react-identicon": "^3.5.1",
@@ -35,7 +36,7 @@
     "dexie": "^3.2.4",
     "fs-extra": "^11.1.1",
     "graphql": "^16.8.0",
-    "next": "13.4.4",
+    "next": "^14.1.2",
     "nprogress": "^0.2.0",
     "pg": "^8.11.3",
     "react": "18.2.0",
@@ -68,7 +69,7 @@
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "eslint": "8.42.0",
-    "eslint-config-next": "13.4.4",
+    "eslint-config-next": "^14.1.2",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",

src/config/app.ts

@@ -5,3 +5,6 @@ export const IS_DEVELOPMENT =
 
 export const DOCS_URL =
   process.env.NEXT_PUBLIC_DOCS_URL || "https://docs.xsigners.io/";
+
+export const ANALYTICS_ID = (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ||
+  "") as string;

src/pages/_document.tsx

@@ -1,5 +1,8 @@
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { DocumentProps, Head, Html, Main, NextScript } from "next/document";
 
+import { ANALYTICS_ID } from "@/config/app";
+
 interface MyDocumentProps extends DocumentProps {
   emotionStyleTags: JSX.Element[];
 }
@@ -21,6 +24,7 @@ export default function Document({ emotionStyleTags }: MyDocumentProps) {
         <Main />
         <NextScript />
       </body>
+      {ANALYTICS_ID && <GoogleAnalytics gaId={ANALYTICS_ID} />}
     </Html>
   );
 }