---
title: Next.jsでGoogle AnalyticsやYouTube埋め込みを簡単にできる@next/third-partiesの使い方
url: https://roboin.io/article/2025/08/26/how-to-use-next-third-parties-to-easily-add-google-analytics-and-youtube-embeds-in-next-js/
description: Next.jsには、人気なサードパーティのライブラリーをパフォーマンスに配慮しながら簡単に使える公式パッケージ@
  next/third-partiesが用意されています。この記事では、@next/third-partiesの使い方を解説します。
publishedDate: 2025-08-26T10:37:40.627Z
modifiedDate: 2025-08-26T10:37:40.627Z
thumbnail: https://roboin.io/api/media/file/next-third-parties-thumbnail.png
thumbnailAlt: 「How to optimize third-party libraries」というタイトルのNext.js公式ドキュメントのスクリーンショット
thumbnailCaption: 画像：[Next.js公式ドキュメント](https://nextjs.org/docs/app/guides/third-party-libraries)
---

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

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

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

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

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

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

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

## Google Analyticsを使う

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

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

```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()`はクライアントコンポーネントで使用する必要があります。

```tsx
"use client";

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

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

:::caution
`<GoogleAnalytics />`コンポーネントを読み込むと、自動的にページビューが記録されるため、手動でページビューのイベントを送信する必要はありません。

また、Google Analyticsの拡張計測が有効になっている場合（おそらくデフォルトで有効）、Next.jsのルート間のクライアントサイドナビゲーションが発生すると、自動的にページビューが記録されます。

そのため、手動でページビューのイベントを送信すると、ページビューが二重に記録されてしまうことに注意してください。
:::

## YouTubeを埋め込む

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

内部では[Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed)を使っており、パフォーマンスに配慮してYouTubeを埋め込めます。

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

```tsx
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マップの埋め込みのサポートも含まれています。

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

[https://nextjs.org/docs/app/guides/third-party-libraries](https://nextjs.org/docs/app/guides/third-party-libraries)

## 参考リンク

- [Guides: Third Party Libraries | Next.js](https://nextjs.org/docs/app/guides/third-party-libraries)