Does this library support Next 13 app dir ?

[wangwailok]

The type requests in the new route system changed from NextApiequest to NextRequest
and the middleware seems cannot work accordingly. any workaround?

[stegano]

Hi @wangwailok
I'm checked a little while ago, and this llibrary is still working well,
Could you please share with me the versions of the library you are using and the source code?

Please let me know if I'm misunderstanding.

[stegano]

It seems difficult to see this library as a kind of 'middleware' that is currently called by Next.js.

This library has been used since Next.js v9, and at that time, libraries that handle APIs were called middleware. Currently, Next.js calls them API Routes.

[wangwailok]

Hi @wangwailok I'm checked a little while ago, and this llibrary is still working well, Could you please share with me the versions of the library you are using and the source code?

Please let me know if I'm misunderstanding.

I am using next js 13 with App dir, the type of request object has been changed to "NextRequest" and cannot pass inot the proxy middleware anymore

[stegano]

@wangwailok
In your case, it seems like you should use NextApiRequest and NextApiResponse. 😅

Because, this library is a middleware(handler) for handling API requests, and NextRequest and NextResponse are middlewares(handlers) for handling requests for Page Requests.

Please see links below

• https://nextjs.org/docs/pages/building-your-application/routing/api-routes
• https://nextjs.org/docs/pages/building-your-application/routing/middleware

Please let me know if i'm missing something.

[pluce]

Hi I'm facing the same kind of problems were httpProxyMiddleware doesn't work any more with new Next 13 API routing.

Here I'm defining the route in app/api/rem/route.ts:

And I've got multiple errors like:

Error: No response is returned from route handler '...../src/app/api/rem/route.ts'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler.

or

TypeError: Cannot set property url of #<NextRequest> which has only a getter

[stegano]

Hi, @pluce
Please return the result of executing the httpProxyMiddleware function.

// e.g.,
...
export async function POS(...) {
   return httpProxyMiddleware(... {}); // <- This function must return
}

[tigading]

Plzz help me!! Error: Cannot set property body of # which has only a getter

[stoompa]

Having same issue as @tigading and @pluce, even when returning the function

[stegano]

Hi, @stoompa

Could you please share the your project repository?

[stoompa]

Hi, @stoompa

Could you please share the your project repository?

I cannot show the whole code since it is enterprise, but this is how we are using this library:

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const onProxyInit = await getOnProxyInit(req);

  const proxyOptions: NextHttpProxyMiddlewareOptions = {
    onProxyInit,
    changeOrigin: true,
    target: REPORTS_URL,
    pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
  };

  await httpProxyMiddleware(req, res, proxyOptions);
}

[stegano]

Hi, @stoompa
Could you please share the your project repository?

I cannot show the whole code since it is enterprise, but this is how we are using this library:

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const onProxyInit = await getOnProxyInit(req);

  const proxyOptions: NextHttpProxyMiddlewareOptions = {
    onProxyInit,
    changeOrigin: true,
    target: REPORTS_URL,
    pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
  };

  await httpProxyMiddleware(req, res, proxyOptions);
}

You must return the result of the httpProxyMiddleware function execution. Please try again with the code below.

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const onProxyInit = await getOnProxyInit(req);

  const proxyOptions: NextHttpProxyMiddlewareOptions = {
    onProxyInit,
    changeOrigin: true,
    target: REPORTS_URL,
    pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
  };

  return await httpProxyMiddleware(req, res, proxyOptions);
}
...

[stoompa]

Hi, @stoompa
Could you please share the your project repository?

I cannot show the whole code since it is enterprise, but this is how we are using this library:

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const onProxyInit = await getOnProxyInit(req);

  const proxyOptions: NextHttpProxyMiddlewareOptions = {
    onProxyInit,
    changeOrigin: true,
    target: REPORTS_URL,
    pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
  };

  await httpProxyMiddleware(req, res, proxyOptions);
}

You must return the result of the httpProxyMiddleware function execution. Please try again with the code below.

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const onProxyInit = await getOnProxyInit(req);

  const proxyOptions: NextHttpProxyMiddlewareOptions = {
    onProxyInit,
    changeOrigin: true,
    target: REPORTS_URL,
    pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
  };

  return await httpProxyMiddleware(req, res, proxyOptions);
}
...

Still same problem :(

[stegano]

@stoompa
Would you like to give it a try again with the code below?

...
export const config = {
  api: {
    // Enable `externalResolver` option in Next.js
    externalResolver: true,
  },
}
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const onProxyInit = await getOnProxyInit(req);
    const proxyOptions: NextHttpProxyMiddlewareOptions = {
      onProxyInit,
      changeOrigin: true,
      target: REPORTS_URL,
      pathRewrite: [{ patternStr: '/api/reports', replaceStr: '' }]
    };
  
    return await httpProxyMiddleware(req, res, proxyOptions);
};

