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