Adding Google Adsense to a blog created with Next.js 13 (App Router) at lightning speed

I will provide instructions on how to add Google Adsense to a blog created with Next.js 13 (App Router)

Published: 10 September, 2023
Revised: 10 September, 2023

Introducing Google Adsense to this Blog

To implement Google Adsense, there is an approval process, and during the initial stages when there were very few articles, I had postponed it, thinking it wouldn't be approved. I'm not a big fan of ads myself, but for the sake of covering future maintenance costs and maintaining motivation, it's better to have some income, as long as it doesn't become too intrusive. In this post, I will summarize the steps for adding Google Adsense.

Number of Articles at the Time of Google Adsense Implementation

When I counted, there were 16 articles excluding the privacy policy and profile. Since the blog supports both Japanese and English and has separate URLs, it's 32 when doubled. I'm not sure if this number is sufficient for approval, but I thought it's worth trying.

Google Adsense Implementation Steps

After a quick search, various methods came up, but it seemed that the easiest way was to paste the code displayed in the Google Adsense UI to display automatic ads, as mentioned below.

UI Operation

Click "Get started" from the following link:

https://adsense.google.com/start/

After selecting the Google Account you want to link (in my case, I was redirected to a page like this), since the payment method was already registered, there was no need to confirm ADS, so I clicked "Connect your site to AdSense."

Adding Google Adsense Script to Next.js 13 (App Router)

It displayed "Select verification method," and it seemed that I should choose between AdSense code snippet or Ads.txt snippet. This time, I used the Adsense code snippet, which looks like the following, where <ID> is a part that varies depending on the individual:

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

In the layout.tsx file (since this blog supports both Japanese and English, [locale] is included in the path), add the following code to the head:

return (
    <html lang={locale}>
      <head>
        <Script
          id="Absence-banner"
          async
          strategy="lazyOnload"
          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
          crossOrigin="anonymous"
        />
      </head>
      <body className={inter.className}>
...

As a note, the Head here is not the Head from next/script but the regular HTML head tag. Using the former will result in the following error:

`next/script` should not be used in `next/head` component. Move `<Script />` outside of `<Head>` instead.

Make sure to add NEXT_PUBLIC_GOOGLE_ADSENSE to your .env.local file with the specific value of <ID>.

NEXT_PUBLIC_GOOGLE_ADSENSE=<ID>

Set NEXT_PUBLIC_GOOGLE_ADSENSE as an environment variable in Netlify:

Netlify → Deploys → Deploy Settings → Environment variables → Add a variable → NEXT_PUBLIC_GOOGLE_ADSENSE を追加

I referred to the following pages for guidance:

Stack Overflow - Adding Google Ads Code in Next.js for Automatic Units

Code with Shriek DJ - How to Add Google AdSense to Next.js 13 with App Router Auto Ads and Uni

The modifications made to this blog can be found in the following PR:

GitHub - PR Link

After verifying that the <head> tag has been added in the browser post-deployment, I have sent a request for review.

I submitted a review request around 14:00 on September 10, 2023.

As it may take a few days, I will wait, but the implementation itself is now complete.

I will provide an update when the results come back!