当サイトにGoogleアドセンスを導入しようとしたら、Next.jsで導入する場合はひと工夫必要だったのでこちらにまとめておきます！
目次
環境
- React
19.0.0 - Next.js（App Router）
15.1.5
ちなみに当サイトの使用技術はこんな感じ👇
- フロントエンド: Next.js, TypeScript, CSS
- バックエンド / CMS: WordPress, GraphQL
- ホスティング: Netlify
事前準備
Google AdSenseにログインし、ダッシュボード左メニューから「広告」を開く。
広告ユニットを作成し、HTMLの生成まで行っておいてください。
Loading code...また、PUBLISHER_IDとdata-ad-slotの値はこの後使用する。
PUBLISHER_IDはconstantsファイルに定義しました。
Next.js×TypeScriptのサイトにGoogleアドセンスを導入する
下記のadsbygoogle.jsはサイト全体で1度読み込ませればok
Loading code...こちらはコンポーネント化してslotをpropsで渡して汎用的に使えるようにします。
Loading code...ではやっていきます！
adsbygoogle.jsを読み込ませる
コンポーネントを作成：GoogleAdScript.tsx👇
Loading code...これをlayout.tsxで呼び出す。こんな感じ👇
Loading code...広告を設置する
コンポーネントを作成：GoogleAd.tsx👇
Loading code...GoogleAdを広告を表示したい箇所で呼び出す👇
※slotの値は自分のものに書き換える
Loading code...広告の表示位置を調整
表示位置が左寄りになっていたり気になったので、調整した時のCSS👇
Loading code...参考
ありがとうございます！！！
