chore: add google analytics

package.json

@@ -73,6 +73,7 @@
     "@lobehub/icons": "^1.34.0",
     "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.151.0",
+    "@next/third-parties": "^14.2.15",
     "@pixiv/three-vrm": "2.1.2",
     "@pixiv/three-vrm-core": "2.1.2",
     "@react-spring/web": "^9.7.4",

src/app/chat/ChatInfo/index.tsx

@@ -11,15 +11,14 @@ import { Flexbox } from 'react-layout-kit';
 import { CHAT_HEADER_HEIGHT, CHAT_INFO_MAX_WIDTH, CHAT_INFO_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
-import BackGround from './BackGroundList';
-// import ChatList from './ChatList';
-import DanceList from './DanceList';
-import MotionList from './MotionList';
-import PostureList from './PostureList';
-import StageList from './StageList';
 import { Tab } from './type';
 
+const BackGround = dynamic(() => import('./BackGroundList'), { ssr: false });
+const DanceList = dynamic(() => import('./DanceList'), { ssr: false });
+const MotionList = dynamic(() => import('./MotionList'), { ssr: false });
 const ChatList = dynamic(() => import('./ChatList'), { ssr: false });
+const PostureList = dynamic(() => import('./PostureList'), { ssr: false });
+const StageList = dynamic(() => import('./StageList'), { ssr: false });
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`

src/app/layout.tsx

@@ -1,6 +1,6 @@
-import { Analytics } from '@vercel/analytics/react';
 import { PropsWithChildren } from 'react';
 
+import Analytics from '@/components/Analytics';
 import NProgress from '@/components/NProgress';
 import Layout from '@/layout';
 

src/components/Analytics/Google.tsx

@@ -0,0 +1,5 @@
+import { GoogleAnalytics as GA } from '@next/third-parties/google';
+
+const GoogleAnalytics = () => <GA gaId={process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+
+export default GoogleAnalytics;

src/components/Analytics/Goolge.tsx

@@ -0,0 +1,5 @@
+import { GoogleAnalytics as GA } from '@next/third-parties/google';
+
+const GoogleAnalytics = () => <GA gaId={process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+
+export default GoogleAnalytics;

src/components/Analytics/Vercel.tsx

@@ -0,0 +1,5 @@
+import { Analytics } from '@vercel/analytics/react';
+
+const VercelAnalytics = () => <Analytics />;
+
+export default VercelAnalytics;

src/components/Analytics/index.tsx

@@ -0,0 +1,13 @@
+import Google from './Goolge';
+import Vercel from './Vercel';
+
+const Analytics = () => {
+  return (
+    <>
+      {<Vercel />}
+      {<Google />}
+    </>
+  );
+};
+
+export default Analytics;