How to Install Google Analytics and Search Console in Next.js and React (Step-by-Step Guide)

You shipped your website. It looks great. Your friends said "nice!" 🎉

Then someone asks, "How many people visit it?" and you realize you have no idea. Or you wonder why Google isn't showing your pages yet, and you can't see anything either.

Sound familiar? This is the moment most developers meet Google Analytics and Google Search Console.

The setup can feel confusing because there are many buttons, IDs, and code snippets. In this guide you'll go through it one click at a time. We'll cover Next.js (App Router) first, then React (Vite) later. Ready? 🚀

What Is Google Analytics and Search Console?

Think of your website as a small shop.

• Google Analytics (GA4) is like a counter at the door. It tells you how many people came in, which pages they looked at, and what they clicked.
• Google Search Console is like a message board from Google itself. It tells you if Google can find your pages, and which searches show your site.
• Google Tag Manager (GTM) is an optional "tag box." You put one container on your site, then add or change tags from a dashboard without redeploying code.

The ID you need for Analytics is called the Measurement ID. It looks like G-XXXXXXXXXX. Search Console doesn't use an ID. It uses a verification step to prove the site is yours.

Why This Setup Matters

Building without data is like driving at night with the headlights off. You may be moving, but you can't see much.

• You learn which blog posts or pages people actually read.
• You find out if your latest change helped or hurt.
• You can spot pages Google hasn't indexed yet.
• If you build for clients, you can show real numbers, not guesses.

Benefits with Real-Life Examples

1. See your best pages. If your "Next.js tips" post gets the most visits, you know what to write next.
2. Check what happens after a release. You shipped a new homepage on Monday. Analytics shows whether visits changed afterward.
3. Find search problems early. Search Console can show pages Google has trouble with, so you don't find out months later.
4. Learn which searches bring people. Search Console shows the queries that lead to your site, which helps you improve titles and content.
5. Track button clicks. With a custom event, you can count clicks on something like a "Download CV" button.

Step-by-Step: Set Up Everything

Here's the full path:

1. Create a GA4 property and get your Measurement ID
2. Add Analytics to your Next.js app
3. Test that it works
4. Add your site to Search Console and verify it
5. Submit your sitemap

Step 1: Create a Google Analytics (GA4) Property

1. Go to analytics.google.com and sign in with your Google account.
2. Click Admin (bottom-left corner).
3. In the Account column, pick your account or create a new one. Check you're in the right account.
4. In the Property column, click Create Property.
5. Enter a property name, then choose your time zone and currency.
6. Fill in the business details Google asks for, then click Create. If this is a new account, accept the terms when asked.
7. When asked to choose a platform, select Web.
8. Enter your website URL (for example yourdomain.com) and a Stream name (for example "My Website").
9. Leave Enhanced measurement on. You can turn off individual events later with the gear icon.
10. Click Create stream.

Now copy your ID:

• Go to Admin → Data streams → Web → click your stream.
• Copy the Measurement ID (starts with G-).

⚠️ Don't use the Stream ID. Data gets into GA4 through the Measurement ID.

Step 2: Add Analytics to Next.js (App Router)

Next.js has an official package for this, @next/third-parties. The Next.js docs describe it as experimental, so install it with the latest tag:

pnpm add @next/third-parties@latest next@latest 

(Using npm? Run npm install @next/third-parties@latest next@latest.)

Store your ID in an environment variable. Create .env.local in your project root:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX 

Then open app/layout.tsx and add the component:

import { GoogleAnalytics } from "@next/third-parties/google"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID!} /> </html> ); } 

That's the whole installation. One component, placed once, in the root layout. 💡

Using the Pages Router instead? Put the same component in pages/_app.tsx, next to <Component {...pageProps} />.

Don't forget to add NEXT_PUBLIC_GA_ID to your hosting dashboard's environment variables too. Otherwise it works locally but not in production.

Step 3: Test That It Works

1. Run your site: pnpm dev
2. Open the site in your browser. Turn off any ad blocker first, because blockers can hide analytics.
3. In Google Analytics, open Reports → Realtime.
4. You should see yourself as an active user.

Don't panic if the Realtime screen is empty for a minute. Refresh your site and check again.

Later, you can also check Admin → Data streams and open your stream to see its collection status.

Step 4 (Optional): Track a Button Click

Want to count clicks on a specific button? Use sendGAEvent:

"use client"; import { sendGAEvent } from "@next/third-parties/google"; export function DownloadButton() { return ( <button onClick={() => sendGAEvent("event", "download_clicked", { value: "cv" }) } > Download CV </button> ); } 

Step 5: Add Your Site to Google Search Console

