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

  1// next.config.js
  2async rewrites() {
  3 return [
  4   {
  5     source: "/api/:path*",
  6     destination: "http://example.com/api/:path*",
  7   },
  8 ];
  9},

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.

  1// pages/api/[...all].ts
  2import httpProxy from "http-proxy";
  3
  4export const config = {
  5  api: {
  6    // Enable `externalResolver` option in Next.js
  7    externalResolver: true,
  8    bodyParser: false,
  9  },
  10};
  11
  12export default (req, res) =>
  13  new Promise((resolve, reject) => {
  14    const proxy: httpProxy = httpProxy.createProxy();
  15    proxy.once("proxyRes", resolve).once("error", reject).web(req, res, {
  16      changeOrigin: true,
  17      target: process.env.NEXT_PUBLIC_API_PROXY_URL,
  18    });
  19  });

Installation

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

1npm install next-http-proxy-middleware

Alternately, download the source.

1git 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.

  1import type { NextApiRequest, NextApiResponse } from "next";
  2import type { NextHttpProxyMiddlewareOptions } from "next-http-proxy-middleware";
  3import httpProxyMiddleware from "next-http-proxy-middleware";
  4
  5const handleProxyInit: NextHttpProxyMiddlewareOptions["onProxyInit"] = (proxy) => {
  6  /**
  7  * Check the list of bindable events in the `http-proxy` specification.
  8  * @see https://www.npmjs.com/package/http-proxy#listening-for-proxy-events
  9  */
  10  proxy.on("proxyReq", (proxyReq, req, res) => {
  11    // ...
  12  });
  13  proxy.on("proxyRes", (proxyRes, req, res) => {
  14    // ...
  15  });
  16};
  17
  18export default async (req: NextApiRequest, res: NextApiResponse) =>
  19  httpProxyMiddleware(req, res, {
  20    target: "http://example.com",
  21    onProxyInit: handleProxyInit,
  22  });

Example

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

  • Next.js API Middlewares Guide

  1// pages/api/[...all].ts
  2import type { NextApiRequest, NextApiResponse } from "next";
  3import httpProxyMiddleware from "next-http-proxy-middleware";
  4
  5const isDevelopment = process.env.NODE_ENV !== "production";
  6
  7export const config = {
  8  api: {
  9    // Enable `externalResolver` option in Next.js
  10    externalResolver: true,
  11  },
  12}
  13
  14export default (req: NextApiRequest, res: NextApiResponse) => (
  15  isDevelopment
  16    ? httpProxyMiddleware(req, res, {
  17      // You can use the `http-proxy` option
  18      target: "https://www.example.com",
  19      // In addition, you can use the `pathRewrite` option provided by `next-http-proxy-middleware`
  20      pathRewrite: [{
  21        patternStr: "^/api/new",
  22        replaceStr: "/v2"
  23      }, {
  24        patternStr: "^/api",
  25        replaceStr: ""
  26      }],
  27    })
  28    : res.status(404).send(null)
  29);

  • 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

Other projects

• ReactRenderStateHook
  • react-render-state-hook is a React hook that enables declarative management of components based on data processing states. It facilitates straightforward state management and data sharing among multiple components in a React.

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 🐛 💻	bever1337 📖

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