How We Integrated Google AdSense into a Next.js App Router Project (the Right Way)
• 3 MINUTE READ
Google AdSense is one of the easiest ways to monetize a website. But if you’re using Next.js with the App Router, setting it up properly requires a few key steps.
Here’s how we added AdSense to vibeberry.io - with full control, clean architecture, and production-ready integration.
Table of Contents
1. Create an AdSense Account
Start by signing up at adsense.google.com/start. You’ll need to:
- enter your domain (must be live and working)
- fill out basic business or personal info
- wait for Google to review your site
Once you’re in, AdSense will ask you to verify your site by adding a script and an ads.txt file.
2. Add the Script and ads.txt
Create the Script Component
We created a reusable AdSense script loader and placed it here:
import { FC } from 'react';
import Script from 'next/script';
const GoogleAdsense: FC<{ pId: string }> = ({ pId }) => (
<Script
async
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${pId}`}
crossOrigin="anonymous"
strategy="afterInteractive"
/>
);
export default GoogleAdsense;Load It in Production via a Centralized Service Component
To manage all third-party scripts cleanly, we created a wrapper component:
It loads services like AdSense, Analytics, Speed Insights, etc. - but only in production:
const RootLayoutServices: FC = () => {
return process.env.NODE_ENV === 'production' ? (
<> <GoogleAdsense pId="1234567890123456" />
{/* Other third-party services */}
</>) : null;
};Then we included it at the bottom of our main layout:
<body> {/* app content */} <RootLayoutServices /></body>✅ This ensures your scripts only run live, never during local development.
Add public/ads.txt
Create this file and include:
google.com, pub-1234567890123456, DIRECT, f08c47fec0942fa0Replace pub-1234567890123456 with your Publisher ID, found under Account → Account information in AdSense.
This tells Google you’re allowed to show ads on your domain.
3. Create a Manual Ad Unit
After your site is approved:
- Go to Ads → By ad unit
- Choose Display Ads
- Set the format (we use responsive)
- Copy the generated data-ad-slot value
We prefer manual units over Auto Ads for better layout control.
4. Create a Custom Ad Slot Component
We placed our ad slot component here:
'use client';
import { useEffect } from 'react';
const AdSlot = ({ slot }: { slot: string }) => {
useEffect(() => {
try {
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (e) {
console.error(e);
}
}, []);
return (<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1234567890123456" data-ad-slot={slot} data-ad-format="auto" data-full-width-responsive="true" />);
};
export default AdSlot;You can now place <AdSlot slot="1234567890" /> wherever needed in your UI.
5. Handle App Router Navigation
Since we’re using Next.js App Router, AdSense and Analytics won’t automatically detect route changes. We fixed this with:
'use client';
import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
export default function AnalyticsRouter() {
const path = usePathname();
const first = useRef(true);
useEffect(() => {
if (first.current) {
first.current = false;
return;
}
window.gtag?.('event', 'page_view', {
page_path: path,
page_location: window.location.href,
});
}, [path]);
return null;
}This ensures AdSense/GA4 continue to track page views correctly as users navigate between routes.
6. Respect Consent Requirements (EU, US)
If you serve users in the EU, California, or other regions with privacy laws, you must obtain user consent before showing personalized ads.
You can:
- Use a Consent Management Platform (CMP)
- Or implement manual logic using gtag('consent', ...)
Without consent, Google may block personalized ads or fall back to lower-paying non-personalized ones.
7. Console Warning (You Can Ignore It)
During development or even in production, you may see this browser console warning:
It’s harmless and caused by how Next.js handles scripts. Your ads will still load and work perfectly - you can safely ignore it.
Recap
Here’s what we did on vibeberry.io:
- ✅ Registered an AdSense account
- ✅ Verified the site with a script and ads.txt
- ✅ Created manual display ad units
- ✅ Centralized all scripts in RootLayoutServices
- ✅ Displayed ads only in production
- ✅ Handled route changes with App Router
- ✅ Respected consent rules for personalized ads
Final Thoughts
Setting up AdSense on a modern Next.js project can feel confusing at first - especially with the App Router and all the privacy requirements. But once you break it down into steps, it’s totally manageable.
If you have any questions or run into something tricky - drop a comment below. Thanks for reading - and good luck with your integration!
VibeBerry Team