Switch languages

Take the locale segment off the current pathname with delocalize, and put another locale’s on with localize.

locales.delocalize('/ja/products/42');
// { locale: 'ja', pathname: '/products/42' }

locales.localize('/products/42', 'en');
// '/en/products/42'

• delocalize works by segment. The first segment of /english is english, which is no locale, so it returns locale: null.
• When the first segment is not a locale, delocalize does not guess the default. It returns null, and the caller decides what to fall back to.
• What is left of /en and of /en/ is /. The other way round, localize('/', 'en') returns /en.

The switcher’s links are built from the pathname of the page it is on. That pathname comes from @k8ordo/router’s usePathname(), so the switcher is a Client Component.

'use client';

import type { Variants } from '@k8ordo/i18n';
import { usePathname } from '@k8ordo/router';

import { locales } from '../i18n';

const NAMES: Variants<string> = { ja: '日本語', en: 'English' };

export function LanguageSwitcher() {
  const { pathname } = locales.delocalize(usePathname());
  const current = locales.getLocale();

  return (
    <ul>
      {locales.all.map((locale) => (
        <li key={locale}>
          <a
            aria-current={locale === current ? 'true' : undefined}
            href={locales.localize(pathname, locale)}
            hrefLang={locale}
            lang={locale}
          >
            {NAMES[locale]}
          </a>
        </li>
      ))}
    </ul>
  );
}

usePathname() rather than location, because the server render has no location. usePathname() returns the page’s pathname on the server too, and renders again with the new one after every navigation.

A plain <a> is enough: @k8ordo/router takes the navigation over through the Navigation API, so the whole page is not reloaded. The page renders again, and its messages read the new URL’s locale.

The typed href from bindParams is not used here, because what the switcher holds is the concrete pathname of the page it is on, not a pattern.

Variants<string> holds one value for each locale in Register. Add a locale and forget its name here, and it fails to compile.

Write the chosen language to a cookie, and the next visit to / can use it: under @k8ordo/server, the negotiateRequest that the guard answering / calls reads that cookie before Accept-Language.

import type { Locale } from './i18n';

const MAX_AGE = 400 * 24 * 60 * 60 * 1000;

export const rememberLocale = (locale: Locale) =>
  cookieStore.set({
    name: 'locale',
    value: locale,
    sameSite: 'lax',
    expires: Date.now() + MAX_AGE,
  });

Write it when a switcher link is pressed.

<a
  aria-current={locale === current ? 'true' : undefined}
  href={locales.localize(pathname, locale)}
  hrefLang={locale}
  lang={locale}
  onClick={() => {
    void rememberLocale(locale);
  }}
>

Left to the Cookie Store API’s defaults, the cookie is gone once the browser closes, and it is written SameSite=Strict, which keeps it off the first request arriving from a link on another site. Write it with sameSite: 'lax' and a far expires instead; 400 days is the longest a browser keeps a cookie.

The cookie’s name is the app’s to choose. Hand the same name to the negotiateRequest that reads it, as { cookie: 'locale' }. “Choose the first language” covers that side.