fetch による Bing Custom Search API の叩き方

まず Bing Search Services は Cognitive Services Bing Custom Search に移行中であるが、いずれの Bing Custom Search API（Bing Web Search API と混同しないように）のドキュメントにも非推奨となっているjsライブラリrequestによる記法しか書いてない（2021年8月16日現在）。

https://docs.microsoft.com/ja-jp/bing/search-apis/bing-custom-search/quickstarts/rest/nodejs

今回はNext.js（React）を使っていたが、fetch自体はAjax？としてjs全てに共通する話であり、Next.js v11 においては、node-fetchというのが標準で付いているっぽく、下記のようにシンプルに書けた。

pages/search.tsx

export default function SearchResultShow() {
  useEffect(() => {
    var subscriptionKey = process.env.NEXT_PUBLIC_BING_SUBSCRIPTION_KEY;
    var customConfigId = process.env.NEXT_PUBLIC_BING_CUSTOM_CONFIG_ID;
    var searchTerm = 'microsoft';
    var url = 'https://api.bing.microsoft.com/v7.0/custom/search?' + 'q=' + searchTerm + "&" + 'customconfig=' + customConfigId

    var info = {
      headers: {
          'Ocp-Apim-Subscription-Key' : subscriptionKey
      }
    }
    
    fetch(url, info)
      .then(res => res.json())
      .then(data => {
      console.log(data)
    })

  },[])
  
  return (
	  <div>This is search result page.</div>
  )

useEffect()は何回もリクエストを送らないように付けたけどいらないかも。実用としてはgetStaticProps()などの中で読んでやりdataを渡してあげたり、環境変数もNEXT_PUBLIC_接頭辞を外してやったほうが綺麗で安全で速いはず。