WordsAPIを使って英単語の詳細情報を取得し、Next.jsのアプリ画面に表示するまで

記事内容

WordsAPIを使って英単語の詳細情報を取得し、Next.jsのアプリ画面に表示するまでの備忘録

WordsAPIについて

WordsAPIと検索すると
https://www.wordsapi.com/
この画面がgoogleのトップ検索で出てくるが、こちらはMashape（現在はRapidAPI）が提供していたAPIにアクセスするためのものです。

MashapeはRapidAPIに取って代わられ、新しいエンドポイントやセキュリティ仕様が導入されたため、新しいプラットフォームを使用することが推奨されているとのこと。

なのでWordsAPIを使用するには、RapidAPIというプラットフォームを通じてアクセスする必要があります。

WordsAPIのAPIキー取得手順

RapidAPIにサインアップします。
ログインしたら、WordsAPIのページにアクセスします。

"Pricing" タブをクリックして、適切なプランを選択します。一部の利用は無料ですが、プランによっては有料となります。

"Subscribe" ボタンをクリックして、WordsAPIをサブスクライブします。
サブスクリプションが完了したら、RapidAPI ダッシュボードの右上にあるプロファイルアイコンから "My apps" をクリックします。

WordsAPIがリストされているはずです。"Show API Key" をクリックして、APIキーを取得します。
取得したAPIキーをコード中のWORDS_API_KEYの部分に代入してください。これにより、WordsAPIへのリクエストが有効になります。

あとはこういうふうにAPI叩くだけです。

const getWordDetails = async () => {
    try {
      const WORDS_API_KEY = process.env.NEXT_PUBLIC_WORDS_API_KEY;
    
      const response = await axios.get(
        `https://wordsapiv1.p.rapidapi.com/words/${englishWord}`,
        {
          headers: {
            "X-RapidAPI-Host": "wordsapiv1.p.rapidapi.com",
            "X-RapidAPI-Key": WORDS_API_KEY,
          },
        }
      );
      console.log("wordsAPI", response);
    } catch (error) {
      console.error("データの取得中にエラーが発生しました:", error);
    }
};

以下サイトのサンプルに載っている通り、意味、例文、対義語、類義語などの情報がレスポンスに入ってます。
https://www.wordsapi.com/