🐕

Nextjs14でGoogleアナリティクスを入れるなら公式ライブラリがいい

2024/02/22に公開

Google Analytics

Next.js

tech

上記の公式ページにある通り、

// app/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>
  )
}

こんな感じで書くだけなので楽。ライブラリのインストールは、
yarnを使っているなら
yarn add @next/third-parties@latest
npmを使っているなら
npm install @next/third-parties@latest
でできる。

なお、自分はgaIdを環境変数として

// app/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={`${process.env.NEXT_PUBLIC_GA_ID}`} />
    </html>
  )
}

と書いている。

Discussion