18:I[77390,["8087","static/chunks/0e762574-63cc7070eb67514d.js","5479","static/chunks/795d4814-308cb8b661be0148.js","6711","static/chunks/8e1d74a4-238bd25e4c0ab2d5.js","3380","static/chunks/479ba886-5b681e51e74ab0c8.js","7128","static/chunks/52ab8b6c-2bea8abd4c5122f4.js","6783","static/chunks/6783-481edd7e33914d0e.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","6429","static/chunks/6429-b97995ec4bea9f73.js","9103","static/chunks/9103-04518a5959bcbd58.js","1426","static/chunks/app/%5Blocale%5D/(app)/blog/%5Bcategory%5D/%5BpostId%5D/%5Bslug%5D/page-eab5b4328929eb1c.js"],"default"] 19: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