Next.jsでYouTube動画の埋め込みをする方法のメモです。
こちらの記事内で実際にYouTube動画の埋め込みを実装しました。

やり方

ターミナルで以下のコマンドを実行して、@next/third-partiesをインストール。
@next/third-partiesはサードパーティの提供する機能を利用するためのNext.js用ライブラリです。

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

YouTube Embedコンポーネントに埋め込みたい動画のVideo IDを渡す。
Video IDは該当動画のURLのクエリパラメータv=以降の値から取得できます。
PCブラウザの場合は、動画プレイヤー上で右クリック→詳細統計情報からも取得可能です。

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

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

実装すると下のようにYouTubeの動画が埋め込まれました。あらお手軽。

ちなみに

最初は@next/third-partiesを導入せず、<iframe>タグで埋め込みの実装を試みましたが、CORSエラーが発生しました。
軽く調べてみると、どうやらCORSエラーを解消するのは難しそうだったので@next/third-partiesを導入しました。

結果的にこちらのほうが実装もラクだったので、良かったのかもしれません。

参考サイト

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries
https://qiita.com/g0zarre/items/14b3c8d01f8b63914b4e