What’s the difference between Next.js rewrites and HTTP proxy middleware?

Question

Just trying to figure out the differences between Next.js rewrites and setting up a proxy with http-proxy-middleware. I have a Next.js project with some proxies setup in the API and wondering if I can swap out the proxies for rewrites.

What are the differences, if any? Is there something I’m missing?

Answer 1

rewrites are a convenient way of proxying requests without having to setup your own logic in a server - Next.js handles it for you instead.

Just like http-proxy-middleware, they allow you to map an incoming request path to a different destination. The main difference is that rewrites are also applied to client-side routing, when using Next.js' built-in router (through next/link or next/router) to navigate between pages.

From the rewrites documentation:

Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site.

(...) Rewrites are applied to client-side routing, a <Link href="/about"> will have the rewrite applied in the above example.