Cover image for Guide post: "Integrate Google AdSense in NextJs: A Step-by-Step Guide"
Back to guide posts

Integrate Google AdSense in NextJs: A Step-by-Step Guide

Discover the essential steps to seamlessly integrate Google AdSense into your NextJs application. Our expert guide provides you with practical tips and strategies to enhance your site's monetization potential while ensuring a smooth user experience.

Published onOctober 03, 20226 minutes read

Table of Contents
Google Adsense with NextJs

This post has been updated for the Next.js 13/14/15 app directory.

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 Next.js blog. Not just explaining, I’ll show you the method I’ve used on my blog, focused on performance and smoothness, so your website won’t be slow, laggy, or annoying (for a 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.

A two-step process for adding AdSense

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

Add the AdSense script before approval

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

Google Adsense Rejected

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

Google Adsense Approved

Add AdSense script after approval

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

  1. Auto Ads (Recommended for effortless use)
  2. Custom Ads (Optimal for Enhanced Performance)

Method for auto ads with AdSense

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.

Method for custom ads with AdSense

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 use other script components, but for non-auto ads, afterInteractive is the recommended 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:

Google Adsense Dashboard 
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 this code to MDXComponents. Or you can also use the component I’ve shown below And always remember, You can define your ad size.

Setup AdSense for the NextJs app directory

Yeah, I’ve been moved to NextJs 13 app router long ago. and I really loved this new router. So If you’re also using App router, You can easily migrate your Adsense as well.

It’s super easy. Just add the script to app/layout.tsx, Just like this:

app/layout.tsx
import Script from "next/script";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
    >
      <body className="antialiased">
        <main className="flex-auto">
          {children}
          <Script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
            strategy="afterInteractive"
          />
        </main>
      </body>
    </html>
  );
}

and Add this component to your wherever you want to show Ads,

for example, MDXComponent.

app/components/adsense.tsx
'use client';
 
import { Adsense } from '@ctrl/react-adsense';
 
export default function ShowAd() {
  return (
    <Adsense
      client="ca-pub-1234567891011"
      slot="123456789"
      style={{ display: 'block' }}
      layout="in-article"
      format="fluid"
    />
);
}

If you’re using Auto Ads, you don’t need this. Just adding this code to your app/layout.tsx is enough.

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

Tips for writing quality content for 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:

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.

Best practices for integrating AdSense in NextJs

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

Conclusion and summary

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.

Common questions about AdSense

  1. Is AdSense the Best Ad Network for Next.js Websites?
  1. Can AdSense Be Used with a Static Site Generated by Next.js?
  1. How Many Ad Units Can I Place on My Website?
  1. Can I Customize Ad Unit Design and Placement?
  1. How Long Does AdSense Approval Take?
  1. Which type of website is best for AdSense?
  1. How do I make $100 a day on AdSense?
  1. How much traffic do you need to make $100 day with AdSense?
  1. What is the minimum traffic for AdSense approval?
  1. How can I get Google AdSense fast?
  1. How much AdSense pay for 1,000 views on website?
Share