サードパーティーライブラリ
@next/third-parties
は、Next.jsアプリケーション内で人気のあるサードパーティーライブラリを読み込む際のパフォーマンスと開発者体験を向上させるためのコンポーネントとユーティリティを集めたライブラリです。
@next/third-parties
が提供するすべて のサードパーティーの統合機能は、パフォーマンスと使いやすさを最適化しています。
はじめに
まずは、@next/third-parties
ライブラリをインストールします:
ターミナル
npm install @next/third-parties@latest next@latest
@next/third-parties
は現在アクティブに開発中の 実験的な ライブラリです。さらなるサードパーティーの統合を追加する作業を行っているため、インストール時に latest または canary フラグを使用することを推奨します。
Googleサードパーティー
Googleのサポートされているサードパーティーライブラリはすべて、@next/third-parties/google
からインポートできます。
Google タグマネージャー
GoogleTagManager
コンポーネントを使用すると、Google タグマネージャー コンテナをページに追加できます。デフォルトでは、ページのハイドレーションが発生した後、オリジナルのインラインスクリプトを取得します。
すべてのルートに対してGoogle タグマネージャーをロードさせるには、コンポーネントを直接rootレイアウトに追加し、GTMコンテナIDを渡します:
- TypeScript
- JavaScript
app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<GoogleTagManager gtmId="GTM-XYZ" />
<body>{children}</body>
</html>
)
}