components/analytics/Umami.js

@@ -0,0 +1,18 @@
+import Script from 'next/script'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const UmamiScript = () => {
+  return (
+    <>
+      <Script
+        async
+        defer
+        data-website-id={siteMetadata.analytics.umamiWebsiteId}
+        src="https://umami.example.com/umami.js" // Replace with your umami instance
+      />
+    </>
+  )
+}
+
+export default UmamiScript

components/analytics/index.js

@@ -1,6 +1,7 @@
 import GA from './GoogleAnalytics'
 import Plausible from './Plausible'
 import SimpleAnalytics from './SimpleAnalytics'
+import Umami from './Umami'
 import siteMetadata from '@/data/siteMetadata'
 
 const isProduction = process.env.NODE_ENV === 'production'
@@ -10,6 +11,7 @@ const Analytics = () => {
     <>
       {isProduction && siteMetadata.analytics.plausibleDataDomain && <Plausible />}
       {isProduction && siteMetadata.analytics.simpleAnalytics && <SimpleAnalytics />}
+      {isProduction && siteMetadata.analytics.umamiWebsiteId && <Umami />}
       {isProduction && siteMetadata.analytics.googleAnalyticsId && <GA />}
     </>
   )

data/siteMetadata.js

@@ -18,9 +18,10 @@ const siteMetadata = {
   linkedin: 'https://www.linkedin.com',
   locale: 'en-US',
   analytics: {
-    // supports plausible, simpleAnalytics or googleAnalytics
+    // supports plausible, simpleAnalytics, umami or googleAnalytics
     plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
     simpleAnalytics: false, // true or false
+    umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
   newsletter: {