This demo shows how to use @happykit/flags in Next.js Middleware.
You have been served the "short" checkout variant.This example uses a middleware file at /middleware.ts to statically render different variants for the /demo/middleware path. The different variants live under pages/demo/middleware/[variant].tsx.
The middleware loads the flags and rewrites the incoming request either to /demo/middleware/short, /demo/middleware/medium or /demo/middleware/full depending on the resolved flag variant.
The request to any of those paths will then be handled by /demo/middleware/[variant].tsx. That file will have staticaly generated a version for each variant. The request will thus get answered statically.
Since the resulting page is served statically from the edge, the first render will use no visitor key. This is necessary as the concept of a visitor does not exist during static site generation. Thus all rules and percentage-based rollouts targeting a visitor resolve to null.
The middleware loads the flags purely to decide where to rewrite the request to. It does not send any resolved flags into the application itself.
You are however free to call useFlags() on the client and combine this approach with the middleware.