Skip to content

How to add Google Analytics 4 to Next.js

New Courses Coming Soon

Join the waiting lists

Here’s how to add Google Analytics version 4 to a website based upon Next.js.

Create a Google Analytics property and save the property ID in a NEXT_PUBLIC_GOOGLE_ANALYTICS environment variable.

Then, you need to add a useEffect() call in the pages/_app.js file, which might look like this now:

import '/public/style.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />

Change it to

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import 'tailwindcss/tailwind.css'
import '/public/style.css'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = url => {
      window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
        page_path: url,
    }'routeChangeComplete', handleRouteChange)
    return () => {'routeChangeComplete', handleRouteChange)
  }, [])

  return <Component {...pageProps} />

export default MyApp

Finally, add a pages/_document.js file that creates a Next.js custom document that injects the Google Analytics script, with:

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
              __html: `
            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,
          <Main />
          <NextScript />

Note: solution adapted from a post by Marie Starck on

Here is how can I help you: