Next.jsにGoogleアナリティクスを導入したいときは、nextjs-google-analyticsを使うとすごく簡単。
まず.env.localファイルに測定IDを書く。
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-××××××××××"
Next.jsのApp Routerを使っている場合は、 現在のバージョンでは先頭に'use client'が必要となる。
ページ変移も測定する場合はtrackPageViewsを追加する。
'use client';import { GoogleAnalytics } from "nextjs-google-analytics";export function Analytics() { return <GoogleAnalytics trackPageViews />;};
このコンポーネントをlayout.tsxで使用する。
export default function RootLayout({ children }: PropsWithChildren) { return ( <html lang="ja"> <body> <Analytics /> {children} </body> </html> );}