# gt-next: General Translation Next.js SDK: Переключение языков
URL: https://generaltranslation.com/ru/docs/next/guides/languages.mdx
---
title: Переключение языков
description: Как настроить переключение между языками в приложении Next.js
---

Переключение языков позволяет пользователям менять предпочитаемую локаль, на которой отображается контент вашего приложения. GT Next предлагает несколько подходов: от простого программного переключения до полноценной маршрутизации на основе URL с использованием middleware.

## Доступные методы

* **Программно**: Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) для собственных элементов управления
* **Готовый UI**: компонент [`<LocaleSelector>`](/docs/next/api/components/locale-selector) с выпадающим списком
* **Собственный UI**: Hook [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) для создания собственных селекторов
* **Через URL**: [Маршрутизация через Middleware](/docs/next/guides/middleware) для локали в URL-путях

## Использование Hook `useSetLocale`

Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) — это Hook, работающий на стороне клиента и позволяющий менять язык приложения:

```tsx
import { useSetLocale } from 'gt-next/client';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Просто передайте локаль, на которую хотите переключиться, в качестве аргумента функции, возвращаемой Hook.


## Использование компонента `<LocaleSelector>`

Компонент [`<LocaleSelector>`](/docs/next/api/components/locale-selector) предоставляет готовый выпадающий список, в котором автоматически отображаются все настроенные локали:

```tsx
import { LocaleSelector } from 'gt-next/client';

export default function MyComponent() {
  return <LocaleSelector />;
}
```

Этот компонент автоматически:

* Показывает все настроенные локали проекта
* Отображает локали под их самоназваниями
* Обрабатывает переключение
* Сохраняет текущее состояние выбора


## Использование Hook `useLocaleSelector`

Если вы хотите создать собственный компонент для выбора локали, используйте [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector):

```tsx
import { useLocaleSelector } from 'gt-next/client';

function CustomLocaleSelector() {
  const { 
    locale,              // Текущая активная локаль (например, 'en', 'es')
    locales,             // Массив локалей, поддерживаемых вашим проектом ['en', 'es', 'fr']
    setLocale,           // Функция для смены локали: setLocale('es')
    getLocaleProperties  // Функция для получения отображаемой информации о локали
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* например, "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Переключение языка через URL

Для SEO и более удобного пользовательского опыта вы можете включить локаль в URL с помощью маршрутизации через middleware. Подробнее об этом подходе см. в [руководстве по Middleware](/docs/next/guides/middleware):

```
/en/products  → English products page  
/es/products  → Spanish products page
/fr/products  → French products page
```

Этот подход дает преимущества для SEO, прямые ссылки на языковые версии и локализованные ссылки, которыми удобно делиться.


## Важные примечания

### Только в клиентских компонентах

Все Hook и компоненты для переключения языка нужно использовать только в клиентских компонентах, помеченных `'use client'`:

```tsx
'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... логика компонента
}
```


### Требование к GTProvider

Компоненты переключения языка должны использоваться внутри [`<GTProvider>`](/docs/next/api/components/gtprovider):

```tsx
// ✅ Правильно
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Неправильно — вне провайдера
<LanguageSwitcher />
```


## Следующие шаги

* [Руководство по middleware](/docs/next/guides/middleware) - Маршрутизация по языку через URL
* [Руководство по динамическому контенту](/docs/next/guides/dynamic-content) - Перевод контента во время выполнения
* Справка по API:
  * [`useSetLocale` Hook](/docs/next/api/helpers/use-set-locale)
  * [`<LocaleSelector>` компонент](/docs/next/api/components/locale-selector)