From 321f4569f7a73d9fd9b9a7aed2c3d86b796131e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=9C=EC=A7=84?= <1106laura@naver.com>
Date: Fri, 1 Mar 2024 23:50:05 +0900
Subject: [PATCH] fix: fix incompatibility of amplitude and ssr (#361)

---
 src/pages/_app.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 159cf956..d852813a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { Global } from '@emotion/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import SEO from '@src/components/common/SEO';
@@ -28,12 +28,19 @@ export const queryClient = new QueryClient({
 });
 
 amplitude.add(pageViewTrackingEnrichment());
-amplitude.init(AMPLITUDE_API_KEY, {
-  logLevel: amplitude.Types.LogLevel.Warn,
-  defaultTracking: true,
-});
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const [isAmplitudeInitialized, setIsAmplitudeInitialized] = useState(false);
+  useEffect(() => {
+    if (!isAmplitudeInitialized) {
+      amplitude.init(AMPLITUDE_API_KEY, {
+        logLevel: amplitude.Types.LogLevel.Warn,
+        defaultTracking: true,
+      });
+      setIsAmplitudeInitialized(true);
+    }
+  }, [isAmplitudeInitialized]);
+
   const router = useRouter();
   useEffect(() => {
     router.events.on('routeChangeComplete', gtm.pageview);