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

> How to detect the currently selected locale so that you can use it in your React components.

*Canonical: https://makerkit.dev/docs/next-supabase/how-to/translations/detect-current-locale*

---

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

```tsx
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**.

```tsx
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;
}
```