Next.jsサイトにAdSense入れたいんだけど、とりあえず何すればいい？

「Next.jsの静的サイト作ったんだけど、収益化したいな〜。AdSenseってどうやるんだっけ？コードとか面倒なんだよな〜。」って思ってない？

大丈夫、Claude Codeに一発で頼んで、あとはAdSenseの管理画面でポチポチするだけで、簡単に導入できるよ。

一番雑な投げ方

まずはこれ打ってみて。

Next.js静的サイトにGoogle AdSenseを導入するコードを書いて。
広告ローダー、ads.txt自動生成、サイト確認メタタグもよろしく。パブリッシャーIDは環境変数で渡せるようにしてね。

これだけで、必要なコードはだいたい揃うはずだよ。あとは指示通りにファイルに貼り付けるだけ。

もうちょい具体的に投げるパターン

「今あるサイトに組み込みたい」とか、「静的エクスポート前提だよ」って状況に合わせて、ちょっと具体的に投げてみよう。

既存の`layout.tsx`と`ads.txt`スクリプトを更新してほしい場合

今あるNext.jsサイトにAdSense入れたいんだけど、`NEXT_PUBLIC_ADSENSE_CLIENT`っていう環境変数でパブリッシャーIDを渡せるようにして、広告ローダーとサイト確認メタタグ、そして`ads.txt`の自動生成のコードを書いて。
既存の`src/app/layout.tsx`と、`scripts/build-ads-txt.mjs`を更新するイメージで出してね。

静的エクスポートに特化してほしい場合

Next.jsの静的エクスポートしてるサイトにGoogle AdSenseを導入したい。
ビルド時に`ads.txt`が自動生成されて、HTMLにはサイト確認用のメタタグと広告ローダーが入るようにしてほしい。パブリッシャーIDは環境変数から読み込む感じだよ。

実践例 / 実録

実際にClaude Codeに頼んで、Next.jsの静的サイトにAdSenseを導入した時の流れを紹介するね。

ステップ1: コードの準備（Claude Codeにお任せ）

まずClaude Codeに頼んだら、AdSense導入に必要なコード一式を吐き出してくれたよ。

例えばsrc/app/layout.tsxには、こんな感じで環境変数をチェックしてメタタグや広告ローダーを埋め込む処理を書いてくれる。

// src/app/layout.tsx (一部抜粋)
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const adsenseClient = process.env.NEXT_PUBLIC_ADSENSE_CLIENT;

  return (
    <html lang="ja">
      <head>
        {adsenseClient && (
          <>
            <meta name="google-adsense-account" content={adsenseClient} />
            <Script
              async
              src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adsenseClient}`}
              crossOrigin="anonymous"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  )
}

あと、ads.txtを自動生成するスクリプトも作ってくれたから、scripts/build-ads-txt.mjsみたいなファイル名で保存して、package.jsonのprebuildとかで実行するようにしとく。

// scripts/build-ads-txt.mjs (一部抜粋)
import fs from 'fs';
import path from 'path';

const adsenseClient = process.env.NEXT_PUBLIC_ADSENSE_CLIENT;
const publicDir = path.resolve(process.cwd(), 'public'); // 静的ファイル出力先

const adsTxtContent = adsenseClient
  ? `google.com, ${adsenseClient}, DIRECT, f08c47fec0942fa0`
  : '# AdSense Client ID is not set. Placeholder ads.txt generated.';

fs.writeFileSync(path.join(publicDir, 'ads.txt'), adsTxtContent);
console.log('ads.txt generated.');

これで、あとは環境変数NEXT_PUBLIC_ADSENSE_CLIENTにパブリッシャーIDを入れるだけで、広告コードが自動で埋め込まれる準備ができたってわけ。

ステップ2: AdSenseアカウント作成とサイト登録

次はGoogle AdSenseにアクセスして、アカウントを作ってね。すでに持ってるならログインするだけだよ。

AdSenseにログインしたら、「サイト」メニューから自分のサイトを追加する。
国や支払い情報なんかも設定するんだ。
この時、「ca-pub-XXXXXXXXXXXXXXXX」みたいな形式のパブリッシャーIDが表示されるから、これをメモっておく。これが後で必要になるよ。

ステップ3: パブリッシャーIDをセットしてビルド＆デプロイ

メモしておいたパブリッシャーIDを、.envファイルに書き込むんだ。

# まず、.env.example をコピーして .env を作る（まだ無ければ）
cp .env.example .env

# .env を編集
# NEXT_PUBLIC_ADSENSE_CLIENT=ca-pub-XXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXの部分には、自分のパブリッシャーIDを入れてね。

そしたら、ビルドを実行する。

npm run build

ビルドが完了したら、生成されたout/ads.txt（Next.jsの場合、public/ads.txtにコピーされることもあるよ）やout/index.htmlに、ちゃんとAdSenseのコードやメタタグが入ってるか確認しとくと安心だよ。

あとは、いつものデプロイ方法でサイトを公開するだけ。Cloudflare PagesとかVercelとか使ってるなら、いつも通りデプロイすればOK。

デプロイ後には、ブラウザでhttps://自分のサイトのURL/ads.txtにアクセスして、ちゃんと自分のパブリッシャーIDが入ってるか確認してみてね。

ステップ4: サイト審査をリクエスト

AdSenseの管理画面に戻って、「サイト」のところに自分のサイトが表示されてるはずだよ。ここで「審査をリクエスト」するんだ。

審査には通常、数日〜2週間くらいかかることもある。サイトのコンテンツ量や独自性、プライバシーポリシーなんかがチェックされるから、ある程度の記事数がある方が有利だよ。

ステップ5: 審査通過後：自動広告をON

審査に通ったら、いよいよ広告表示だ！

AdSenseの管理画面で「広告」→「サイトごと」に進んで、自分のサイトの自動広告をONにするんだ。これだけで、Googleが自動で最適な場所に広告を表示してくれるようになる。

広告のフォーマットとか表示頻度なんかも調整できるけど、最初はデフォルトでOK。設定を保存したら、数時間〜1日くらいで広告が表示され始めるはずだよ。焦らず待ってみてね。

つまずきポイント

`ads.txt`が反映されない？

「デプロイしたのにads.txtが古いまま」って時は、まずサイトをビルドし直したか確認して。環境変数NEXT_PUBLIC_ADSENSE_CLIENTが正しく設定されてるか、ビルドスクリプトが動いてるかもチェックだよ。Cloudflare Pagesなんかだと、ビルドキャッシュが効きすぎて反映されないこともあるから、キャッシュクリアしてデプロイし直してみるのもアリだね。

広告が表示されないんだけど…

審査は通過した？ AdSenseの管理画面で「自動広告」がONになってる？これらがOKなら、すぐには表示されないこともあるよ。Googleのシステムがサイトをクロールして、最適な広告を配信するまでには時間がかかるから、数時間〜1日くらいは気長に待ってみてね。トラフィックが少ないと広告が出にくいこともあるから、焦らないで。

プライバシーポリシーって必要？

AdSenseを使うなら、一般的にプライバシーポリシーの設置は必須だよ。Cookieの使用や個人情報の取り扱いについて明記しておく必要がある。もしサイトにまだないなら、Claude Codeに作ってもらうか、ちゃんとしたテンプレートを参考に設置しとこう。