Next.jsで作られたサイトでYouTube Data API V3をブラウザからぶっ叩きたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2FiStock-1167885500.webp?alt=media&token=f72f01d1-a0c6-4a87-a247-a40b3bc88a8b)
弊社のプロジェクトでYouTube Data API V3を使用するタスクが発生したのでメモしました。
YouTube Data APIをNext.jsで使用します。
GCPでプロジェクトを作成し、YouTube Data API V3を有効にしAPIのkey(認証情報)を取得しておきます
参考ドキュメント
まずはAPI keyをNext.js側に登録します。
.env
にAPI keyを記述します。
YOUTUBE_DATA_API_V3_KEY = "XXXXXXXXXXXXXXXX_YOU_NO_API_KEY_XXXXXXX"
next.config.jsにも追記します。
module.exports = {
env: {
YOUTUBE_DATA_API_V3_KEY: process.env.YOUTUBE_DATA_API_V3_KEY
}
}
ではAPIを叩いていきます。
こちらのサンプルを参考に実装しました。
まずは、「JavaScript用のGoogle APIのクライアントライブラリ」を読み込みます。
こちらのドキュメントを参考に実装しました。
注意点は「JavaScript用のGoogle APIのクライアントライブラリ」はnpmにありません。
npmにはnode.js用のライブラリがあるので誤ってinstallしない用にします。(私は、誤ってinstallしてしまい、エラーが出まくってしまいました。)
CDNのパスをpages/_document.tsx
を作成し追記します。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyApp extends Document {
render() {
return (
<Html lang="ja">
<Head>
</Head>
<body>
<Main />
<NextScript />
<script src="https://apis.google.com/js/api.js"></script> // JavaScript用のGoogle APIのクライアントライブラリ用のCDN
</body>
</Html>
)
}
}
export default MyApp
「JavaScript用のGoogle APIのクライアントライブラリ」を使用する準備ができました。
APIを叩く処理をpages/index.tsx
上に実装していきます。
APIをloadするために下記を追記します。
const start = () => {
gapi.client.init({
apiKey: process.env.YOUTUBE_DATA_API_V3_KEY,
}).then(result => {
// こちらでYouTube APIをイニシャライズします。
gapi.client.load('youtube', 'v3', () => {
console.log('OK');
});
}).then(response => {
// console.log(response.result);
}, reason => {
console.log('Error: ' + reason.result.error.message);
});
}
gapi.load('client', start);
しかしながら、YouTube APIをイニシャライズするところまでできたのですが、この先がどうして良いかわからなくなってしまいました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fzzz-0.png?alt=media&token=aeb8ab1e-4e62-4b5b-afb2-0b8cfc83e833)
困っていたところ英語版のGoogleで下記のサンプルサイトを発見しました!
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fzzz-1.png?alt=media&token=6c9007b8-9bcd-432f-89da-b8fee8d46631)
サンプルを参考に、検索関数を作成しました。
/**
* YouTube検索関数
* @param {String} query 検索したい文字列
*/
const search = (query) => {
console.log(gapi.client.youtube)
gapi.client.youtube.search.list({
q: query,
part: 'snippet'
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
}
作った関数を追記します。
const start = () => {
gapi.client.init({
apiKey: process.env.YOUTUBE_DATA_API_V3_KEY,
}).then(result => {
// こちらでYouTube APIをイニシャライズします。
gapi.client.load('youtube', 'v3', () => {
search('Test'); // こちらに追記しました。
});
}).then(response => {
// console.log(response.result);
}, reason => {
console.log('Error: ' + reason.result.error.message);
});
}
ではブラウザを更新します。おお無事にデータが返ってきました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fzzz-2.png?alt=media&token=6ca401fc-d6d1-4516-bad3-d759ecb20ab9)
ひと安心しました。
これからAPIを活用していきたいです。
お読みいただきありがとうございました。