next.jsで簡単にapiをproxyする

あるWebAPIから取得した情報を表示する、ちょっとしたWebフロントエンドを書きたくてGWのまとまった時間にnext.jsに挑戦中。

WebAPIは自前で別のサーバーが立ててあり、CORS設定しても良かったのだが、FEサーバ側でAPIをプロキシする方が安全だしAPIのホストも公開する必要がなくなるためproxyすることにした。

いくつかやり方はあるようだが、以下のように非常に設定が簡単なため、

Next.js HTTP Proxy Middlewareを使う。

GitHub - stegano/next-http-proxy-middleware: HTTP Proxy middleware available in API Middleware provided by Next.js.

HTTP Proxy middleware available in API Middleware provided by Next.js. - stegano/next-http-proxy-middleware

github.com

/api以下へのアクセスをまとめてそのままproxyするような場合, ドキュメントに推奨とある通り

next.config.jsで数行書くだけでよい。

npm install next-http-proxy-middleware

next.config.js

async rewrites() {
  return [
    {
      source: "/api/:path*",
      destination: `${process.env.API_URL}/:path*`,
    }
  ]
}

参考まで、環境変数は以下のように設定

.env.localファイル

API_URL=https://example.com/api

これだけであっさりとproxyしてくれた。すごい。