We'll be using the utility npm package called react-ga that abstracts the Google Analytics library. With this library, we can add the script to each of our Next.js pages and instruct the Google Analytics JavaScript API to run on each page load.

Before moving forward, you should have a Next.js application created and a Google Analytics account for your website.

Let's get started!

Table of Contents

Install React-GA NPM Package

First, we need to add the react-ga NPM package to our project. This package will do a lot of the heavy lifting for us.

You can add it with one of the below commands (NPM or Yarn):

      npm install react-ga --save
      yarn add react-ga

The react-ga package will now be added to your project's dependencies.

Add React-GA Logic

Now we need to create an abstraction layer on top of react-ga to put all our tracking logic in one place.

Create a new file called googleAnalytics.js in the components directory of your project:

      cd components && touch googleAnalytics.js

This file will hold a couple of functions that we'll import directly into our components. We are adding them to their own file to make our code more organized and easier to manage.

Add this code to the file:

      import ReactGA from "react-ga"

      export const initGA = () => {

      export const logPageView = () => {
        ReactGA.set({ page: window.location.pathname })

We added a few things hear, so let's go through each piece.

First, we imported the react-ga package we installed in the previous step.

Then, we created two API functions we will export and use in our React components:

  • initGA: initializes ReactGA with the initGA function using the unique Google Analytics id. If you haven't already, make sure you paste your site's unique id into that section.
  • logPageView: called on each pageview and tells the Google Analytics script to collect the data.

We can now import these functions to our React components.

Add Analytics Functions to a Layout.js Component

If you don't have a layout.js file in your /components directory, create one now:

      cd components && touch layout.js

Then, add this code to the file (or add code if you already have a pre-existing file):

      import React, { Component } from "react"

      import { initGA, logPageView } from "./googleAnalytics.js"

      export default class Layout extends Component {
        componentDidMount () {
          if (!window.GA_INITIALIZED) {
            window.GA_INITIALIZED = true

        render () {
          return (

The key thing we did in this file is import our initGA and logPageView functions we created in the last section and called them in the componentDidMount() lifecycle hook function. This means the Google Analytics code will be ran everytime the Layout component is mounted.

In the render() function, the child components are returned inside the div. All the tracking is done by the Google Analytics JavaScript API using the layouts.js functions and ReactGA NPM package.

Using The Layout.js File

To use the new layout.js component we created, we need to import it to one of our pages and wrap our page content with it.

For demonstration purposes, create or open a /pages/homepage.js file:

      cd pages && touch homepage.js

And import the layout.js component and wrap your page content in it. It should look similar to this:

      import React, { Component } from "react"

      import Layout from "../components/layout.js"

      export default class extends Component {
        render () {
          return (
              <div>Homepage content here.</div>

Notice that the page content is wrapped inside the <Layout> component, which holds all the Google Analytics functionality we just built.

Using this setup, all of your pages will load Google Analytics when it's mounted.


If all went well, you should be all set up with getting Google Analytics configured with your Next.js and React application!

If you're looking for something cool to build using the Next.js framework, we have a free course that walks you through building a coding blog with a custom CMS (Content Management System).

In the course, additional things like connecting your Next.js application to a REST API, getting your website indexed by search engines, and configuring Google Analytics are covered.

Thanks for reading and happy coding!