Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stegano/next-http-proxy-middleware
HTTP Proxy middleware available in API Middleware provided by Next.js.
https://github.com/stegano/next-http-proxy-middleware
Last synced: 2 days ago
JSON representation
HTTP Proxy middleware available in API Middleware provided by Next.js.
- Host: GitHub
- URL: https://github.com/stegano/next-http-proxy-middleware
- Owner: stegano
- Created: 2020-02-25T03:16:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-21T04:03:36.000Z (30 days ago)
- Last Synced: 2025-01-10T11:16:01.563Z (9 days ago)
- Language: TypeScript
- Size: 612 KB
- Stars: 243
- Watchers: 3
- Forks: 19
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js HTTP Proxy Middleware
[](#contributors-)
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
```ts
// 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.
```ts
// 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](https://www.npmjs.com/).
```bash
npm install next-http-proxy-middleware
```
Alternately, download the source.
```bash
git clone https://github.com/stegano/next-http-proxy-middleware.git
```
## Features
This middleware is implemented using the [`http-proxy`](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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.
```ts
import type { NextApiRequest, NextApiResponse } from "next";
import type { NextHttpProxyMiddlewareOptions } from "next-http-proxy-middleware";
import httpProxyMiddleware from "next-http-proxy-middleware";
const handleProxyInit: NextHttpProxyMiddlewareOptions["onProxyInit"] = (proxy) => {
/**
* 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](https://nextjs.org/docs/api-routes/api-middlewares)
```ts
// pages/api/[...all].ts
import type { NextApiRequest, NextApiResponse } from "next";
import httpProxyMiddleware from "next-http-proxy-middleware";
const isDevelopment = process.env.NODE_ENV !== "production";
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
## Other projects
* [ReactRenderStateHook](https://www.npmjs.com/package/react-render-state-hook)
* `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](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!