trafficstars

Next.js HTTP Proxy Middleware

NPM License NPM Downloads

HTTP Proxy middleware available in API Middleware provided by Next.js.

Installation

The easiest way to install next-http-proxy-middleware is with npm.

npm install next-http-proxy-middleware

Alternately, download the source.

git clone https://github.com/stegano/next-http-proxy-middleware.git

Features

This middleware is implemented using the http-proxy library. You can use the existing options provided by http-proxy. And you can rewrite the api path using pathRewrite, an additional option provided by this middleware.

http-proxy options

`pathRewrite` option

Replaces URL information matching the pattern with another string.
- Priority is determined in the order entered in the array.
- If the request URL matches the pattern pathRewrite.patternStr replace the URL string with the value pathRewrite.replaceStr.

`onProxyInit` option

You can access the http-proxy instance using the onProxyInit option. See the example below.

const handleProxyInit = (proxy: httpProxy) => {
  /**
   * Check the list of bindable events in the `http-proxy` specification.
   * @see https://www.npmjs.com/package/http-proxy#listening-for-proxy-events
   */
  proxy.on('proxyReq', (proxyReq, req, res) => {
    ...
  });
  proxy.on('proxyRes', (proxyRes, req, res) => {
    ...
  });
};

export default async (req: NextApiRequest, res: NextApiResponse) 
  => httpProxyMiddleware(req, res, {
    ...
    target: 'http://example.com',
    onProxyInit: handleProxyInit,
  }
);

Example

Refer to the following for how to use Next.js API Middleware

Next.js API Middlewares Guide

// pages/api/[...all].ts
export const config = {
  api: {
    // Enable `externalResolver` option in Next.js
    externalResolver: true,
  },
}

export default (req: NextApiRequest, res: NextApiResponse) => (
  isDevelopment
    ? httpProxyMiddleware(req, res, {
      // You can use the `http-proxy` option
      target: 'https://www.example.com',
      // In addition, you can use the `pathRewrite` option provided by `next-http-proxy-middleware`
      pathRewrite: [{
        patternStr: '^/api/new',
        replaceStr: '/v2'
      }, {
        patternStr: '^/api',
        replaceStr: ''
      }],
    })
    : res.status(404).send(null)
);

externalResolver is an explicit flag that tells the server that this route is being handled by an external resolver. Enabling this option disables warnings for unresolved requests.
- See the issues below
  - https://github.com/stegano/next-http-proxy-middleware/issues/32
  - https://github.com/stegano/next-http-proxy-middleware/issues/21

Using `multipart/form-data`

If you are using the multipart/form-data, refer to the Issues below
- https://github.com/stegano/next-http-proxy-middleware/issues/33
- https://github.com/vercel/next.js/pull/7686

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Denny Lim} 🐛 💻	_{Kristian Tryggestad} 🐛 💻	_{Gunnlaugur Thor Briem} 💻 🤔	_{Otto von Wesendonk} 🛡️	_{Daniel Silva} 🤔	_{Yann Pringault} 💻	_Lorenzo 📖
_{Timon Grassl} 🐛	_{Abhinav Kumar} 📖	_{Jack Cuthbert} 📖	_Vytenis 📖	_{Dario Varotto} 📖	_{johannbrynjar} 🐛 💻