この記事では、Production と Staging 環境で別々の Google Analytics データストリームを利用する手順を紹介します。NextJS 特有の環境ファイルの扱い方や、NextJS 13 から正式に使える App Directory でも利用可能な設定例になります。
<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<h3 id="nextjs-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#nextjs-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> NextJS における環境ファイルについて</h3>
NextJS では <code>.env.local</code> <code>.env.development</code> <code>.env.production</code> の ３ 種類の環境ファイルが用意されていますが、<code>next start</code> や　　<code>next build</code> で利用される環境ファイルは <code>.env.production</code> のみです。
例えば Staging と Production 環境を用意している場合、環境ごとに <code>next build</code>　で Staging 用環境ファイルか Production 用環境ファイルを選べるほうが好ましいでしょう。しかし、NextJS では環境別に読み込む環境ファイルを指定することができないので、パッケージを利用する必要があります。
<iframe id="zenn-embedded__df06c821f3d7f" src="https://embed.zenn.studio/card#zenn-embedded__df06c821f3d7f" data-content="https%3A%2F%2Fnextjs.org%2Fdocs%2Fpages%2Fbuilding-your-application%2Fconfiguring%2Fenvironment-variables" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables</a>
<h3 id="env-cmd-%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#env-cmd-%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B" aria-hidden="true"></a> env-cmd　を導入する</h3>
<code>env-cmd</code> が環境別に環境ファイルを読み込むことを可能にしてくれます。
<div class="code-block-container"><pre><code>npm add env-cmd
</code></pre></div>このパッケージを利用して、<code>package.yaml</code>を以下のように編集することで、任意の環境ファイルを指定することが可能になります。
<div class="code-block-container"><pre><code>"build": "env-cmd -f .env.prod next build",
"build:stg": "env-cmd -f .env.stg next build",
</code></pre></div><h2 id="google-analytics-%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#google-analytics-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Google Analytics の設定</h2>
<h3 id="%E7%92%B0%E5%A2%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B" aria-hidden="true"></a> 環境ファイルを用意する</h3>
まずは、Google Analytics GA4 のデータストリームを Production と　　Staging 用に用意して、測定 ID を入手します。 
その後、<code>env-cmd</code>で指定した環境ファイルに測定　ID を入力します。
<div class="code-block-container">
<div class="code-block-filename-container">.env.prod</div>
<pre><code>NEXT_PUBLIC_GA_ID='G-[測定ID]'
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">.env.stag</div>
<pre><code>NEXT_PUBLIC_GA_ID='G-[測定ID]'
</code></pre>
</div><h3 id="gtag.ts-%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#gtag.ts-%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B" aria-hidden="true"></a> gtag.ts を用意する</h3>
後々、測定 ID を取得したり pageview を呼び出すためのコードを用意します。
<div class="code-block-container">
<div class="code-block-filename-container">/src/lib/gtag.ts</div>
<pre class="language-ts"><code class="language-ts">export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID || "";

export const existsGaId = GA_MEASUREMENT_ID !== "";

export const pageview = (path: string) =&gt; {
 window.gtag("config", GA_MEASUREMENT_ID, {
 page_path: path,
 });
};
</code></pre>
</div>ローカルで <code>next dev</code> などでテスト中は Google Analytics にデータを飛ばさないので、ローカルの環境ファイルの測定 ID を空欄にすることで　existsGaId　が false になり、後々 Google Analytics を呼び出さないような仕組みになります。
gtag の型を定義します。
<div class="code-block-container"><pre><code>npm add -D @types/gtag.js
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container">/src/types/gtag.d.ts</div>
<pre class="language-ts"><code class="language-ts">declare module 'gtag.js';
</code></pre>
</div><h3 id="google-analytics-client-component-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#google-analytics-client-component-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> Google Analytics Client Component　を作成する</h3>
先ほど作成した gtag.ts を用いて、Google Analytics を呼び出すための Client Component を作成します。NextJS 13 以降は、明示的に 'use client' と指定してクライアントサイドで実行するよう指定する必要があります。
<div class="code-block-container">
<div class="code-block-filename-container">/src/components/GoogleAnalytics.tsx</div>
<pre class="language-ts"><code class="language-ts">'use client'

