Add Google Adsense to Next.js, refreshed ads

In this post, I will show you how to add Google Adsense to Next.js. I will also show you how to refresh ads every the use navigates to a new page.

As soon as you signed up for your site on Adsense and it has been approved, you have to place the Adsense code (or ad unit code) in your pages. This code in general exists of two parts.

The first part is the script tag that loads the Adsense code. This is the same for all pages. You can place this in the head of your page. In Next.js, you can do this in the _document.js file.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

You can create a utility function to insert the Adsense code in the head of your page. This is useful if you want to ask the user for consent before loading the Adsense code.

export function enableGoogleAdsense() {
  const head = document.getElementsByTagName('head')[0]
  const scriptElement = document.createElement(`script`)
  scriptElement.type = `text/javascript`
  scriptElement.async
  scriptElement.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`
  scriptElement.crossOrigin = 'anonymous'
  head.appendChild(scriptElement)
}

2. Add responsive ad units

The second part is the responsive ad unit. This is the part that will be filled with the actual advertisement graphics. This is the part that will be refreshed when a user navigates to a new page.

I would recommend to create a separate component for ad units. This could look like the following:

import { useEffect } from 'react'

const GoogleAdsenseContainer = ({ client, slot }) => {
  useEffect(() => {
    ;(window.adsbygoogle = window.adsbygoogle || []).push({})
  }, [])

  return (
    <div style={{ textAlign: 'left', overflow: 'hidden' }}>
      <span style={{ fontSize: '12px' }}>Advertisment</span>
      <ins
        className="adsbygoogle"
        style={{ display: 'block' }}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>
    </div>
  )
}

export default GoogleAdsenseContainer

In this component you will find the other to parts of the original Adsense script. So here the actual ad unit element is placed with a small ad-label. You can load this component in every page and position you like and place your individual client and slot ID. After the ad unit is placed window.adsbygoogle in the useEffect hook will fill this ad unit with the actual advertisement graphics.

With the useEffect hook ads will also be requested/refreshed when a user navigates to any other page without refreshing the page.

Conclusion

In this post, I showed you how to add Google Adsense to Next.js. I also showed you how to refresh ads every the use navigates to a new page. I hope you found this post useful. If you have any questions, please let me know in the comments below.

1. Google Adsense script

2. Add responsive ad units

Conclusion