Composing applications with Next.js “zones”

Next.js “zones” are a URL “base path”-driven approach to composing Next.js applications. This allows us to build a micro frontend setup with Next.js.

What this means, as shown in the figure that follows, is that an e-commerce use case, where the user might request four sets of URLs (GET /, GET /careers, GET /search, and GET /cart/{id}), "{id}"), denotes that the cart has a dynamic segment, which is the cart ID that is requested. For GET / and GET /careers, the request first goes to the root frontend, which handles rendering directly. For GET /search, the request goes to the root frontend, which forwards the request to the search frontend. Similarly, for GET /cart/{id} requests, the request initially is sent to the root frontend, which proxies the request to the checkout frontend.

Figure 6.5: An overview flowchart of a three-app Next.js zone setup

We’...