Detecting the Currently selected locale | Next.js Supabase SaaS Kit

To detect the currently selected locale from the client, you can use the useTranslation hook from react-i18next.

import { useTranslation } from 'react-i18next';
function Component() {
  const { i18n } = useTranslation();
  const { language } = i18n;
  // use language here
}

Detecting the locale from the server

When rendering on the server, you can use the getLanguageCookie object to detect the locale. This value represents the locale that was selected by the user.

NB: it can be null if the user has not selected a locale yet or if the user has never selected a locale. In this case, you should use the default locale.

import getLanguageCookie from '~/i18n/get-language-cookie';
import configuration from '~/configuration';
function ServerComponent() {
  const locale = getCurrentLocale();
  // use locale here
}
function getCurrentLocale() {
  return getLanguageCookie() ?? configuration.site.locale;
}