Next.jsにgoogle analyticsを導入する方法

まず事前にgoogle analyticsのgaIdを取得する

G-xxxxみたいなやつ

公式ドキュメント

Next.jsがrouterがPage Routerの場合

https://nextjs.org/docs/pages/guides/third-party-libraries

Next.jsがrouterがApp Routerの場合

https://nextjs.org/docs/app/guides/third-party-libraries

まず@next/third-partiesを追加する。

npm install @next/third-parties@latest

私はPage Routerだったので_app.tsxに以下を追加

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

gtmIdの箇所は自分のgaIdに差し替え