Next.jsのAPI RoutesとAxiosについて
こんにちは。CURUCURUエンジニアの水谷です。 今回はNext.jsのAPI Routesに関してまとめていきたいと思います。
先日にヘッドレスCMSのStrapiとNext.jsを使った処理を書いていたのですが、 通信周りの知識が乏しく色々と調べていました。
今回はそこで得た知識と自分のアウトプットを含めて書いていきたいと思います。
StrapiとNext.jsの処理
内容自体は簡単です。 Strapi側でデータを作るとAPIで用意してくれるので、Next.jsからそのAPIを叩いて作成したデータを取ってくるという作業です。
Strapiは以前から使用されていて、データを取得する処理は既存の処理にあるので同じように書けば良いと思っていたのですが、いまいちよくわからないものもありました。
- Axios
- Api Routes
この辺りの知識が自分は浅めでした。 自分の中では、APIを叩いてその応答データをフロントエンドに組み込めば良いと思っていましたが、既存処理は叩くだけでも結構気を使って書かれていることに気づきました。
API Routesの取り扱い
そもそもこのAPI Routesがよくわかっていなかったのですが、Next.jsにはAPI Routesという仕組みがあります。 API Routesとはフロントエンドからアクセス可能なAPIを作成できる仕組みのことです。
pages/api配下にAPI用のコードを書くことで利用できます。
これにより、フロントエンド側の処理とAPIでの処理とを分けることが出来るので、そこに利点があるのかなと思いました。
データの受け渡しの流れ
ここでAPIを叩くときに、pages/apiにAPIを叩く処理を入れてそれで完了だと思っていましたが、実はそうではなくもう少し気を使って実装していました。
APIを叩く処理を使うときにAxiosを使っています。Axiosは非同期にHTTP通信をする際に便利なライブラリで、PromiseベースのHTTPクライアントです。
最初はAxiosもよくわかっていなかったので、そこも調べていました。 下記はざっくりAxiosを使ったときの処理です。
import axios, { AxiosInstance } from 'axios';
const client: AxiosInstance = axios.create({
baseURL: 'http://localhost:3001',
withCredentials: true,
headers: { 'Content-Type': 'application/json' },
timeout: 20000,
});
const getData = async (): Promise<CustomAxiosResponse> => {
try {
const response: AxiosResponse = await client.get('/api/hello');
return response.data
} catch (error) {
console.log(error);
throw error;
}
};
上記はAxiosをインスタンスを生成して、それを使ってデータを取得するときの例です。
インスタンスの生成をしている部分ですが、
- ・baseURL：APIを叩く際にペースとなるURL
- ・withCredentials：trueにするとCORSリクエストを行う際にクッキーやHTTPを共有できる
- ・Content-Type：JSON形式でデータをやり取りできる。他に
multipart/form-dataというのもあり、フォームデータやファイルアップロードが可能
そして、もう１つ気を使ってそうなところが、処理の流れでした。 HTTP通信用のAPIの処理 → API Routes → HTTP通信用のAPIの処理
上記の処理の流れがあり、最初は行ったり来たりでよく分からなかったのですが、 Next.jsのサーバー側（クライアントとの通信をするコンテナ）を通る必要があり、そのコンテナとプライベートなコンテナ（APIのアクセス先）で通信をするために、一度API Routesを経由して通信をしていることがわかりました。
API Routeに関して
せっかく調べたので、API Routeのメリットに関していくつかまとめておきます。
外部のAPIへのアクセス
フロントエンドからNext.jsのAPI Routeのアクセスはもちろんですが、そこから外部のAPIにアクセスすることも可能です。 今回のStrapiの例は、このパターンに当てはまります。
SSRによるアクセス
Next.jsのgetServerSidePropsを使うことでSSRの処理をすることができますが、その処理の中でもAPI Routesへのアクセスが可能です。
データベースへのアクセス
API Routesからデータベースにアクセスして、データを取得することができます。
まとめ
API関連は苦手意識があったのですが、何が苦手なのかもうまく表現できていなかったので、今回の開発はそこをまとめる良い機会でした。 実際に通信ができてデータのやり取りが出来ると感動がありますね。200という数字が好きな人は多いんじゃないでしょうか。
メンバー募集
CURUCURUでは開発メンバーを募集中です。 CURUCURUの開発に興味があったり、モダンな開発環境で挑戦してみたいという方がいましたら、ぜひこちらも覗いてみてください！
