How to add Google tag to Next.js website

You can use @next/third-parties to add Google Tag Manager (GTM) to your Next.js application in a more streamlined and performant way. Here's a step-by-step process

Step#1 install

npm install @next/third-parties

Step#2

Import this in layout.tsx. You need to create a property on Google Analytics and use it in below code.

import { GoogleAnalytics } from '@next/third-parties/google'

..
..
..

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        {children}
        <Footer />
      </body>
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </html>
  )
}

Website Analytics will start reflecting in Google Analytics