Next.js HTTP Proxy Middleware

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', (proxyRes, 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 📖

This project follows the all-contributors specification. Contributions of any kind welcome!