How to add Google Adsense to NextJs

If you're looking for a way to add Google Adsense to your NextJs blog, you may be having trouble getting it to work. I've encountered many problems myself, and sometimes even when you follow all the rules, your application can be rejected because Google didn't notice you had added the Adsense script to your website.

💡

Today I’m going to explain how to Add Google Adsense to your nextjs blog. Not just explaining, I’ll show you the method I’ve used on my blog focused on Performance and smoothness. So that your website wouldn’t be slow, laggy, or annoying (for better user experience).

First things first, Now I’ll show you how to add Adsense to your NextJs blog, & then I want to share some of my thoughts about Adsense. These might be helpful for you.

I'll cover two steps. Both are required. or If you don't make any mistakes, you could still be rejected.

To add Adsense script tag to your _document.tsx or _app.tsx page, first add the environment variable NEXT_PUBLIC_GOOGLE_ADSENSE=ca-pub-************ for Adsense ads which defines your AdSense id or Adsense code, then add the script. You can skip this step if you've already been approved for Adsense.

pages/_document.tsx

<script
  async
  src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
  crossOrigin="anonymous"
/>

and keep waiting until you get an e-mail from Google. It might take up to 3 weeks.

Don’t use any script components here. Because I even got rejected many times for this.

& Remember, If you get rejected, It'll not be for the script. You'll get rejected for reasons related to your blog or content. You'll get an email like this

& you'll get an email like this if you get approval

In my opinion, this is the best method, Because we all focus on user experience. I'll also mention two methods for this.

Auto ads (Follow this method if you want to use auto ads)
Custom ads (Follow this method if you want to use custom ads for Better Performance)

add this script to your _document.tsx page:

pages/_document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from "next/script";
 
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          <Script
            async
            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
            strategy="lazyOnload"
            crossOrigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

That's enough. You can also use other script components. I've suggested lazyOnload because Vercel also suggested this one. And It's a really good choice for performance.

This is what I use on my blog. Auto ads can be annoying. I used to use Auto ads before.

add this simple script to your _document.tsx page:

pages/_document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from "next/script";
 
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          <Script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
            strategy="afterInteractive"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

You can also use other script components, But I this if we're not using auto ads, afterInteractive component would be the best choice.

Now you're wondering how can you show ads, right? Because I didn’t include the AdSense client id in the script. Don't worry. Follow these steps:

Go to the Google Adsense dashboard
Go to Ads
Select by ad unit
Now create an ad unit. whichever you like. I use in-article ads. So I chose it.
Copy the slot id and you can save it somewhere, You'll have to use it.
add this package into your 'package.json'
Add this script wherever you want to show ads.

import React from 'react';
import {Adsense} from '@ctrl/react-adsense';
 
// ads with no set-up
<Adsense
  client="ca-pub-**********"
  slot="use-your-slot-id-here"
/>
 
// ads with custom format
<Adsense
  client="ca-pub-************"
  slot="use-your-slot-id-here"
  style={{ width: 500, height: 300 }}
  format=""
/>
 
// responsive and native ads
<Adsense
  client="ca-pub-************"
  slot="use-your-slot-id-here"
  style={{ display: 'block' }}
  layout="in-article"
  format="fluid"
/>

If you're using mdx, then add this component to MDXComponents. And always remember, You can define your ad size.

Now I'll talk about my experience of getting Adsense approval.

Make sure you’re writing unique content. Don’t ever copy-paste other’ writing until you’re smart enough. And also these include pages for a better chance:

Copyright page (A page that contains information about copyright)
Privacy and Policy (You can write about what kind of information you collect or if you don’t collect also mention it. And also you can write about privacy information)
Disclaimer (Write only if you know, and if you think your blog should have it. I didn’t need it)

Remember that, If your contents are not unique or you just copied others, There is a high chance of getting rejected.

I think that's enough for this blog. Feel free to contact me if you need any help.

Here are some best practices to follow when integrating AdSense with Next.js:

Use responsive Ad
Use responsive Ad Units that adjust to different screen sizes and devices to provide the best user experience.
Place the ads in visible and relevant areas of your website, such as above the fold, within content, or in the sidebar.
Avoid placing too many ads on your website, as this can negatively affect the user experience and decrease engagement.
Monitor your ad performance regularly and adjust your ad strategy accordingly to improve revenue and user experience.

Conclusion

Integrating AdSense with Next.js can be challenging, but it is a worthwhile investment for website owners looking to monetize their website and generate revenue. By following the steps outlined in this article and implementing best practices for AdSense integration, you can easily display ads on your Next.js website and generate significant revenue.

FAQs

Is AdSense the best ad network for my Next.js website?

AdSense is a popular and reliable ad network, but you should also consider other ad networks that may better fit your website's niche or audience.

Can I use AdSense with a static site generated by Next.js?

Yes, you can use AdSense with a static site generated by Next.js by following the same steps outlined in this article.

How many Ad Units can I place on my website?

Google has specific policies regarding the number of Ad Units you can place on your website. It is recommended to follow their guidelines to avoid any penalties.

Can I customize the design and placement of my Ad Units?

Yes, you can customize the design and placement of your Ad Units to match your website's look and feel and maximize revenue and user experience.

How long does it take for AdSense to approve my website?

AdSense approval can take anywhere from a few days to several weeks, depending on the complexity of your website and the content. It is important to follow Google's guidelines and policies to avoid any delays in the approval process.

How to add Google Adsense to NextJs

How to add Google Adsense to NextJs applications

How to add Google Adsense to NextJs before getting Approval

How to add Google Adsense to NextJs after getting Approval

NextJs Adsense method for auto ads

NextJs Adsense method for custom ads

How to get Google Adsense Approval?

Best Practices for NextJS AdSense Integration

Conclusion

FAQs

Related Reading