fix: Use correct port for alternate links when running behind a proxy (…

…#514 by @iza-w)



Co-authored-by: Jan Amann <jan@amann.me>

packages/next-intl/package.json

@@ -75,6 +75,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@edge-runtime/vm": "^3.1.3",
     "@size-limit/preset-big-lib": "^8.2.6",
     "@testing-library/react": "^13.0.0",
     "@types/negotiator": "^0.6.1",

packages/next-intl/src/middleware/getAlternateLinksHeaderValue.tsx

@@ -6,7 +6,11 @@ import {getHost, isLocaleSupportedOnDomain} from './utils';
 
 function getUnprefixedUrl(config: MiddlewareConfig, request: NextRequest) {
   const url = new URL(request.url);
-  url.host = getHost(request.headers) ?? url.host;
+  const host = getHost(request.headers);
+  if (host) {
+    url.port = '';
+    url.host = host;
+  }
   url.protocol = request.headers.get('x-forwarded-proto') ?? url.protocol;
 
   if (!url.pathname.endsWith('/')) {

packages/next-intl/test/middleware/getAlternateLinksHeaderValue.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment edge-runtime
+
 import {NextRequest} from 'next/server';
 import {it, expect} from 'vitest';
 import {MiddlewareConfigWithDefaults} from '../../src/middleware/NextIntlMiddlewareConfig';
@@ -215,3 +217,57 @@ it('uses the external host name from headers instead of the url of the incoming
     '<https://example.com/about>; rel="alternate"; hreflang="x-default"'
   ]);
 });
+
+it('keeps the port of an external host if provided', () => {
+  const config: MiddlewareConfigWithDefaults = {
+    defaultLocale: 'en',
+    locales: ['en', 'es'],
+    alternateLinks: true,
+    localePrefix: 'as-needed',
+    localeDetection: true
+  };
+
+  expect(
+    getAlternateLinksHeaderValue(
+      config,
+      new NextRequest('http://127.0.0.1/about', {
+        headers: {
+          host: 'example.com:3000',
+          'x-forwarded-host': 'example.com:3000',
+          'x-forwarded-proto': 'https'
+        }
+      })
+    ).split(', ')
+  ).toEqual([
+    '<https://example.com:3000/about>; rel="alternate"; hreflang="en"',
+    '<https://example.com:3000/es/about>; rel="alternate"; hreflang="es"',
+    '<https://example.com:3000/about>; rel="alternate"; hreflang="x-default"'
+  ]);
+});
+
+it('uses the external host name and the port from headers instead of the url with port of the incoming request (relevant when running the app behind a proxy)', () => {
+  const config: MiddlewareConfigWithDefaults = {
+    defaultLocale: 'en',
+    locales: ['en', 'es'],
+    alternateLinks: true,
+    localePrefix: 'as-needed',
+    localeDetection: true
+  };
+
+  expect(
+    getAlternateLinksHeaderValue(
+      config,
+      new NextRequest('http://127.0.0.1:3000/about', {
+        headers: {
+          host: 'example.com',
+          'x-forwarded-host': 'example.com',
+          'x-forwarded-proto': 'https'
+        }
+      })
+    ).split(', ')
+  ).toEqual([
+    '<https://example.com/about>; rel="alternate"; hreflang="en"',
+    '<https://example.com/es/about>; rel="alternate"; hreflang="es"',
+    '<https://example.com/about>; rel="alternate"; hreflang="x-default"'
+  ]);
+});

packages/next-intl/test/middleware/middleware.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment edge-runtime
+
 import {RequestCookies} from 'next/dist/compiled/@edge-runtime/cookies';
 import {NextRequest, NextResponse} from 'next/server';
 import {pathToRegexp} from 'path-to-regexp';
@@ -6,7 +8,7 @@ import createIntlMiddleware from '../../src/middleware';
 import {COOKIE_LOCALE_NAME} from '../../src/shared/constants';
 
 vi.mock('next/server', () => {
-  type MiddlewareResponseInit = Parameters<(typeof NextResponse)['next']>[0];
+  type MiddlewareResponseInit = Parameters<typeof NextResponse['next']>[0];
 
   function createResponse(init: MiddlewareResponseInit) {
     const response = new Response(null, init);
@@ -60,9 +62,9 @@ function createMockRequest(
 }
 
 const MockedNextResponse = NextResponse as unknown as {
-  next: Mock<Parameters<(typeof NextResponse)['next']>>;
-  rewrite: Mock<Parameters<(typeof NextResponse)['rewrite']>>;
-  redirect: Mock<Parameters<(typeof NextResponse)['redirect']>>;
+  next: Mock<Parameters<typeof NextResponse['next']>>;
+  rewrite: Mock<Parameters<typeof NextResponse['rewrite']>>;
+  redirect: Mock<Parameters<typeof NextResponse['redirect']>>;
 };
 
 beforeEach(() => {