15:I[77390,["5479","static/chunks/795d4814-308cb8b661be0148.js","8087","static/chunks/0e762574-94c91547c69ce74e.js","6711","static/chunks/8e1d74a4-238bd25e4c0ab2d5.js","3380","static/chunks/479ba886-5b681e51e74ab0c8.js","7128","static/chunks/52ab8b6c-2bea8abd4c5122f4.js","6783","static/chunks/6783-393ae04374510300.js","3701","static/chunks/3701-77048295a965bf15.js","6874","static/chunks/6874-4d689544f036b1df.js","3063","static/chunks/3063-d16090c6374e9d5b.js","7502","static/chunks/7502-e9da82be62ad874d.js","8367","static/chunks/8367-7e439dd1a28bb12f.js","9103","static/chunks/9103-bca0000dd091fad5.js","7741","static/chunks/app/(app)/blog/%5Bcategory%5D/%5BpostId%5D/%5Bslug%5D/page-cb84e9635bfcf1bc.js"],"default"] 16:T6f8,

Nextjsでのプロジェクトも問題なく進んで来たので,GoogleAnalyticsを埋め込もうかと。

調べたらいろんな情報が出てきたが, Nextjsから公式でモジュールが出ている模様。

How to optimize third-party libraries

npm install @next/third-parties@latest next@latest

他の記事ではlatestをつけていなかったりしたが, まだ開発中なのでつけるべきと注意書きがあった。

インストールしてからルートのlayout.jsを以下のように修正すればすぐに反映されました。

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

念の為gtmIdは直書きではなくenvに書いといたほうがよいのかな。

GTMIDは