Next.js + YouTube Data API でchannelの情報を取得し表示してみる

はじめに

Next.jsでYouTube Data APIに触ってみたいと思います。
下のように任意のチャンネルの情報を表示するまでの手順を記載します。

表示例

ドキュメント

Youtube Data API Channels：　https://developers.google.com/youtube/v3/docs/channels

環境

• macOS Big Sur (v11.2.1)
• Node.js (v16.3.0)

API Keyを取得する

まずは、YouTube Data APIでプロジェクトを作成し、API keyを取得しましょう。

• Google Cloud プラットフォームにアクセスして、新規プロジェクトを作成します。
• メニュー：ライブラリからYouTube API : YouTube Data APIを選択し、APIを有効にしましょう。
• 認証情報を作成 ボタンをクリックするとAPIKeyが発行されます。
  詳しくは Youtube Data APIの取得手順を見るとわかりやすいかもしれません。

発行したAPIkeyは下の手順で.env.localに記入します。

Next.jsでの作業

• プロジェクトを作成します。

yarn create next-app --typescript next-youtube-channel

• プロジェクト下に移り、root下に.env.localを作成。中身を書きます。

YOUTUBE_API_KEY=<取得したAPI Key>

• 次にApp.tsxを書き換えましょう。ここでは静的ページとしてビルドするためgetStaticPropsの中でAPIを呼び出しています。書き方はあまり自信がないので、参考程度にしておいてください。

App.tsx

import { GetStaticProps } from "next";

type Props = {
  channel_data: any;
};

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const channelID = "<ここに表示したいチャンネルのIDを入力>";

  const res1 = await fetch(
    "https://www.googleapis.com/youtube/v3/channels?part=" +
      "snippet" +
      "&id=" +
      channelID +
      "&key=" +
      process.env.YOUTUBE_API_KEY
  );
  const data1 = await res1.json();

  const res2 = await fetch(
    "https://www.googleapis.com/youtube/v3/channels?part=" +
      "brandingSettings" +
      "&id=" +
      channelID +
      "&key=" +
      process.env.YOUTUBE_API_KEY
  );
  const data2 = await res2.json();

  const res3 = await fetch(
    "https://www.googleapis.com/youtube/v3/channels?part=" +
      "statistics" +
      "&id=" +
      channelID +
      "&key=" +
      process.env.YOUTUBE_API_KEY
  );
  const data3 = await res3.json();

  if (!data1 || !data2 || !data3) {
    return {
      notFound: true,
    };
  }
  const channel_data = [data1, data2, data3];

  return {
    props: { channel_data },
  };
};

const Index: React.FC<Props> = ({ channel_data }) => {
  const snippet_data = channel_data[0].items[0].snippet;
  const brandingSettings_data = channel_data[1].items[0].brandingSettings;
  const statics_data = channel_data[2].items[0].statistics;

  return (
    <div style={{ margin: "1rem" }}>
      <h2>Snippet</h2>

      {channel_data[0].items && (
        <ul>
          <li>Title：{snippet_data.title}</li>
          <li>cunstomUrl：{snippet_data.customUrl}</li>
          <li>Description：{snippet_data.description}</li>
          <li>
            Thumbnails：
            <img
              src={snippet_data.thumbnails.default.url}
              alt={snippet_data.title}
            />
          </li>
        </ul>
      )}

      <h2>brandingSettings</h2>

      {channel_data[1].items && (
        <div>
          bannerExternalUrl：
          <img
            src={brandingSettings_data.image.bannerExternalUrl}
            alt={brandingSettings_data.channel.title + "Banner"}
          />
        </div>
      )}

      <h2>statistics</h2>

      {channel_data[2].items && (
        <ul>
          <li>
            再生回数：
            {statics_data.viewCount}
          </li>
          <li>
            登録者数：
            {statics_data.subscriberCount}
          </li>
          <li>
            アップロードされた動画の数：
            {statics_data.videoCount}
          </li>
        </ul>
      )}
    </div>
  );
};

export default Index;

終わりに

以上です。Youtubeの任意のチャンネルの情報で何かしてみたいという方の力になれれば嬉しいです。ありがとうございました。

参考

https://note.com/saitohtm/n/nb9020547d037
https://su-gi-rx.com/archives/4528