Added vercel analytics

package.json

@@ -35,6 +35,7 @@
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@upstash/qstash": "^2.1.2",
+    "@vercel/analytics": "^1.0.2",
     "axios": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

src/pages/_app.tsx

@@ -1,10 +1,10 @@
+import React from 'react'
 import type { AppProps } from 'next/app'
-import Script from 'next/script'
 import { ClerkProvider } from '@clerk/nextjs'
 import { ThemeProvider } from '@/components/theme-provider'
 import { dark } from '@clerk/themes'
-import React from 'react'
 import { Inter } from 'next/font/google'
+import { Analytics } from '@vercel/analytics/react';
 import { Toaster } from '../components/ui/toaster'
 import { TooltipProvider } from '../components/ui/tooltip'
 import '@/styles/globals.css'
@@ -17,21 +17,6 @@ const inter = Inter({
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
-      <Script
-        strategy="lazyOnload"
-        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
-      />
-
-      <Script id="analytics" strategy="lazyOnload">
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
-          page_path: window.location.pathname,
-          });
-        `}
-      </Script>
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
         <ClerkProvider
           publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
@@ -53,6 +38,7 @@ export default function App({ Component, pageProps }: AppProps) {
             <div className={`${inter.className}`}>
               <Component {...pageProps} />
               <Toaster />
+              <Analytics />
             </div>
           </TooltipProvider>
         </ClerkProvider>