Zenn
📌

Next.jsでGoogleAnalyticsを使う

に公開
Google Analytics
Next.js
tech

色々な手段がありますがAnalyticsを利用する場合、Googleから提示されたタグをそのままコピペした場合エラーになります。公式から利用する手順が出ているので、そちらを使いましょう。

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

専用のパッケージをインストールする

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

importして<BODY>タグの後に設定します。

layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

上記対応することでAnalytics上でもアクセス実績を確認できます。

Discussion