【Next.js】APIルーティングを作成する

こんにちは。LiSMOtechの小谷です。

今回はNext.jsのAPIルート活用についてです。
Next.jsを少し触ったことがある人はご存知かもしれないですが、Next.jsにはデフォルトでAPIエンドポイントを用意してくれる機能があります。

今回はこのAPIルートについてみていきましょう！

また、以前の記事でもNext.jsを紹介しているので、Next.jsに興味のある方は是非読んで見てください！

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

Next.jsのチュートリアルをやってみた

Next.jsをVercelでデプロイ！

APIルーティングの確認

Next.jsの環境構築をすると初めから既にapiフォルダの直下にhello.jsがあるので、まずは試しにこれを呼んでみます。
Next.jsでは、apiフォルダの中のものを自動的にマッピングされフォルダの構造がそのままパスになります。

例えば、ローカルホストでhello.jsを呼ぶ時は以下のようになります、
localhost:3000/api/hello

では、実際にNext.jsサーバーを起動した状態で、localhost:3000/api/helloというエンドポイントにアクセスしてみましょう。
おそらく以下のようにレスポンスがかえってくると思います。

このようにapiフォルダの中にファイルがあると、自動的にAPIのエンドポイントが作成されていると思います。

動的にidを受け取る

今度は、動的APIルーティングの方法です。
APIのURLから何らかのIDを受け取って、それを使ってAPIを呼びたいときなどの想定ですね。

動的にAPIルーティングをするには、apiフォルダ内に作成するファイルを以下のようにします。
[id].js

こうすることで、このファイル内のリクエストからidを取得することができます。

試しに以下のようなファイルをapiフォルダの直下に作成して、動作を確認してみます。

// pages/api/[id].js
export default function handler(req, res) {
const { id } = req.query;
res.status(200).json({ id })
};

URLで渡したidのクエリをレスポンスとして返すものです。

localhost:3000/api/abcを開いて確認してみます。

期待通り、URLで渡した「abc」というidが返ってきてますね！

本番用のドメインに変更する

上記のものではAPIのエンドポイントのURLのドメインはlocalhost:3000 となっていて、ローカルでしか呼べないものとなっていましたので、これを変更して実際のデプロイ環境でも呼べるようにしてみましょう。

ここでは、Vercelにこのプロジェクトがあげられる前提話しますので、Vercelへのデプロイがまだの方は以下記事を参考などを参考にしてデプロイ状態までしてください。

Next.jsをVercelでデプロイ！

Vercelのダッシュボードから今回のプロジェクトを選択して、プロジェクトの管理画面に行きます。

ここの「DOMAINS」で今回使用しているドメインがわかります。これをコピーして先ほどのlocalhost:3000 を置き換えてあげればデプロイ環境でもAPIのルーティングはOKです！

まとめ

今回はNext.jsにデフォルトで備わっているapiルーティング機能を試してみました。

動的なルーティングも可能なため、使いやすそうですね。ぜひ活用してみてください！