fix: swetrix in client-only

ndom91 · Jul 11, 2024 · bea2ae3 · bea2ae3
1 parent bf56993
commit bea2ae3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/src/components/analytics.jsx b/src/components/analytics.jsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as Swetrix from 'swetrix'
+import { Suspense } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+function SwetrixComponent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  if (window.location.host === 'briefkastenhq.com') {
+    Swetrix.init(process.env.NEXT_PUBLIC_SWETRIX_PROJECT, {
+      apiURL: process.env.NEXT_PUBLIC_SWETRIX_API_HOST,
+    })
+    let url = pathname
+    if (searchParams.toString() !== '') {
+      url += `?${searchParams.toString()}`
+    }
+    Swetrix.trackPageview(url)
+  }
+  return <div></div>
+}
+
+export default function Analytics() {
+  return (
+    <Suspense>
+      <SwetrixComponent />
+    </Suspense>
+  )
+}
diff --git a/src/components/meta.jsx b/src/components/meta.jsx
@@ -1,25 +1,7 @@
 import Head from 'next/head'
-import { usePathname, useSearchParams } from 'next/navigation'
-import * as Swetrix from 'swetrix'
+import Analytics from "./analytics"
 
 const Meta = () => {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  if (window.location.host === 'briefkastenhq.com') {
-    Swetrix.init(process.env.NEXT_PUBLIC_SWETRIX_PROJECT, {
-      apiURL: process.env.NEXT_PUBLIC_SWETRIX_API_HOST,
-    })
-    let url = pathname
-    if (searchParams.toString() !== '') {
-      url += `?${searchParams.toString()}`
-    }
-
-    if (typeof document !== 'undefined') {
-      Swetrix.trackPageview(url)
-    }
-  }
-
   return (
     <>
       <Head>
@@ -64,6 +46,7 @@ const Meta = () => {
         <meta name="twitter:image" content={''} />
         <meta name="darkreader-lock" />
         <title>Briefkasten</title>
+        <Analytics />
       </Head>
     </>
   )