Next.js で API リクエストを proxy する

imatomix
2021年8月21日 14:24

概要

Next.js で Proxy をかますのに、ちょうど Next.js 内で収まる Next Http Proxy Middleware というのを見かけたので使ってみました。

Proxy

corsだったり、フロントには持たせたくない情報があったりで、フロントから直接サービスAPIをたたけない場合に、一度サーバーを経由してサービスAPIにアクセスする。
今回は、
  • Next.js フロントから Next.js サーバー(Proxy)にAPIリクエスト
  • Proxy からサービスAPIにリクエスト
にする。

インストール

next-http-proxy-middlewareをインストール
$ npm install next-http-proxy-middleware

スクリプト

pages/api/proxy/以下に[...all].tsファイルを作成する。
pages/api/proxy/[...all].ts
import { NextApiRequest, NextApiResponse } from "next"; import httpProxyMiddleware from 'next-http-proxy-middleware' import https from 'https' // ファイルのアップロードなどでmultipart/form-dataを使用するときの設定 export const config = { api: { bodyParser: false }, } // eslint-disable-next-line @typescript-eslint/no-explicit-any export default (req: NextApiRequest, res: NextApiResponse): Promise<any> => { const proxy = httpProxyMiddleware(req, res, { target: process.env.API_HOST, changeOrigin: true, headers: { 'x-api-key': process.env.API_KEY }, pathRewrite: { '^/api/proxy': '', }, agent:new https.Agent({ rejectUnauthorized: false }) }) // return しないと "API resolved without sending a response~"といわれるので return proxy }
これで、Next.js サーバーの /api/proxy/ 以下への全リクエストがプロキシされ、サービスAPIへリクエストされる。

API resolved without sending a response

別件で next-http-proxy-middlewareを使用した際、上記スクリプトのように return しているのにAPI resolved エラーが出る現象が発生した。APIからのレスポンスも来ており、問題はなさそうだったので、


にある通り、以下の config を追記することでエラー表示が出なくなった。
export const config = { api: { externalResolver: true, }, }