当サイトは、一部記事に広告を含みます

2025/02/14 2025/02/14

Next.js × TypeScript のWebサイトでGoogleアドセンスを使う

当サイトにGoogleアドセンスを導入しようとしたら、Next.jsで導入する場合はひと工夫必要だったのでこちらにまとめておきます！

1 環境
2 事前準備
3 Next.js×TypeScriptのサイトにGoogleアドセンスを導入する
4 参考

環境

React　19.0.0
Next.js（App Router）　15.1.5

ちなみに当サイトの使用技術はこんな感じ👇

フロントエンド: Next.js, TypeScript, CSS
バックエンド / CMS: WordPress, GraphQL
ホスティング: Netlify

事前準備

Google AdSenseにログインし、ダッシュボード左メニューから「広告」を開く。
広告ユニットを作成し、HTMLの生成まで行っておいてください。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=PUBLISHER_ID"
     crossorigin="anonymous"></script>
<!-- mucca_article_bottom_square -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="PUBLISHER_ID"
     data-ad-slot="123456789"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

また、PUBLISHER_IDとdata-ad-slotの値はこの後使用する。
PUBLISHER_IDはconstantsファイルに定義しました。

Next.js×TypeScriptのサイトにGoogleアドセンスを導入する

下記のadsbygoogle.jsはサイト全体で1度読み込ませればok

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

こちらはコンポーネント化してslotをpropsで渡して汎用的に使えるようにします。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="YOUR_PUBLISHER_ID"
     data-ad-slot="123456789"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

ではやっていきます！

adsbygoogle.jsを読み込ませる

コンポーネントを作成：GoogleAdScript.tsx👇

import { isProduction, PUBLISHER_ID } from "@/constants";
import Script from "next/script";

export const GoogleAdScript = () => {
  if (isProduction) {
    return (
      <Script
        async
        src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${PUBLISHER_ID}`}
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
    );
  }
  return <></>;
};

これをlayout.tsxで呼び出す。こんな感じ👇

~~ 省略 ~~
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  
  return (
    <html lang="ja">
      <body>
        <AsyncLayout>{children}</AsyncLayout> 
        <GoogleAdScript />
      </body>
    </html>
  );
}

広告を設置する

コンポーネントを作成：GoogleAd.tsx👇

"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";
import { PUBLISHER_ID } from "@/constants";


declare global {
  interface Window {
    adsbygoogle: { [key: string]: unknown }[];
  }
}

type GoogleAdProps = {
  slot: string;
  format?: string;
  responsive?: string;
  style?: React.CSSProperties
};

const GoogleAd = ({
  slot,
  format = "auto",
  responsive = "true",
  style,
}: GoogleAdProps) => {
  let pathname = usePathname();
  pathname = pathname ? pathname : "";

  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.error(err);
    }
  }, [pathname]);

  return (
    <div key={pathname.replace(/\//g, "-") + "-" + slot}>
      <ins
        className="adsbygoogle"
        style={{ display: "block", width: "100%", ...style }}
        data-ad-client={`${PUBLISHER_ID}`}
        data-ad-slot={slot}
        data-ad-format={format}
        data-full-width-responsive={responsive}
      />
    </div>
  );
};

export default GoogleAd;

GoogleAdを広告を表示したい箇所で呼び出す👇
※slotの値は自分のものに書き換える

<div className='l-sec-padding u-ad-sec'>
    <GoogleAd slot="123456789" />
</div>

広告の表示位置を調整

表示位置が左寄りになっていたり気になったので、調整した時のCSS👇

.u-ad-sec{
    text-align: center;
   > * {
    width: 90%;
    margin: auto;
   }
}

参考

ありがとうございます！！！

Google AdSense を Next.js 製ブログに入れるのに一手間かかる話 | stin’s Blog

Next.js App Routerで作ったサイトにGoogleアドセンスを導入する | INARI TECH

---

記事が気に入ったら、ぜひ応援いただけると更新がんばれます☕️

エックスサーバーでWordPressを削除する方法

GitHub｜Pushするだけでエックスサーバにサイトを公開する（GitHub Actions／自動デプロイ）

【所要時間たった10分】誰でも簡単！WordPressを始める5ステップ｜エックスサーバー

デジハリオンラインを受講してみて。Webデザイナー講座の評判は？現役フリーランスの本音レビュー