export default handler;
...

If that doesn't work, please let me known the next.js version so I can check further.

[stoompa]

@stegano thanks for the help, unfortunately it does not work. exporting the handler as default only works with the pages directory, and I think we all have the same issue when using the /app directory.
Currently I am using Next.js 14.

[stegano]

@stegano thanks for the help, unfortunately it does not work. exporting the handler as default only works with the pages directory, and I think we all have the same issue when using the /app directory. Currently I am using Next.js 14.

You're right. This library might not work properly with Next.js App Directory. It is indeed an older library, and Next.js has introduced the 'rewrites' feature which could potentially replace the functionality you're seeking from this library. Have you tried using the 'rewrites' feature yet? If not, it's worth looking into. If you have chosen not to use 'rewrites', could you provide some insight into your decision?

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

[arjun-mavonic]

@stegano thanks for the help, unfortunately it does not work. exporting the handler as default only works with the pages directory, and I think we all have the same issue when using the /app directory. Currently I am using Next.js 14.

You're right. This library might not work properly with Next.js App Directory. It is indeed an older library, and Next.js has introduced the 'rewrites' feature which could potentially replace the functionality you're seeking from this library. Have you tried using the 'rewrites' feature yet? If not, it's worth looking into. If you have chosen not to use 'rewrites', could you provide some insight into your decision?

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

I have checked out rewrites feature. But how can do something before rewrite happens? It only shows how I can rewrite a url to another. I am loosing what I can do with the response I receive from proxy middleware.

[stegano]

@stegano thanks for the help, unfortunately it does not work. exporting the handler as default only works with the pages directory, and I think we all have the same issue when using the /app directory. Currently I am using Next.js 14.

You're right. This library might not work properly with Next.js App Directory. It is indeed an older library, and Next.js has introduced the 'rewrites' feature which could potentially replace the functionality you're seeking from this library. Have you tried using the 'rewrites' feature yet? If not, it's worth looking into. If you have chosen not to use 'rewrites', could you provide some insight into your decision?

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

I have checked out rewrites feature. But how can do something before rewrite happens? It only shows how I can rewrite a url to another. I am loosing what I can do with the response I receive from proxy middleware.

Sorry, I'm late with my reply.

I'm not sure what you're trying to do
however, If additional tasks beyond simple proxying (changing paths) are required in the middleware, it may be better to establish a separate web application server.

[Cinea4678]

@stegano thanks for the help, unfortunately it does not work. exporting the handler as default only works with the pages directory, and I think we all have the same issue when using the /app directory. Currently I am using Next.js 14.

You're right. This library might not work properly with Next.js App Directory. It is indeed an older library, and Next.js has introduced the 'rewrites' feature which could potentially replace the functionality you're seeking from this library. Have you tried using the 'rewrites' feature yet? If not, it's worth looking into. If you have chosen not to use 'rewrites', could you provide some insight into your decision?

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

Hi, even if your idea is correct in the vast majority of cases (i.e., "rewrites" will solve the problem in most cases), there are some special cases, such as when I plan to use an agent (e.g., my proxy target has to be accessed through http_proxy), where I can't add an agent using rewrites, which was possible with the previous http-proxy-middleware works.

I still hope you can try to provide support for /app style routing for your project, or we can discuss together to see how your project can remain usable with /app style routing.

[rayrapetyan]

So despite of multiple examples in this thread, /app routing is not working with next-http-proxy-middleware as of today correct?

[stegano]

@rayrapetyan
Unfortunately, It is still not supported by the Next.js app router. As an alternative, you can use both the app router and the pages router. Also, I'll look into ways to use it with the app router.

If anyone knows a better way, please let me know.

[rayrapetyan]

Somehow it didn't work even with page router... I've ended up using a stand-alone nginx instance just for routing purposes.

[stegano]

Somehow it didn't work even with page router... I've ended up using a stand-alone nginx instance just for routing purposes.

@rayrapetyan
It must be working if you're using the Next.js page router 😅
Doesn't this work with the page router too?

[OnielN14]

@stegano
I have used next-http-proxy-middleware in pages directory on Next 14 App Router, it works fine for me.

[lvilasboas-dti]

@stegano I have used next-http-proxy-middleware in pages directory on Next 14 App Router, it works fine for me.

@OnielN14 can you provide some example on how you got it to work?

[OnielN14]

@lvilasboas-dti
you may check this repo https://github.com/OnielN14/nextjs-http-middleware-sample. Though it using Next.js 15, but it should be fine.

[lvilasboas-dti]

I just now realized you said you were using it in pages router - I skipped this part.
I also have several endpoints in pages router where I still successfully use it - the problem is with app router.

[OnielN14]

I just now realized you said you were using it in pages router - I skipped this part. I also have several endpoints in pages router where I still successfully use it - the problem is with app router.

haha.. yeah.. sorry for that