Fixing google analytics, adding some changes from prod

src/app/layout.tsx

@@ -5,18 +5,8 @@ import "./App.scss";
 import { Providers } from "./Providers";
 import Navbar from "@/widgets/Navbar/Navbar";
 import Footer from "@/widgets/Footer/Footer";
+import { GoogleAnalytics } from '@next/third-parties/google'
 
-const googleAnalyticsHtml = `
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-0BMJ2KN7F8"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-0BMJ2KN7F8');
-</script>
-`
 
 export default function RootLayout({
   children,
@@ -25,7 +15,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <head dangerouslySetInnerHTML={{ __html: googleAnalyticsHtml }} />
+      <head>
+</head>
       <body>
         <Providers>
           <Navbar />
@@ -33,6 +24,7 @@ export default function RootLayout({
           <Footer />
         </Providers>
       </body>
+      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS || ""} />
     </html>
   );
 }