fix: When using domains in routing config, handle unknown domains like localhost:3000 more gracefully in middleware (amannn#1389)

When a request from an unknown host like `localhost:3000` is made—as
it's often the case during development—, don't try to pick a better
domain when responding with redirects in the middleware. Instead, the
host is now only changed for redirects if the requested host is a known
one that is specified in `domains`.

Additionally, the port is now no longer removed automatically to
determine a domain. This allows e.g. to pick different ports locally to
test different locales.

Author: amannn

src/middleware/middleware.test.tsx

@@ -2319,6 +2319,15 @@ describe('domain-based routing', () => {
       );
     });
 
+    it('serves requests for unknown domains based on the global `defaultLocale`', () => {
+      middleware(createMockRequest('/', 'en', 'http://localhost:3000'));
+      expect(MockedNextResponse.next).not.toHaveBeenCalled();
+      expect(MockedNextResponse.redirect).not.toHaveBeenCalled();
+      expect(MockedNextResponse.rewrite.mock.calls[0][0].toString()).toBe(
+        'http://localhost:3000/en'
+      );
+    });
+
     it('serves requests for the default locale at sub paths', () => {
       middleware(createMockRequest('/about', 'en', 'http://en.example.com'));
       expect(MockedNextResponse.next).not.toHaveBeenCalled();
@@ -2367,6 +2376,16 @@ describe('domain-based routing', () => {
       );
     });
 
+    it('removes a superfluous locale prefix of a secondary locale that is the default locale of the domain', () => {
+      middleware(createMockRequest('/fr', 'fr', 'http://fr.example.com'));
+      expect(MockedNextResponse.next).not.toHaveBeenCalled();
+      expect(MockedNextResponse.rewrite).not.toHaveBeenCalled();
+      expect(MockedNextResponse.redirect).toHaveBeenCalled();
+      expect(MockedNextResponse.redirect.mock.calls[0][0].toString()).toBe(
+        'http://fr.example.com/'
+      );
+    });
+
     it('returns alternate links', () => {
       const response = middleware(createMockRequest('/'));
       expect(response.headers.get('link')).toBe(
@@ -2434,6 +2453,16 @@ describe('domain-based routing', () => {
           'http://localhost/fr/about'
         );
       });
+
+      it('keeps the host of an unknown domain for easier local development', () => {
+        middleware(createMockRequest('/en', 'en', 'http://localhost:3000'));
+        expect(MockedNextResponse.next).not.toHaveBeenCalled();
+        expect(MockedNextResponse.rewrite).not.toHaveBeenCalled();
+        expect(MockedNextResponse.redirect).toHaveBeenCalled();
+        expect(MockedNextResponse.redirect.mock.calls[0][0].toString()).toBe(
+          'http://localhost:3000/'
+        );
+      });
     });
 
     describe('locales-restricted domain', () => {

src/middleware/middleware.tsx

@@ -91,7 +91,7 @@ export default function createMiddleware<
     function redirect(url: string, redirectDomain?: string) {
       const urlObj = new URL(normalizeTrailingSlash(url), request.url);
 
-      if (domainsConfig.length > 0 && !redirectDomain) {
+      if (domainsConfig.length > 0 && !redirectDomain && domain) {
         const bestMatchingDomain = getBestMatchingDomain(
           domain,
           locale,

src/middleware/resolveLocale.tsx

@@ -16,10 +16,7 @@ function findDomainFromHost<AppLocales extends Locales>(
   requestHeaders: Headers,
   domains: DomainsConfig<AppLocales>
 ) {
-  let host = getHost(requestHeaders);
-
-  // Remove port (easier for local development)
-  host = host?.replace(/:\d+$/, '');
+  const host = getHost(requestHeaders);
 
   if (host && domains) {
     return domains.find((cur) => cur.domain === host);