Avatar
Cover

How to add AdSense in NextJS 14

Adding Google AdSense to your Next.js 14 application is a fantastic way to monetize your website. This process involves multiple steps to ensure that the advertisements are seamlessly integrated and appropriately displayed on your website. The following guide provides a comprehensive, step-by-step process on how to successfully integrate AdSense into your Next.js 14 application.

There’re 2 methods that I will share here:

  1. Using auto ads
  1. Using ad unit

Brief: Auto ads is easier to implement, you just add the code to layout.tsx then AdSense will do the rest. They will automatically put ads to their best location according to the algorithm. But, because if the user move between page in NextJS the page is not refreshed, so does your ads. In auto ads, your ads will stay the same even though the user move between page so many times.

If you have some time, my suggestion is to implement using ad unit. In this implementation method, it will refresh the ads to another ads if the user navigate between your posts.

Method 1: Implement using Auto Ads

If you haven't done so already, the first thing you need to do is sign up for an AdSense account. Google AdSense is a free and simple way to earn money by placing ads on your website. During the sign-up process, Google will provide you with a unique ad code. This ad code comes with a publisher ID that serves to identify your account. It's important to keep this code safe as it will be crucial for the upcoming steps. This process lets Google know that you're ready to display ads on your site and starts the ball rolling on your AdSense journey.

Here’s the sample of AdSense code :

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

Make sure that you enable Auto ads and you can get the code there:

Once you've secured your ad code, the next step involves adding the script to layout.tsx file Next.js application. 

import Script from "next/script";


				<Script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234512345"
          crossOrigin="anonymous"
          strategy="lazyOnload"
        ></Script>

Add that script in src/app/layout.tsx within <head> tag

To see the ads on your web, sometimes it takes some hours. And also you cannot see your Ads on your localhost.

Method 2 : Implement using Ad unit

Create ad unit in AdSense dashboard

Get the code from Adsense page

Create NextJS Component, I put it on src/components/global/Adsense.tsx :

import React, { useEffect, useRef } from "react";

const Adsense = () => {
  const hasRun = useRef(false);

  useEffect(() => {
    if (!hasRun.current) {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
      hasRun.current = true;
    }
  }, []);

  return (
    <>
      <ins
        className="adsbygoogle"
        style={{ display: "block", textAlign: "center" }}
        data-ad-layout="in-article"
        data-ad-format="auto"
        data-ad-client="ca-pub-1234512345"
        data-ad-slot="1234512345"

      ></ins>
    </>
  );
};

export default Adsense;

Make sure you align the code within <ins with the one you get from Adsense.

Now you can use <Adsense/> tag in page you want to display the Adsense ads

Step 4: Test Your Application

The next step is crucial: testing your application. After embedding and positioning your ad component, it's time to see how it works in the real world. Check to see if the ads are appearing as expected. If they are not, maybe it takes some time around 1-2 hours for the first time, but after that, once you change the code, it will appear instantly.

By following these steps, you can successfully add Google AdSense to your Next.js 14 application. But remember, the work doesn't stop there. You should regularly monitor the performance of your ads and make necessary adjustments to optimize their effectiveness and your revenue. This could mean repositioning ads, changing the ad size or type, or experimenting with different content on your site. The world of AdSense is one of constant adjustment and optimization, and those willing to invest the time and effort will reap the rewards.