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 #<Request> 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.