New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to proxy any path to a backend server instead of showing a Next.js 404 page #9338
Comments
You can use a prefix on your Next app and rewrite the path to remove it: server.use(
proxyMiddleware('/api', {
target: 'https://example.com',
pathRewrite: { '^/api': '/' },
changeOrigin: true,
})
); If you make a request to |
Thanks for your suggestion @rafaelalmeidatk! The problem with this approach is that your client logic should account for this prefix all the time. I.e. Besides, we not only want to proxy ajax requests, but also the login gateway. I.e:
|
We might consider this for the next iteration of rewrites (after the first iteration is landed on stable). |
We're looking at something like this as an incremental migration path: serve whatever pages we can successfully from Next.js and send anything 404'ing on to the old app server (which we're transforming into an API server). I've been trying to make it work with a custom server but I haven't found a good way to determine whether Next will handle the URL or if there's a place to override before it responds. |
in our exploration we ended up handling this at the nginx level with a whitelist of patterns. |
I don't get it. Do I need express for local development to proxy for example all |
Fixed by #10041 |
I wasn't able to test it properly, but does this also support websocket rewrite, like for example for graphql subscriptions? |
Could you provide an example that proxies to a different port? |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Is your feature request related to a problem? Please describe.
Create React App allows configuring a backend proxy in their development server, which is quite handy in certain scenarios. Any request that does not match an existing asset or an index HTML page gets forwarded to a backend server, if
HOST
is specified. For example:Essentially, they are just using a standard webpack-dev-server proxy feature as far as I understand.
I’ve been trying to configure our Next.js development server in a similar way but failed. We probably need to make a small tweak to the framework unless I’m missing something. Here’s roughly what I tried in the first place:
If I place Next.js handler before the proxy middleware handler, all requests are processed by Next.js. If I swap them, no requests reach Next.js anymore. This happens because both handlers are too greedy.
I tried adding custom logic after
await handle(req, res)
to instruct express to ignore the just-obtained result from Next.js and proceed to the following hander. However, this did not work because response HTTP handers are already sent by then so cannot be rewritten. Even if it worked, it would be slow because for every request to proxy, Next.js would have to render a 404 page, which is then disposed.Describe the solution you’d like
We have a co-located restful API that can start with anything and unfortunately, the routing is outside our control. There is no shared prefix or pattern I can whitelist – otherwise, I could just place the proxy middleware handler first. API path examples:
I’d like to be able to proxy to all these paths in development just as I would do in CRA out of box. This means that I would like to somehow disable 404 page handling by Next.js.
This could look like:
I’m not insisting on the option name or even its existence, this is just an example of what could potentially help. The same problem does not apply to production, because we export static app files and then serve them with Nginx. When testing the production build locally, we use a custom Express server and it works:
Describe alternatives you've considered
For now, I have to replace
"*"
with a regexp:This works only for apps that:
pages/index.js
, no routing)The solution is quite limiting and won’t work for us in the long term.
Additional context
I know there is an RFC for plugins and am wondering if this new abstraction could solve our problem. No matter if yes or no, I’ve decided to share our team’s issue to collect some feedback and ideas. WDYT folks?
The text was updated successfully, but these errors were encountered: