Integrating Google AdSense with Next.js

Monetizing your content is a major milestone for any blog or web application. Google AdSense remains one of the most popular ways to display ads and generate revenue. However, integrating third-party scripts like AdSense into a modern React meta-framework like Next.js requires a bit of care to ensure you don't degrade performance or cause hydration mismatches.

In this guide, we'll walk through the "Next.js way" of adding Google AdSense.

The Challenge with Standard Scripts

When you sign up for AdSense, Google gives you a snippet of HTML that looks something like this:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXX"
     crossorigin="anonymous"></script>

In a traditional HTML file, you would just paste this into your <head>. In Next.js, while you could technically place this in your layout, doing so manually can block the main thread or delay the hydration of your application's interactive elements.

The Solution: `next/script`

Next.js provides a built-in component, <Script />, optimized for loading third-party scripts. It allows you to control when a script loads (e.g., before interactive, after interactive, or lazily) without blocking the rest of your page.

Step-by-Step Integration

1. Get Your Publisher ID

First, log in to your Google AdSense console. If you haven't set up a site yet, follow their wizard to add your domain. You will need your Publisher ID, which looks like ca-pub-xxxxxxxxxxxxxxxx.

2. Update Your Root Layout

We want the AdSense code to be available globally so that "Auto Ads" can appear on any page. The best place for this is your root layout file (app/layout.tsx in the App Router).

Open app/layout.tsx and import the Script component:

import Script from 'next/script'

Next, add the script component to your JSX. A good place is usually just inside the <body> or <html > tag, or even at the end of the component tree. Since this script doesn't need to block the UI, we will use the afterInteractive strategy.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* Other Providers */}
        
        {/* Google AdSense */}
        <Script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7668313605079696"
          crossOrigin="anonymous"
          strategy="afterInteractive"
        />
        
        {children}
      </body>
    </html>
  )
}

Note: Replace the client ID in the src URL with your actual AdSense Publisher ID if it's different.

3. Understanding `strategy="afterInteractive"`

We used strategy="afterInteractive" above. This tells Next.js to inject this script immediately after the page becomes interactive (after hydration). This is perfect for analytics and ads, as it ensures your user can click buttons and navigate your site before the heavy ad scripts finish loading.

Verification

Once you've pushed this code:

Check the Network Tab: Open your browser dev tools, go to the Network tab, filter by "JS", and look for adsbygoogle.js. You should see it loading.
AdSense Console: It may take a few hours or even days for Google to crawl your site and verify the code placement.
Auto Ads: If you have enabled Auto Ads in your AdSense settings, advertisements should start appearing automatically in between distinct sections of your content.

Best Practices

Privacy Policy: Remember that using AdSense requires you to update your Privacy Policy to inform users about cookies and data collection.
Ads.txt: Google will likely ask you to add an ads.txt file to your root domain. You can place this file in the public/ folder of your Next.js project (public/ads.txt), and it will be served at yourdomain.com/ads.txt.
Don't Click Your Own Ads: This is the golden rule of AdSense. Clicking your own ads to test them can lead to an immediate ban.

Conclusion

Integrating AdSense in Next.js is straightforward thanks to the Script component. By using the correct loading strategy, you can monetize your traffic without sacrificing the high performance and user experience that Next.js provides.