Next.js Advanced Middleware Transforms with Query Params and Prop Lookups

middleware.js

import { MiddlewareRequest } from "@netlify/next";

export async function middleware(nextRequest) {
  const pathname = nextRequest.nextUrl.pathname;
  const request = new MiddlewareRequest(nextRequest);

  if (pathname.startsWith("/static")) {
    const unit = nextRequest.nextUrl.searchParams.get("unit");
    const response = await request.next();

    // set pricing unit to query param value
    response.transformData((data) => {
      data.pageProps.unit = unit;
      return data;
    });

    // fetch prices from data attribute and update page content
    response.rewriteHTML("#price", {
      element(element) {
        const prices = JSON.parse(
          decodeURIComponent(element.getAttribute("data-prices"))
        );
        element.setInnerContent(prices[unit].toString());
      },
    });

    return response;
  }
}

static.js

const Page = ({ prices, unit }) => {
  return (
    <div>
      <h1 id="message">SSG page with middleware</h1>
      <p>
        Price:{" "}
        <span
          id="price"
          data-prices={encodeURIComponent(JSON.stringify(prices))}
        >
          {prices[unit]}
        </span>
      </p>
    </div>
  );
};

export async function getStaticProps() {
  return {
    props: {
      prices: {
        yard: 3,
        foot: 1,
      },
      unit: "yard",
    },
  };
}

export default Page;

This middleware will update the price accordingly with the query param ?unit=yard or ?unit=foot