1. Go to search.google.com/search-console and sign in.
2. Use the property selector at the top-left and click Add property.
3. Choose a property type:
   • Domain: covers all subdomains and both http and https. Verification is done with a DNS TXT record.
   • URL prefix: covers one exact URL version (like https://yourdomain.com). You get more verification options.

Option A: Domain property (DNS)

1. Enter your domain (like yourdomain.com) and click Continue.
2. Copy the TXT record Google gives you.
3. Log in to wherever your DNS is managed, such as your domain registrar or Cloudflare.
4. Add a new TXT record and paste the value.
5. Go back to Search Console and click Verify.

DNS changes can take a while to spread, so if it fails at first, wait and try again.

Option B: URL prefix property (HTML tag, easy for Next.js)

1. Choose URL prefix and enter your full URL, like https://yourdomain.com.
2. Pick the HTML tag method and copy the code. Only the content value matters for the next step.
3. Add it in app/layout.tsx using the Next.js metadata API:

export const metadata = { verification: { google: "YOUR_VERIFICATION_CODE", }, }; 

Next.js renders this as <meta name="google-site-verification" content="..." /> in your page's <head>.

1. Deploy your site. Google must be able to see the tag on your live site.
2. Return to Search Console and click Verify.

💡 If you already installed Google Analytics or Tag Manager, URL prefix properties also offer verification through those.

Step 6: Submit Your Sitemap

A sitemap is a list of your pages that you hand to Google. In the Next.js App Router, create app/sitemap.ts:

import type { MetadataRoute } from "next"; export default function sitemap(): MetadataRoute.Sitemap { return [ { url: "https://yourdomain.com", lastModified: new Date() }, { url: "https://yourdomain.com/blog", lastModified: new Date() }, ]; } 

After you deploy, this is available at /sitemap.xml. Then:

1. In Search Console, click Sitemaps in the left menu.
2. Under Add a new sitemap, type sitemap.xml.
3. Click Submit.

Search Console data isn't instant, so give it some time.

Using React (Vite) Instead of Next.js

A plain React app doesn't use the Next.js package. You add the Google tag directly.

1. In Analytics, go to Admin → Data streams → your web stream → View tag instructions.
2. Choose Install manually and copy the snippet.
3. Paste it inside the <head> of index.html, replacing the ID with yours:

<head> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script> <!-- Search Console verification (URL prefix, HTML tag) --> <meta name="google-site-verification" content="YOUR_VERIFICATION_CODE" /> </head> 

Since React apps change pages without a full reload, keep Enhanced measurement on. It includes page view tracking based on browser history changes. If your numbers look odd, check that setting first.

For the sitemap, put a sitemap.xml file in your public/ folder and submit it the same way as above.

Comparison: Direct GA4 vs Google Tag Manager

My suggestion for beginners: start with direct GA4. You can move to GTM later if you need it.

⚠️ Don't load GA4 directly and also through GTM. The Next.js docs warn that using both can cause duplicate page views.

Best Tips: Do's and Don'ts

Do ✅

• Keep your Measurement ID in an environment variable.
• Test in the Realtime report right after setup.
• Pick a Domain property in Search Console if you can edit DNS. It covers everything in one place.
• Verify using the live, deployed URL.

Don't ❌

• Don't paste the tag into every page. Put it once in the root layout.
• Don't test with an ad blocker on.
• Don't forget privacy rules. Depending on where your visitors live, you may need a cookie consent banner. Check the rules that apply to you.

Common Mistakes People Make

1. Using the Stream ID instead of the Measurement ID. The IDs look similar and sit on the same screen. The one you need starts with G-.
2. Forgetting environment variables in production. It works on localhost, then the live site shows no data. Add the variable in your hosting dashboard.
3. Verifying before deploying. If you add the meta tag locally and click Verify, Google can't see it yet. Deploy first.
4. Trying the HTML tag on a Domain property. Domain properties use DNS. The HTML tag method is for URL prefix properties.
5. Giving up too early. Reports and Search Console data may not show up right away. Check again after some time before assuming something is broken.

Conclusion

Installing Google Analytics and Search Console in your Next.js or React site comes down to a few steps:

1. Create a GA4 property and copy the G- Measurement ID.
2. Add GoogleAnalytics to your Next.js layout, or the gtag snippet to your React index.html.
3. Check the Realtime report.
4. Verify your site in Search Console.
5. Submit your sitemap.

It takes a short while, and then your site stops being a mystery. 😊

If this guide helped, you'll find more practical dev guides on hamidrazadev.com. Share it with a friend who is still guessing their traffic numbers, and tell me in the comments which step gave you trouble. Happy building! ⚡