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

公開日:

2026-01-05

next.js

プログラミング

Next.jsのSSGブログでアクセス解析をしたかったので、Google Analyticsを導入しました。備忘録として残します。

測定IDの取得

まず、Google Analytics 4（GA4）の測定IDを取得します。Google Analyticsの管理画面から「データストリーム」を選択し、ウェブストリームの測定ID（G-XXXXXXXXXXの形式）をコピーしてください。

環境変数ファイルに測定IDを追加します。

.env.local

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

NEXT_PUBLIC_ プレフィックスを付けることで、クライアントサイドからもアクセス可能になります。

@next/third-partiesのインストール

Next.js 14以降では、@next/third-parties パッケージを使うことでGoogle Analyticsを簡単に導入できます^[1]。

npm install @next/third-parties

_app.tsxへの組み込み

Pages Routerの場合、_app.tsx に GoogleAnalytics コンポーネントを追加します。

pages/_app.tsx

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 (
    <>
      <Component {...pageProps} />
      {process.env.NODE_ENV === 'production' && GA_ID && (
        <GoogleAnalytics gaId={GA_ID} />
      )}
    </>
  )
}