Weird middleware issues with pages loading dev env

src/middleware.ts

@@ -1,20 +1,43 @@
-import createMiddleware from 'next-intl/middleware';
-import {routing} from './i18n/routing';
+import createMiddleware from "next-intl/middleware";
+import { NextRequest } from "next/server";
+import { routing } from "./i18n/routing";
 
-export default createMiddleware(routing);
+const handleI18nRouting = createMiddleware(routing);
+
+export default function middleware(request: NextRequest) {
+  const response = handleI18nRouting(request);
+
+  const location = response.headers.get("location");
+
+  if (location) {
+    const url = new URL(location);
+
+    // Keep localhost development redirects intact, but drop leaked :3000
+    // on public domains when upstream proxy forwards an internal port.
+    const isLocalhost =
+      url.hostname === "localhost" || url.hostname === "127.0.0.1";
+
+    if (!isLocalhost && url.port === "3000") {
+      url.port = "";
+      response.headers.set("location", url.toString());
+    }
+  }
+
+  return response;
+}
 
 export const config = {
   // Match only internationalized pathnames
   matcher: [
     // Enable a redirect to a matching locale at the root
-    '/',
+    "/",
 
     // Set a cookie to remember the previous locale for
     // all requests that have a locale prefix
-    '/(et|en)/:path*',
+    "/(et|en)/:path*",
 
     // Enable redirects that add missing locales
     // (e.g. `/pathnames` -> `/en/pathnames`)
-    '/((?!_next|_vercel|.*\\..*).*)'
-  ]
+    "/((?!_next|_vercel|.*\\..*).*)",
+  ],
 };