Next.jsでYouTubeの埋め込み！高速読み込み

2024/05/28

Google Tag ManagerのタグをどうやってNext.jsで読み込めせようか調べていたところ、
Next.js公式で@next/third-partiesというライブラリを提供していたので、
その使い方を紹介しようと思います。

@next/third-partiesは、Next.jsアプリケーションで一般的なサードパーティライブラリの読み込みパフォーマンスと開発者エクスペリエンスを向上させるためのコンポーネントとユーティリティのコレクションを提供するライブラリです。

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

インストール

はじめるには、@next/third-partiesライブラリをインストールします。

npm install @next/third-parties@latest

@next/third-partiesは現在実験的なライブラリであり、積極的に開発が進行中です。
より多くのサードパーティの統合を追加する作業中ですので、最新またはキャナリーフラグを使用してインストールすることをお勧めします。

YouTube Embed コンポーネント

YouTubeEmbedコンポーネントを使用すると、YouTubeの埋め込みを読み込んで表示することができます。
このコンポーネントは、実質的には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" />
}

videoId は YouTube の URL に含まれていて、次のような箇所に埋まっている値です。

https://www.youtube.com/watch?v={videoId}
https://youtu.be/{videoId}
https://www.youtube.com/embed/{videoId}

コンポーネントのオプション

YouTube Embedに渡すオプションのリストについては、次のとおりです。

videoid (必須): YouTubeビデオのID。
width (オプション): ビデオコンテナの幅。デフォルトはautoです。
height (オプション): ビデオコンテナの高さ。デフォルトはautoです。
playlabel (オプション): アクセシビリティのための再生ボタンの視覚的に非表示のラベル。
params (オプション): ここで定義されたビデオプレイヤーのパラメータ。パラメータはクエリパラメータ文字列として渡されます。例: params="controls=0&start=10&end=30"
style (オプション): ビデオコンテナにスタイルを適用するために使用されます。