I added Google Analytics to a Next.js website that I’m building last week, and just added it again to a second site this AM. The process is very smooth. There are only 3 files involved. Two of these, we have to create and one of them should already be in your Next.js project and needs to be edited.

You should also have a free Google Analytics account. I made mine on the fly during my first run-through of this process. It only took a few minutes at most.

Get Ready

1. Create or log into your Google Analytics account
2. Open your Next.js project in your editor (I use VS Code)

First file – gtag.js

1. Create a folder at the root level called “lib”
2. Create a new file in “lib” called “gtag.js”
3. Head to nextjs.org and click on the GitHub icon on the top-right of the screen
4. From the GitHub page, navigate to the “examples” folder, go to the “with-google-analytics” subfolder and then the “lib” subfolder
5. In the “lib” folder, open the “gtag’js” file and copy its contents
6. Paste the contents into the local “gtag.js” file that’s open in your editor and save it

Get your Measurement ID from Google Analytics and paste it into gtag.js

1. Go to Google Analytics (create an account if you don’t have one) and click on “Admin” at the bottom-left of the screen
2. Click on “Create Property” – a property is a project
3. Give the property a name (I use the website name), time zone and currency
4. Give the property an industry category, business size and pick usage rationales
5. Click on the “create” button
6. Pick a data stream – you can choose more than one from Android, iOS and web
7. Enter the website URL and a stream name (I use the website name here, too)
8. Click “Create stream” and copy the ‘Measurement ID’
9. Paste the “Measurement ID” into the first line in your “gtag.js” file, in “<YOUR_GA_TRACKING_ID>” – overwrite the <> and everything in-between and fill the quotes, and save it

Second file – modify your _app.js file

1. Go back to the Next.js GitHub page and navigate to the “pages” directory in “with-google-analytics”
2. In the “pages” directory, open “_app.js” and copy its contents
3. Go to “_app.js” in your “pages” folder in your editor and paste the contents of “_app.js” from GitHub over it and save it – I keep the global styles import from the old file

Third file – create your _document.js file

1. In the “pages” directory, create “_document.js”
2. Go back to GitHub and copy the contents of the “_document.js” file and paste it into your local “_document.js” file using your code editor and save it

That’s it! Now, just publish your website and go to Google Analytics.

1. Close your “Web stream details” if its still open
2. Click on the Home icon at the top of the left toolbar – you can select from different properties (projects) using the drop-down at the top of the screen
3. Click on the Realtime icon, right below Home – if you see no activity (0 users), open your website from your browser or a phone and check the Realtime data again, you should now see activity
4. If the “Users in the last 30 minutes” card doesn’t update immediately, give it about 2 minutes, and it should come alive

This is the video that I followed with instructions for how to complete this process:

• Add Google Analytics And Google AdSense To NextJS!