Rewrite request in middleware

[jezikk]

Hi all,

I have a question if is it planned to be able to rewrite request in middleware? Or something like that. This pattern is used for example in ParaglideJS.

NextJS

import { NextRequest, NextResponse } from "next/server";
import { paraglideMiddleware } from "./paraglide/server";

export function middleware(request: NextRequest) {
	return paraglideMiddleware(request, ({ request, locale }) => {
		request.headers.set("x-paraglide-locale", locale);
		request.headers.set("x-paraglide-request-url", request.url);
		return NextResponse.rewrite(request.url, request);
	});
}

HonoJS

export default await createHonoServer({
  beforeAll(app) {
    app.use(async (c, next) => {
      return await paraglideMiddleware(c.req.raw, ({ request }) => {
        c.req.raw = request;
        return next();
      });
    });
  },
});

[sergiodxa]

What's the use case? If you want to add things for the route loaders/actions to use you can use the router context to set values there and read them somewhere else without modifying the actual request object.

If the idea is to make /something render /something-else that's not yet supported by the router itself

[jezikk]

Ok, maybe I'm just doing something wrong.

This is the middleware:

import { paraglideMiddleware } from "~/paraglide/server";
import type { Route } from "../+types/root";

// https://github.com/opral/inlang-paraglide-js/issues/449
const localeMiddleware: Route.unstable_MiddlewareFunction = async (
  { request },
  next,
) => {
  return await paraglideMiddleware(request, ({ request: localizedRequest }) => {
    return next();
  });
};

export { localeMiddleware };

This is the code inside paraglideMiddleware function:

export async function paraglideMiddleware(request, resolve) {
	if (!runtime.disableAsyncLocalStorage && !runtime.serverAsyncLocalStorage) {
		const { AsyncLocalStorage } = await import("async_hooks");
		runtime.overwriteServerAsyncLocalStorage(new AsyncLocalStorage());
	} else if (!runtime.serverAsyncLocalStorage) {
		runtime.overwriteServerAsyncLocalStorage(createMockAsyncLocalStorage());
	}

	const locale = runtime.extractLocaleFromRequest(request);
	const origin = new URL(request.url).origin;

	// if the client makes a request to a URL that doesn't match
	// the localizedUrl, redirect the client to the localized URL
	if (
		request.headers.get("Sec-Fetch-Dest") === "document" &&
		runtime.strategy.includes("url")
	) {
		const localizedUrl = runtime.localizeUrl(request.url, { locale });
		if (normalizeURL(localizedUrl.href) !== normalizeURL(request.url)) {
			return Response.redirect(localizedUrl, 307);
		}
	}

There is the redirect, but it doesn't work.

[jezikk]

For example if you have the language detection strategy set to prioritize the locale value from the cookie over the locale value from the url, the middleware can automatically change (rewrite) the url.

Base language: de
Supported languages: en,de
Cookie value: en
Detection strategy: 1. cookie, 2.url

1. User open url https://localhost:3000
2. ParaglideMiddleware changes automatically url to https://localhost:3000/en because it is not the base language

Without this feature actually it is not possible to use a new ParaglideJS 2.0 middleware. :(

opral/inlang-paraglide-js#449

[sergiodxa]

Right now the way to do that is to redirect, so if the user goes to / you check the cookie and redirect to /en

If you do this in a middleware you can block every loader to run, redirect and then when a new request is received you let the loaders run normally.