Third Party Libraries

@next/third-parties は、人気のあるサードパーティライブラリをあなたの Next.js アプリケーションにロードするためのパフォーマンスと development 者体験を向上させる components とユーティリティのコレクションを提供するライブラリです。

@next/third-parties が提供するすべてのサードパーティ統合は、パフォーマンスと使いやすさに最適化されています。

Getting Started

始めるには、@next/third-parties library をインストールしてください。

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

@next/third-parties は現在、アクティブな development の下で実験的な library として取り組んでいます。より多くのサードパーティ製品の統合を進めている間、最新版または canary フラグを使用してインストールすることをお勧めします。

Google Third-Parties

Google からのすべてのサポートされているサードパーティライブラリは、@next/third-parties/googleからインポートできます。

Google Tag Manager

GoogleTagManagerの component は、ページにGoogle Tag Manager の container を作成することができます。 default では、ページで hydration が発生した後に元のインラインスクリプトを取得します。

すべての routes に Google Tag Manager をロードするには、カスタムの_appに直接 component を含め、GTM の container ID を渡します：

import { GoogleTagManager } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

単一の route の Google Tag Manager を読み込むためには、Page ファイルに component を含めてください。

import { GoogleTagManager } from '@next/third-parties/google'

export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

イベントの送信

sendGTMEvent関数は、dataLayer の object を使用してイベントを送信することにより、ページ上のユーザーのインタラクションを追跡することができます。この関数を動作させるためには、<GoogleTagManager /> の component を、親の layout 、Page、または component のいずれかに含めるか、同じファイル内に直接含める必要があります。

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

関数に渡すことができるさまざまな変数とイベントについては、タグマネージャの開発者ドキュメンテーション を参照してください。

Options

Google Tag Manager に渡す Options。 options の完全なリストについては、Google Tag Manager docs をご覧ください。

Google Analytics

GoogleAnalytics の component を使用すると、Google タグ(gtag.js)を介して、Google Analytics 4 をページに含めることができます。 default では、ページ上でハイドレーションが発生した後に元の scripts を取得します。

推奨事項: もし Google Tag Manager がすでにアプリケーションに含まれている場合、Google Analytics を別の component として含めるのではなく、直接 Google Tag Manager を使用して Google Analytics を設定することができます。詳細については、Tag Manager とgtag.jsの違いに関するドキュメント を参照してください。

全ての routes に Google Analytics をロードするには、ユーザー定義の _app に直接 component を含め、測定 ID を渡します：

import { GoogleAnalytics } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleAnalytics gaId="G-XYZ" />
    </>
  )
}

単一の route に Google Analytics を読み込むためには、あなたの Page ファイルに component を含めてください：

import { GoogleAnalytics } from '@next/third-parties/google'

export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

イベントの送信

sendGAEvent関数は、dataLayer object を使用してイベントを送信することにより、ページ上のユーザーのインタラクションを測定するために使用できます。この関数が動作するためには、<GoogleAnalytics /> component が親 layout 、Page、もしくは component 、または直接同じファイルに含まれていなければなりません。

import { sendGAEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

イベントパラメーターについて詳しく知るために、Google の Analytics の開発者向けドキュメンテーション を参照してください。

ページビューの追跡

Google Analytics は、ブラウザの履歴の状態が変わると自動的にページビューを追跡します。これは、クライアントサイドのナビゲーションが Next.js routes 間で行われると、設定なしでページビューデータが送信されることを意味します。

クライアントサイドのナビゲーションが正しく測定されていることを確認するには、管理パネルで Enhanced Measurement プロパティが有効になっていること、及び Page changes based on browser history events チェックボックスが選択されていることを確認してください。

注意: pageview events を手動で送信することを決定した場合、重複したデータを避けるために default の pageview メジャメントを無効にしてください。詳細については、Google Analytics の開発者ドキュメント を参照してください。

Options

<GoogleAnalytics> component に渡すオプション。

Google マップ埋め込み

GoogleMapsEmbed component は、ページにGoogle Maps Embed を追加するために使用できます。 default では、loading 属性を使用して、折りたたみの下にエンベッドを遅延ロードします。

import { GoogleMapsEmbed } from '@next/third-parties/google'

export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

Options

Google Maps Embed に渡す options。全ての options 一覧については、GoogleMapEmbed のドキュメント をご覧ください。

YouTube Embed

YouTubeEmbedの component は、YouTube の埋め込みをロードして display するために使用できます。この component は、内部で lite-youtube-embed を使用することにより、より速くロードします。

import { YouTubeEmbed } from '@next/third-parties/google'

export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

Options