Next.jsのSSGブログでアクセス解析をしたかったので、Google Analyticsを導入しました。備忘録として残します。
<h2 id="%E6%B8%AC%E5%AE%9Aid%E3%81%AE%E5%8F%96%E5%BE%97" data-line="3" class="code-line"><a class="header-anchor-link" href="#%E6%B8%AC%E5%AE%9Aid%E3%81%AE%E5%8F%96%E5%BE%97" aria-hidden="true"></a> 測定IDの取得</h2>
まず、Google Analytics 4（GA4）の測定IDを取得します。Google Analyticsの管理画面から「データストリーム」を選択し、ウェブストリームの測定ID（G-XXXXXXXXXXの形式）をコピーしてください。
環境変数ファイルに測定IDを追加します。
<div class="code-block-container"><div class="code-block-filename-container">.env.local</div><pre class="language-txt"><code class="language-txt code-line" data-line="9">NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
</code></pre></div><code>NEXT_PUBLIC_</code> プレフィックスを付けることで、クライアントサイドからもアクセス可能になります。
<h2 id="%40next%2Fthird-parties%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="15" class="code-line"><a class="header-anchor-link" href="#%40next%2Fthird-parties%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> @next/third-partiesのインストール</h2>
Next.js 14以降では、<code>@next/third-parties</code> パッケージを使うことでGoogle Analyticsを簡単に導入できます<a href="#fn-9a35-1" id="fnref-9a35-1">[1]</a>。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="19">npm install @next/third-parties
</code></pre></div><h2 id="_app.tsx%E3%81%B8%E3%81%AE%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF" data-line="23" class="code-line"><a class="header-anchor-link" href="#_app.tsx%E3%81%B8%E3%81%AE%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF" aria-hidden="true"></a> _app.tsxへの組み込み</h2>
Pages Routerの場合、<code>_app.tsx</code> に <code>GoogleAnalytics</code> コンポーネントを追加します。
<div class="code-block-container"><div class="code-block-filename-container">pages/_app.tsx</div><pre class="language-tsx"><code class="language-tsx code-line" data-line="27">import { AppProps } from 'next/app'
import { GoogleAnalytics } from '@next/third-parties/google'

const GA_ID = process.env.NEXT_PUBLIC_GA_ID || ''

export default function MyApp({ Component, pageProps }: AppProps) {
 return (
 &lt;&gt;
 &lt;Component {...pageProps} /&gt;
 {process.env.NODE_ENV === 'production' &amp;&amp; GA_ID &amp;&amp; (
 &lt;GoogleAnalytics gaId={GA_ID} /&gt;
 )}
 &lt;/&gt;
 )
}
</code></pre></div><code>process.env.NODE_ENV === 'production'</code> の条件を追加することで、開発環境でのアクセスは計測から除外されます。
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E5%85%88%E3%81%A7%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E8%A8%AD%E5%AE%9A" data-line="47" class="code-line"><a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E5%85%88%E3%81%A7%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> デプロイ先での環境変数設定</h2>
<code>.env.local</code> はローカル開発用のファイルであり、デプロイ先には反映されません。本番環境でGoogle Analyticsを動作させるには、ホスティングサービスの管理画面から環境変数を設定する必要があります。
私の場合はCloudflare Pagesを使っているので、以下の手順で設定しました。
<ol data-line="53" class="code-line">
<li data-line="53" class="code-line">ダッシュボードで対象のプロジェクトを選択</li>
<li data-line="54" class="code-line">「設定」→「環境変数」を開く</li>
<li data-line="55" class="code-line">「本番環境」に <code>NEXT_PUBLIC_GA_ID</code> を追加し、測定IDを入力</li>
<li data-line="56" class="code-line">保存後、再デプロイを実行</li>
</ol>
<h2 id="%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" data-line="58" class="code-line"><a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 使用上の留意点</h2>
Google Analyticsを導入する際は、以下の点に注意してください。
<ul data-line="62" class="code-line">
<li data-line="62" class="code-line">プライバシーポリシー：Google Analyticsを使用する場合、プライバシーポリシーへの記載が必要です</li>
<li data-line="63" class="code-line">データの反映：計測データがGoogle Analyticsの管理画面に反映されるまで、24〜48時間かかる場合があります</li>
</ul>
<section class="footnotes">
脚注
<ol class="footnotes-list">
<li id="fn-9a35-1" class="footnote-item"><a href="https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics" target="_blank" rel="nofollow noopener noreferrer">GoogleAnalytics - @next/third-parties</a> <a href="#fnref-9a35-1" class="footnote-backref">↩︎</a>
</li>
</ol>
</section>

Next.jsのSSGブログにGoogle Analyticsを導入する