Next.jsでAPI連携してみよう

LiSMOtechの小谷です。前回作成したNext.jsのチュートリアルを使ってAPI連携してみましょう。

今回は使用するAPIは気象庁が提供するもので、天気予報データを返してくれます。

提供して頂いているのは気象庁らしいですが、大々的におしているわけではないようで、レスポンシブのデータの解説などはあまり分からないですね。。。

ですが、登録不要ですぐ呼べるので、今回はテストとしてこちらを使用しようと思います。

npm install swr

API呼び出し

Next.jsではpages\apiの中にあるものは/api/××とマッピングされ、呼び出すことが出来るようです。

まず、pages\apiの中に適当なファイルを作成します。weather.jsというものを作成しました。

中身は初めにあったhello.jsを参考に以下のようにしました。

export default async function handler(req, res) {
  // URLの130000は東京を表しているらしいです
  const respose = await fetch('https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json');  
  const data = await respose.json();

  res.status(200).json({ data })
}

次に、呼びたいファイルで次のように書きました。

import useSWR from 'swr'

function fetcher(url) {
  return fetch(url).then(r => r.json());
}

export default function ××() {
  const { data, error } = useSWR("/api/weather", fetcher);
  if (error) console.log(error)
  if (data) console.log(data)

  return (

    // 省略

  )

}

SWRを使うと簡潔に書けていいかもですね。

これでコンソールログを確認すると、以下のようにデータが出ていると思います。

今回はSWRを使った箇所でfetcherを書きましたが、これは省略出来たりとかもするみたいです。

まとめ

Next.jsでAPI連携をしてみました。簡単に連携の実装できるのでよいですね！

また、今回使用したSWRは簡潔にAPIのデータ取得を書けるだけでなく、他にもReduxなしで状態管理も出来たり、気の利いたオプションなどあったり使い勝手がよさそうです。