# How to add Google Analytics 4 to Next.js
> Learn how to add Google Analytics 4 to Next.js by tracking route changes with gtag in a _app.js useEffect and injecting the GA script from _document.js.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-06-27 | Topics: [Next.js](https://flaviocopes.com/tags/next/) | Canonical: https://flaviocopes.com/nextjs-google-analytics/
Here's how to add Google Analytics version 4 to a website based upon [Next.js](https://flaviocopes.com/nextjs/).
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:
```jsx
import '/public/style.css'
function MyApp({ Component, pageProps }) {
return
}
```
Change it to
```js
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,
})
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return
}
export default MyApp
```
Finally, add a `pages/_document.js` file that creates a [Next.js custom document](https://nextjs.org/docs/advanced-features/custom-document) that injects the Google Analytics script, with:
```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
)
}
}
```
> Note: solution adapted from a post by Marie Starck on