Next.js の Script コンポーネントで Google Analytics を導入

全ページを計測するため、人間学習ノートにもGoogleアナリティクス（GA4）を導入しました。 Next.jsのScriptコンポーネント（next/script）をインポートすることで、スクリプトの読み込みタイミングをフレームワーク側で最適化してくれるようです。

app/layout.tsx

import Script from 'next/script' // Scriptコンポーネント

// ...（中略）

export default function RootLayout({ children }) {
  return (
    <html lang="ja">

      {/* GAトラッキングコード */}
      <Script src="https://www.googletagmanager.com/gtag/js?id=G-0PNW8YF93Y" strategy="afterInteractive" />
      <Script id="google-analytics" strategy="afterInteractive">{`
        window.dataLayer = window.dataLayer || []
        function gtag(){dataLayer.push(arguments)}
        gtag('js', new Date())
        gtag('config', 'G-XXXXXXXX')
        `}
      </Script>


      <body className={`${inter.variable} ${notoSansJP.variable} ${mPlusRounded.variable}`}>
        {children}
        <Footer />
      </body>

    </html>
  )
}

尚、Next.js の <Script> コンポーネントはstrategy="afterInteractive" を指定することで、

メインコンテンツの読み込み後にGAを実行するように調整される。
<head> の外に置いても自動で適切な場所に挿入される。

このノートは自分用なので集客とか分析することはないと思いますが、念のため実装しました。