Weird alternate links

[alexbuznik-stark]

Hi everyone.

We have quite a lot of locales combinations (around 3k), but we don't want to list all of them as the alternate links.
But now I looked into the alternate links headers and I don't understand where it comes from (these double locales):

routing.ts:

import { defineRouting } from 'next-intl/routing'
import { createNavigation } from 'next-intl/navigation'
import { DEFAULT_LOCALE_COUNTRY, prerenderLocales } from './settings'

const plainLocales = prerenderLocales.map(({ locale }) => locale) <-- a list of around 150 locales, which look like this:
/* e.g. locales:
en-us-US
fi-FI
it-IT
*/

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: plainLocales,
  // Used when no locale matches
  defaultLocale: DEFAULT_LOCALE_COUNTRY,
  localePrefix: 'as-needed',
})

// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const { Link, redirect, usePathname, useRouter } =
  createNavigation(routing)

request.ts

import { getRequestConfig } from 'next-intl/server'
import { DEFAULT_LOCALE, getLocalePath } from './settings'

export default getRequestConfig(async ({ requestLocale }) => {
  const locale = await requestLocale
  console.log('getRequestConfig locale', locale)
  const messages = {} as Record<string, string>
  try {
    const parts = (locale || '').split('-')
    let localeLang = parts[0]
    if (parts.length === 3) {
      localeLang = parts.slice(0, 2).join('-')
    }

    const [localeJson, defaultLocaleJson] = await Promise.all(
      [localeLang, DEFAULT_LOCALE].map((code) =>
        fetch(getLocalePath(code), { next: { tags: ['i18n1', code] } }).then(
          (data) => data.json()
        )
      )
    )

    for (let k in defaultLocaleJson) {
      if (!k.includes('.')) {
        const key = k.replace(/^t_/g, '')
        messages[key] = localeJson[k] || defaultLocaleJson[k]
      }
    }
  } catch (e) {
    console.error('i18n getRequestConfig', e)
    // captureException(e);
  }

  return {
    locale,
    messages,
  }
})

What am I doing wrong?
Thanks.

[alexbuznik-stark]

I think I figured it out right after posting.

Since I was not including all the locales in the routing config to avoid polluting the thing with 3k options (and this was causing ERR_RESPONSE_HEADERS_TOO_BIG), the router was not considering some custom locales like fi-US a locale, but rather a pathname.

The solution:

• include all the locales options (~3k) in the routing.ts.
• remove unnecessary ones from the response headers:

handleI18nRouting.ts:

import LinkHeader from 'http-link-header'
import { NextRequest } from 'next/server'
import { routing } from '../i18n/routing'
import createMiddleware from 'next-intl/middleware'
import { STANDARD_LOCALES } from '../i18n/settings'

const handleI18nRouting = createMiddleware(routing)

export default async function handler(request: NextRequest) {
  const response = handleI18nRouting(request)

  // Remove excessive alternate links
  const link = LinkHeader.parse(response.headers.get('link') || '')
  console.log('handleI18nRouting link.refs length before', link.refs.length)
  link.refs = link.refs.filter((entry) =>
    STANDARD_LOCALES.includes(entry.hreflang)
  )
  console.log('handleI18nRouting link.refs length after', link.refs.length)
  response.headers.set('link', link.toString())

  return response
}

[amannn]

If you don't want to include a huge number of alternate links per page request, you can alternatively also consider to use a sitemap to link the pages.