Link doesn't allow on production env

[Neonin]

Description

Need help, unfortunately I couldn't find a solution. Because it's very strange.
Rekated on #676

On my local machine, the links work as the documentation says, but when I deploy to the env vercel, I see nothing. Maybe I'm doing something wrong

My conifg

const intlMiddleware = createMiddleware({
  locales,
  defaultLocale,
  localePrefix: 'as-needed',
})

export const config = {
  matcher: ['/((?!api|_vercel|_next/static|_next/image|favicon.ico|images|svg|.*\\..*).*)'],
}

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://stage.klr.com.ua/en

Reproduction description

Steps to reproduce:

1. Open reproduction
2. View head parameters (empty)

Expected behaviour

Set the alternate link for an alternate language in response header

[amannn]

It seems like Vercel is stripping the link header here. I've noticed that Vercel seems to do this for cache hits, but haven't seen it on cache misses so far.

I'll move this to a discussion since it's not a bug of next-intl, but rather a hosting question, but I'd be interested in case you learn more about this. I'm unsure for example if Vercel would send different response headers if they're crawled by a search engine. If you want to be sure that your alternate pages are discovered, you can submit a sitemap with alternate entries that create links between page versions.

[Neonin]

My SEO specialists still put me in the head to add links for canonical and alternate pages.
Here is my workaround how I did it. But it's doesn't work for SSG😢

import { headers } from 'next/headers'

import 'server-only'

import { defaultLocale, host, locales } from '../../../shared/configs'
import { AppLocales } from '../../../shared/constants/app-locales'

/**
 * Generates the canonical URL and languages based on the selected locale.
 * Temporary solution to generate canonical and languages
 * This function should be called on the server side
 *
 * @param selectedLocale The selected locale in app.
 * @returns An object containing the canonical URL and languages.
 */
export function generateCanonicalAndLanguages(selectedLocale: AppLocales) {
  const headersList = headers()
  // The `./middleware.ts` sets the x-current-url header in the server
  const pathname = headersList.get('x-current-url') ?? ''

  // Remove the locale from the pathname if it's the default locale
  const pathnameWithoutLocale =
    selectedLocale === defaultLocale ? pathname : pathname.replace(/\/[a-z]{2}?/, '')

  const path = pathnameWithoutLocale.includes('?')
    ? pathnameWithoutLocale.substring(0, pathname.indexOf('?'))
    : pathnameWithoutLocale

  const currentLocale = selectedLocale === defaultLocale ? '' : `/${selectedLocale}`

  const canonical = `${host}${currentLocale}${path}`

  const languages = locales.reduce(
    (acc, locale) => {
      acc[locale] = `${host}${defaultLocale === locale ? '' : `/${locale}`}${path}`
      return acc
    },
    {} as Record<AppLocales, string>
  )

  return {
    canonical,
    languages,
  }
}

middleware.ts

export function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl

  const response = intlMiddleware(req)
  response.headers.set('x-current-url', pathname)

  return response
}

app/[locale]/layout

export async function generateMetadata({
  params: { locale },
}: LocaleLayoutParams): Promise<Metadata> {
  const t = await getTranslations({ locale, namespace: '' })

  return {
    alternates: generateCanonicalAndLanguages(locale),
  }
}