Zenn
🤢

[Next.js]SpotifyAPIを使って曲分析アプリを作ってみた！

2024/02/09に公開
Next.js
React
TypeScript
Vercel
Spotify
tech

はじめに

こんにちは！ 好きなバンドは、indigo la end です🎸

そんな僕が、普段音楽を聴いているSpotifyはWebAPIを提供しており、楽曲の情報などを取得することができます。
今回、そのAPIを使って、楽曲のBPMなどを取得し、表示できるWebアプリを作ってみました！

作ったもの

今回実際に開発したものです！

最初のページは、このようになっています。
spotifyの「シェア」から共有リンクを取得し、「Submit」を押すと楽曲のページに遷移します。


次のページで、楽曲の情報を確認できます。

https://nexspo.vercel.app/

使用した技術

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Spotify API

やったこと

１: Next.jsのインストール

npx create-next-app@latest

このコマンドを実行し、アプリを作成します。
アプリの名前は適当で大丈夫です。今回は、nexspoにしました。
その後に、いろいろ表示されますが、僕はすべてYESにしました。

2: アプリの起動

cd nexspo

cdコマンドで先ほど作成したアプリのディレクトリに移動します。

npm run dev

その後、このコマンドで開発用のサーバーを起動します。
起動後は、以下のリンクでアクセスできます。
http://localhost:3000

3: Spotify for Developerに登録

https://developer.spotify.com/
このサイトから登録できます。

登録したら、「Dashboard」に行き、「Create app」ボタンを押して、アプリを作ってください。
「Redirect URI」には、http://localhost:3000を入力してください。

4: envの設定

Spotify APIのClient IDとClient secretをenvファイルに設定しましょう。
コードに直接書くと、セキュリティ面であまり良くないため、環境変数に保持すると良きです！

nexspoディレクトリ直下に.env.localファイルを作成してください。

.env.local
NEXT_PUBLIC_CLIENT_ID=[Your Client ID]
NEXT_PUBLIC_CLIENT_SECRET=[Your Client secret]

コードをgithubで管理する場合は、.env.localを間違ってあげないように、.gitignoreに次のように設定を追加しておきましょう！

.gitignore
.env.local

5: APIのアクセストークン取得

まず、axiosをインストールしましょう

npm i axios
auth.ts
import axios from 'axios';

const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
const clientSecret = process.env.NEXT_PUBLIC_CLIENT_SECRET;

async function getSpotifyToken() {
  const tokenResponse = await axios({
      method: 'post',
      url: 'https://accounts.spotify.com/api/token',
      data: 'grant_type=client_credentials',
      headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + (new Buffer(clientId + ':' + clientSecret).toString('base64'))
      }
  });
  return tokenResponse.data.access_token;
}

アクセストークンは、このように取得しました。
clientId等は、先ほど設定した.env.localから取得しています。

6: 楽曲情報の取得

auth.ts
export async function getTrackInfo(id: string) {
  const token = await getSpotifyToken();

  const response = await axios({
      method: 'get',
      url: `https://api.spotify.com/v1/tracks/${id}`,
      headers: {
      'Authorization': `Bearer ${token}`
      }
  });

  return response.data;
}

https://developer.spotify.com/documentation/web-api/reference/get-track
楽曲情報は、このAPIを使って取得しています。
id: stringで楽曲のTrackIdを指定して、データを取得します

7: Audio Featuresの取得

auth.ts
export async function getTrackFeatures(id: string) {
  const token = await getSpotifyToken();

  const response = await axios({
      method: 'get',
      url: `https://api.spotify.com/v1/audio-features/${id}`,
      headers: {
      'Authorization': `Bearer ${token}`
      }
  });

  return response.data;
}

https://developer.spotify.com/documentation/web-api/reference/get-audio-features
Audio Featuresは、このAPIを使って取得しています。

8: 取得したデータの表示

上で取得したデータをいい感じに表示するUIを作ります。
詳しくは、githubで確認してください
https://github.com/s1f10210273/nexspo/tree/main/nexspo/src/app

おわりに

今回、Next.jsでの開発は初めてで、そのアウトプットとしてこの記事を書きました。
間違っているところがあればご指摘お願いします。

Discussion