Multi-language Support

Multi-language can be implemented by switching the language settings based on a cookie. This change only requires the frontend adjustments to ensure that the proper cookie is set and passed to your backend.

Alokai Storefront uses a vsf-locale cookie to handle i18n. This cookie is used to request a certain language for your Alokai integrations, such as e-commerce platforms and CMS. The vsf-locale cookie is set by the storefront and used by the middleware to determine which language to use.

• The vsf-locale cookie is used to set the language used by Alokai integrations
• useLocation can be used to help interact with the vsf-locale cookie.
• next-intl and @nuxtjs/i18n are used to handle static content translations, locale detection, and i18n routing.

Next.js app utilizes next-intl to handle static content translations, locale detection, and i18n routing.

Switching Languages

When switching the language, you need to set vsf-locale cookie that will be consumed by the middleware to determine the language of Alokai integrations, such as ecommerce platforms and CMS.

If you are using server-side rendering, these cookies need to be set on the server side as well. In Alokai Storefront applications, we recommend setting the language cookies by leveraging a Nextjs middleware routing.

Example implementation, that will set the vsf-locale cookie for the upcoming request, may look as follows:

// apps/storefront-unified-nextjs/middleware.ts

import { type NextRequest, NextResponse } from "next/server";
import createMiddleware from "next-intl/middleware";

import { pathnames } from "./config/navigation";
import { defaultLocale, localePrefix, locales } from "./i18n";

const LOCALE_COOKIE = "vsf-locale";

const i18nMiddleware = createMiddleware({
  defaultLocale,
  localeDetection: false,
  localePrefix,
  locales,
  pathnames,
});

export async function middleware(req: NextRequest) {
  let response = i18nMiddleware(request);

  // since locale detection with NEXT_LOCALE cookie is disabled in presented example, we could gather locale from the response headers
  const locale =
    response.headers.get("x-middleware-request-x-next-intl-locale") ||
    defaultLocale;
  // set cookie for the upcoming request
  request.cookies.set(LOCALE_COOKIE, locale);
  // set cookie for the response, to be used in the browser
  response.cookies.set(LOCALE_COOKIE, locale);

  return res;
}

To configure the language settings in NextJS with next-intl refer to following guide.

Exceptions

In most integrations, the language is being determined by the vsf-locale cookie - set it to the language code of your choice and the integration will use it as long as your platform is configured to support the language.

However, there are some exceptions. For example, in bigcommerce, due to the limitations of the platform we need to use the multistore approach, as the platform supports only one language per store.

If you need more detailed explanations on multi-language support for specific platforms needed, please refer to the dedicated documentation for each integration.