import { usePathname, useSearchParams } from 'next/navigation'
import Script from 'next/script'
import { useEffect } from 'react'

import { existsGaId, GA_MEASUREMENT_ID, pageview } from '../lib/gtag'

const GoogleAnalytics = () =&gt; {
 const pathname = usePathname()
 const searchParams = useSearchParams()

 useEffect(() =&gt; {
 if (!existsGaId) {
 return
 }
 const url = pathname + searchParams.toString()
 pageview(url)
 }, [pathname, searchParams])

 return (
 &lt;&gt;
 &lt;Script
 strategy='lazyOnload'
 src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
 /&gt;
 &lt;Script id='gtag-init' strategy='afterInteractive'&gt;
 {`
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '${GA_MEASUREMENT_ID}', {
 page_path: window.location.pathname,
 });
 `}
 &lt;/Script&gt;
 &lt;/&gt;
 )
}

export default GoogleAnalytics
</code></pre>
</div><h3 id="layout.tsx-%E3%81%8B%E3%82%89-google-analytics-%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99">
<a class="header-anchor-link" href="#layout.tsx-%E3%81%8B%E3%82%89-google-analytics-%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99" aria-hidden="true"></a> layout.tsx から Google Analytics を呼び出す</h3>
最後に、app 直下の layout.tsx から Google Analytics を呼び出して、設定完了です。
<div class="code-block-container">
<div class="code-block-filename-container">/src/app/layout.tsx</div>
<pre class="language-ts"><code class="language-ts">import GoogleAnalytics from '@/components/GoogleAnalytics'

// 途中省略...

export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {
 return (
 &lt;html lang='en'&gt;
 &lt;head&gt;
 &lt;GoogleAnalytics /&gt;
 &lt;/head&gt;
 &lt;body className={zen_kaku_gothic_new.className}&gt;{children}&lt;/body&gt;
 &lt;/html&gt;
 )
}
</code></pre>
</div><h2 id="%E5%AE%A3%E4%BC%9D">
<a class="header-anchor-link" href="#%E5%AE%A3%E4%BC%9D" aria-hidden="true"></a> 宣伝</h2>
ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。
カロリーを指定してメニューを選べるので、ネタで遊んでみてください！ 
<iframe id="zenn-embedded__49fa0e2641b37" src="https://embed.zenn.studio/card#zenn-embedded__49fa0e2641b37" data-content="https%3A%2F%2Fdietgacha.net%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://dietgacha.net/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dietgacha.net/</a>
普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！ 
<img src="https://storage.googleapis.com/zenn-user-upload/8a4d4ca719c9-20230630.png" alt loading="lazy" class="md-img">
<iframe id="zenn-embedded__930da40be252c" src="https://embed.zenn.studio/card#zenn-embedded__930da40be252c" data-content="https%3A%2F%2Fkomms.co.jp%2Fbrnt" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://komms.co.jp/brnt" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://komms.co.jp/brnt</a>
<h2 id="%E5%8F%82%E7%85%A7">
<a class="header-anchor-link" href="#%E5%8F%82%E7%85%A7" aria-hidden="true"></a> 参照</h2>
<iframe id="zenn-embedded__1ceb9f8c38b1f" src="https://embed.zenn.studio/card#zenn-embedded__1ceb9f8c38b1f" data-content="https%3A%2F%2Fzenn.dev%2Fyuji%2Farticles%2Fcb4f2562cf70ae" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/yuji/articles/cb4f2562cf70ae" style="display:none" target="_blank">https://zenn.dev/yuji/articles/cb4f2562cf70ae</a> 
<iframe id="zenn-embedded__fa64a2eb05bd3" src="https://embed.zenn.studio/card#zenn-embedded__fa64a2eb05bd3" data-content="https%3A%2F%2Fqiita.com%2Fruiiixiii%2Fitems%2F2f3e3497d13ec804eb40" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://qiita.com/ruiiixiii/items/2f3e3497d13ec804eb40" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/ruiiixiii/items/2f3e3497d13ec804eb40</a>

