Troubleshooting Google Analytics Integration in a React/Next.js App

I’m encountering issues with setting up Google Analytics in my React/Next.js application. I’ve created a GoogleAnalytics component as follows:

// GoogleAnalytics.tsx

import Script from "next/script";

const GoogleAnalytics = () => {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=G-SMWF3K8CDQ`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-SMWF3K8CDQ');
        `}
      </Script>
    </>
  );
};

export default GoogleAnalytics;

This component is imported and used in my layout.tsx file like this:

// layout.tsx

import React from "react";
import Head from "next/head";
import "./css/style.css";
import Analytics from "@/components/Analytics";
import { Inter } from "next/font/google";
import Header from "@/components/ui/header";
import Banner from "@/components/banner";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <Head>
        <Analytics /> {/* Use the Analytics component inside the Head component */}
      </Head>
      <body
        className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}
      >
        <div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
          <Header />
          {children}
          <Banner />
        </div>
      </body>
    </html>
  );
}

When I use the Google Tag Assistant to check for the tag while running the app in development mode on localhost, it doesn’t detect anything.

Questions:

  1. Have I configured the Google Analytics script integration correctly in a React/Next.js environment?
  2. Is there a specific setup or modification required for Google Analytics to work correctly on localhost or in development mode?
  3. Are there known issues or additional steps I should be aware of for integrating Google Analytics with Next.js?

I appreciate any insights or suggestions to resolve this issue.