︙

Third Party Libraries

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

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

Getting Started

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

Terminal

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 を読み込むには、 root layout に直接 component を含め、GTM の container ID を渡します：

app/layout.tsx

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

app/layout.js

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

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

app/page.js

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

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

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

app/page.js

'use client'

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 をご覧ください。

名前	Type	Description
`gtmId`	必須	GTM container ID。通常は `GTM-` から始まります。
`dataLayer`	オプション	container をインスタンス化するためのデータレイヤー配列。default は empty 配列です。
`dataLayerName`	任意	データレイヤーの名称。default は `dataLayer` となります。
`auth`	任意	環境スニペットの認証パラメータ(`gtm_auth`)の Value 。
`preview`	任意	環境スニペットのための `gtm_preview` パラメータの preview の Value 。

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 をロードするには、 root layout に直接 component を含め、計測 ID を渡します。

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

app/layout.js

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

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

app/page.js

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

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

イベントの送信

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

app/page.js

'use client'

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 に渡すオプション。

名前	Type	Description
`gaId`	必須	計測 ID 。通常は`G-`から始まります。
`dataLayerName`	任意	データレイヤーの名前。default は `dataLayer`です。

Google マップ埋め込み

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

app/page.js

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 のドキュメントをご覧ください。

名前	Type	Description
`apiKey`	必須	api キー。
`mode`	必須	Map モード
`height`	任意	埋め込みの Height 。default は `auto`。
`width`	オプショナル	埋め込みの Width 。default は `auto` です。
`style`	任意	iframe に styles を渡します。
`allowfullscreen`	オプション	map の一部を全画面表示できるようにするプロパティ。
`loading`	オプショナル	default は lazy 。あなたの埋め込みが折りたたみ上部にあると分かっている場合は、変更をご検討ください。
`q`	任意	map マーカーの位置を定義します。これは map モードによっては必要になる場合があります。
`center`	オプション	map ビューの中心を定義します。
`zoom`	任意	map の初期ズームレベルを設定します。
`maptype`	任意	map のタイルをロードする type を定義します。
`language`	オプション	UI 要素の言語と、 map タイル上のラベルの display に使用する言語を定義します。
`region`	任意	地政学的な微妙さに基づいて適切な境界やラベルを display するために定義します。

YouTube Embed

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

app/page.js

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

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

Options

名前	Type	Description
`videoid`	必須	YouTube ビデオ ID。
`width`	オプション	ビデオの container の Width 。default は `auto`
`height`	オプション	ビデオ container の Height 。default は `auto`
`playlabel`	任意	プレイボタンの視覚的に隠されたラベルをアクセシビリティのために使用。
`params`	任意	ビデオプレイヤーの Params はここで定義されています。 params は query パラメータとして string に渡されます。例： `params="controls=0&start=10&end=30"`
`style`	任意	ビデオ container に styles を適用するために使用されます。