ろぼいんブログ
GoogleGoogle AnalyticsJavaScriptNext.jsReactTypeScriptWeb開発YouTubeプログラミング

Next.jsでGoogle AnalyticsやYouTube埋め込みを簡単にできる@next/third-partiesの使い方

「How to optimize third-party libraries」というタイトルのNext.js公式ドキュメントのスクリーンショット
画像：Next.js公式ドキュメント

Next.jsには、人気なサードパーティのライブラリーをパフォーマンスに配慮しながら簡単に使える公式パッケージ@next/third-partiesが用意されています。

この記事では、@next/third-partiesの使い方を解説します。

広告
目次

@next/third-partiesをインストールする

まずは、@next/third-partiesをインストールします。

@next/third-partiesは活発に開発中の実験的なパッケージなので、@latestまたは@canaryフラグを付けてインストールすることが推奨されています。

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

Google Analyticsを使う

すべてのWebページでGoogle Analyticsを使う場合は、Root Layoutで<GoogleAnalytics />コンポーネントを読み込みます。

gaIdには、Google AnalyticsのIDを設定します。

app/layout.tsx
import { GoogleAnalytics } from "@next/third-parties/google";


export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="ja">
            <GoogleAnalytics gaId="G-XYZ" />
            <body>{children}</body>
        </html>
    );
}

また、必要に応じてGoogle Analyticsのイベントを手動で送信することもできます。

広告

<GoogleAnalytics />コンポーネントはサーバーコンポーネントで利用できますが、sendGAEvent()はクライアントコンポーネントで使用する必要があります。

app/components/ShareButton.tsx
"use client";


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


export function ShareButton() {
    return (
        <button onClick={() => sendGAEvent("event", "shareButtonClicked", { value: "hoge" })}>共有する</button>
    );
}

YouTubeを埋め込む

@next/third-partiesには、YouTube動画を埋め込めるコンポーネントも用意されています。

広告

内部ではLite YouTube Embedを使っており、パフォーマンスに配慮してYouTubeを埋め込めます。

videoidには、埋め込みたい動画のIDを指定します。そのほか、paramsにパラメーターを指定することで、再生位置などの指定もできます。

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


export default function Page() {
    return <YouTubeEmbed videoid="jNQXAC9IVRw" />;
}

そのほかの機能

@next/third-partiesには、Google AnalyticsやYouTubeの埋め込みのほか、Google Tag Manager（GTM）やGoogleマップの埋め込みのサポートも含まれています。

詳しくは、公式ドキュメントを参照してください。

Guides: Third Party Libraries | Next.js
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
faviconnextjs.org
/rehype-og-card/46ee7a694d1b0efa01cc203570eddb29b12a19a23524d97b1be656c436bc085a

参考リンク

記事をシェア

Xに共有するBlueskyに共有するMisskeyに共有するLINEに共有するThreadsに共有する

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加するXのロゴ
著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。