【Next.js 13】環境ファイル別で Google Analytics を設定する

NextJS における環境ファイルについて

Google Analytics Client Component　を作成する

layout.tsx から Google Analytics を呼び出す

masa

kazuki23 (Kazuki Fukushima)

はじめまして！Masahiroと申します。 
Next.jsのGoogle Analyticsの導入について質問があります。 
今個人でアプリを作っているのですが、kazukiさんの記事を参考に作っています。 
下記のコードで
<div class="code-block-container">
<div class="code-block-filename-container"> layout.tsx</div>
<pre class="language-tsx"><code class="language-tsx">import GoogleAnalytics from '@/components/GoogleAnalytics'

// 途中省略...

export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {
 return (
 &lt;html lang='en'&gt;
 &lt;head&gt;
 &lt;GoogleAnalytics /&gt;
 &lt;/head&gt;
 &lt;body className={zen_kaku_gothic_new.className}&gt;{children}&lt;/body&gt;
 &lt;/html&gt;
 )
}
</code></pre>
</div><code>&lt;head&gt;</code>内でGoogleAnalytics コンポーネントを読み込んでいるのですが 
chromeの検証ツールで見てみると 
scriptの読み込みが<code>&lt;body&gt;</code>内に読み込まれてしまいます。 
しかし、google Analyticsは正常に計測されています(計測は本番環境のみ)
Google Analyticsを読み込んでいる場所は<code>app/layout.tsx</code>になります。 
本来読み込まれる場所は<code>&lt;head&gt;</code>で合っていますでしょうか？ 
色々と原因を調べて見たのですが、 
他に<code>&lt;head&gt;</code>に取り入れているのはSEO対策のMetadataの<code>title</code>と<code>description</code>をそれぞれのディレクトリの<code>layout.tsx</code>で書いていますがそこまで影響はないと考えています。
原因などは分かりますでしょうか？ 
ソースコードは下記になります。
github 
<iframe id="zenn-embedded__e962b0a1bf59b" src="https://embed.zenn.studio/card#zenn-embedded__e962b0a1bf59b" data-content="https%3A%2F%2Fgithub.com%2Fmasahiro96848%2Fzerone_blog" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/masahiro96848/zerone_blog" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/masahiro96848/zerone_blog</a>

Masahiroさん、コメントありがとうございます！
おっしゃる通り、<code>&lt;head&gt;</code> で <code>&lt;GoogleAnalytics /&gt;</code> を読み込んでも実際には <code>&lt;body&gt;</code> 内で読み込まれるようです。
これは <code>GoogleAnalytics.tsx</code> の <code>next/script</code> の <code>strategy</code> を <code>lazyOnload</code> や <code>afterInteractive</code> で指定しているからだと思われます。 
<iframe id="zenn-embedded__f3568f5edebf1" src="https://embed.zenn.studio/card#zenn-embedded__f3568f5edebf1" data-content="https%3A%2F%2Fnextjs.org%2Fdocs%2Fapp%2Fapi-reference%2Fcomponents%2Fscript" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://nextjs.org/docs/app/api-reference/components/script" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/app/api-reference/components/script</a>
GitHub でも類似 Issue が過去に上がっています。 
<iframe id="zenn-embedded__b001f385606ca" src="https://embed.zenn.studio/card#zenn-embedded__b001f385606ca" data-content="https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Fissues%2F26591" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/vercel/next.js/issues/26591" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vercel/next.js/issues/26591</a>
特に動作上で問題を感じていないのでこのまま運用しようと思っていますが、もし何か計測で問題があるようでしたらご指摘いただけますと幸いです！

ご返信ありがとうございます！ 
参考資料の共有もありがとうございます！
<blockquote>
これは GoogleAnalytics.tsx の next/script の strategy を lazyOnload や afterInteractive で指定しているからだと思われます。
</blockquote>
そういう挙動なんですね！
現状、google analyticsで計測が出来ていて、特に問題は出ていないです！ 
また、何か問題がありましたら相談させてください！

Discussion