TL;DR

このページでは、Google Adsense の実装方法について解説します。Next.js と TypeScript を使用した具体的なステップとソースコードを提供します。Google Adsense を既存の Next.js アプリケーションに組み込む際の参考にしてください。

Google Adsense の設定

まず、Google Adsense の設定を行います。次のステップを実施してください。

• Google Adsense のサイトにログインします
• 広告の種類を選択します（例えば、ディスプレイ広告）
• 広告コードを取得します

この広告コードを Next.js のプロジェクトに追加することで Google Adsense を実装します。

全体のコード

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import { useEffect } from 'react'

type GoogleAdsenseProps = {
  client: string
  slot: string
  style?: React.CSSProperties
}

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

const GoogleAdsense = ({ client, slot, style }: GoogleAdsenseProps) => {
  useEffect(() => {
    const adsScript = document.createElement('script')
    adsScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
    adsScript.async = true
    document.body.appendChild(adsScript)

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

    return () => {
      document.body.removeChild(adsScript)
    }
  }, [])

  return (
    <div
      css={css`
        text-align: center;
      `}
    >
      <ins className="adsbygoogle" style={style} data-ad-client={client} data-ad-slot={slot} data-ad-format="auto" data-full-width-responsive="true"></ins>
    </div>
  )
}

export default GoogleAdsense

このコードでは、Google Adsense 広告を表示するためのコンポーネント GoogleAdsense を定義しています。主要な部分を順に解説します。

まず、GoogleAdsenseProps という TypeScript の型を定義しています。これは GoogleAdsense コンポーネントの props を型付けするためのもので、client、slot という文字列と、オプションで style を含んでいます。client と slot は Google Adsense の広告コードです。

次に、window オブジェクトに adsbygoogle プロパティを追加するために、declare global を使用しています。adsbygoogle は配列で、その要素はキーが文字列で値が未知のオブジェクトです。

GoogleAdsense コンポーネントでは、useEffect フックを使用して Google Adsense のスクリプトをダイナミックにロードしています。スクリプトタグを作成し、その src に Google Adsense の JavaScript ファイルの URL を設定しています。

そして、このスクリプトタグを HTML ドキュメントの body 要素に追加しています。この操作は、コンポーネントがマウントされたとき（つまり、初めて描画されたとき）に一度だけ行われます。

また、広告のロードをトリガーするために、window.adsbygoogle 配列に空のオブジェクトを push しています。この処理もエラーハンドリングを含んでいます。

そして、クリーンアップ関数を定義しています。これは、コンポーネントがアンマウントされたときに実行される関数で、これによりスクリプトタグが body 要素から削除されます。

コンポーネントが返す JSX の部分では、広告を表示するための <ins> タグを作成しています。className に adsbygoogle を設定し、広告コードを data-ad-client と data-ad-slot に設定しています。

さらに、<ins> タグを中央寄せの <div> タグでラップしています。これには Emotion の css prop を使用しています。これにより、スタイルを直接コンポーネントに適用することができます。この例では、テキストを中央寄せにしています。

以上が、このコードの大まかな解説です。

呼び出し方法

GoogleAdsense コンポーネントを使う際は、client、slot、そしてオプションで style プロパティを指定して利用します。ローカルでの Google Adsense の読み込みを抑制するには、環境変数を使うのが一般的なアプローチです。process.env.NODE_ENV を使うことで現在の環境が開発環境か本番環境かを判別できます。NODE_ENV は Next.js のビルド時に自動的に設定されます。

<div>
  {process.env.NODE_ENV !== 'development' && (
    <GoogleAdsense
      client="ca-XXX-XXXXXXXX" //
      slot="XXXXXXXXXX"
      style={{ display: 'block' }}
    />
  )}
</div>

上記のコードは process.env.NODE_ENV !== 'development' という条件式で Google Adsense のコンポーネントをラップしています。この条件式が true の時（つまり現在の環境が開発環境（'development'）でない時）のみ、Google Adsense のコンポーネントがレンダリングされます。

つまり、開発環境（ローカル）では Google Adsense の広告は表示されず、本番環境では表示されるようになります。

Vercel でアプリケーションをデプロイする場合、特別な設定は必要ありません。ただし、環境変数を利用する場合は Vercel のダッシュボードから設定する必要があります。

今回の場合、process.env.NODE_ENV を使って環境を判断しているので、特に追加で設定する必要はありません。NODE_ENV はビルド時に Next.js が自動的に設定する環境変数です。

Vercel では、ビルド時には NODE_ENV が production として設定され、開発環境では development として設定されます。したがって、本番環境でのみ Google Adsense のコードが読み込まれるようになります。

client

これは Google Adsense の広告コードの一部であり、あなたのアカウントを特定します。"ca-pub-XXXXXXXXXXXXXXXX" のような形式で提供されます。

slot

これも Google Adsense の広告コードの一部で、具体的な広告ブロックを特定します。Google Adsense の管理画面で広告ブロックを作成すると、"XXXXXXXXXX" のような形式で提供されます。

style

広告のスタイルをカスタマイズするために使用します。これは React のインラインスタイルと同じ形式で指定します。ここでは、広告をブロック要素として表示するために display: 'block' を指定しています。

上記のように指定することで、GoogleAdsense コンポーネントが適切な広告を表示します。

終わりに

なお、client と slot の具体的な値は、Google Adsense の管理画面で取得できます。そのため、これらの値はあなたの Google Adsense のアカウントに紐づいています。

以上の方法で、あなたの Next.js のアプリケーションに Google Adsense の広告を組み込むことができます。これにより、Web サイトからの収益を得ることが可能になります。

以上が Next.js と TypeScript を使用して Google Adsense を実装する方法です。