Next.js HTTP Proxy Middleware

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

⭐️ Before using

Please try the solutions below before using this library. 😀

Try using `Next.js` Rewrites(recommended)

This function is supported by Next.js. No additional libraries need to be installed!

https://nextjs.org/docs/api-reference/next.config.js/rewrites

// next.config.js
async rewrites() {
 return [

   {
     source: "/api/:path*",
     destination: "http://example.com/api/:path*",
   },
 ];
},

Try using `Http-Proxy`

next-http-proxy-middleware is implemented using http-proxy internally. Since the implementation is not complicated, it is recommended to try http-proxy directly.

// pages/api/[...all].ts
import httpProxy from "http-proxy";

export const config = {
  api: {
    // Enable `externalResolver` option in Next.js
    externalResolver: true,
    bodyParser: false,
  },
};

export default (req, res) =>
  new Promise((resolve, reject) => {
    const proxy: httpProxy = httpProxy.createProxy();
    proxy.once("proxyRes", resolve).once("error", reject).web(req, res, {
      changeOrigin: true,
      target: process.env.NEXT_PUBLIC_API_PROXY_URL,
    });
  });

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
  - #32
  - #21

Using `multipart/form-data`

If you are using the multipart/form-data, refer to the Issues below
- #33
- vercel/next.js#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} 🐛 💻