GitHub

Предварительные требования: Next.js App Router, базовые знания JavaScript

Быстрая настройка: Запустите npx gtx-cli@latest для автоматической конфигурации. См. руководство Мастер настройки или воспользуйтесь нашей интеграцией с AI‑инструментами.

Установка

Установите пакеты gt-next и gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Настройка

`withGTConfig`

Функция withGTConfig инициализирует SDK в вашем приложении Next.js. Добавьте её в файл next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ваша текущая конфигурация Next.js
};

export default withGTConfig(nextConfig, {
  // Дополнительные опции конфигурации GT
});

`GTProvider`

Компонент GTProvider предоставляет контекст перевода для клиентских компонентов. Он управляет состоянием локали, словарями переводов и включает хуки useGT и useTranslations.

Добавьте GTProvider в корневой(ые) layout(ы):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Создайте файл gt.config.json в корне проекта:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Настройте локали для своего проекта. См. поддерживаемые локали для доступных вариантов.

Переменные окружения

Добавьте в файл .env.local, чтобы включить горячую перезагрузку при разработке:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Только для разработки: Не задавайте GT_API_KEY в продакшене — он нужен лишь для горячей перезагрузки во время разработки.

Получите бесплатные API‑ключи на dash.generaltranslation.com или выполните:

npx gtx-cli auth

Использование

Теперь вы можете приступить к интернационализации контента. Есть два основных подхода:

JSX-контент с `<T>`

Оборачивайте JSX-элементы для перевода с помощью компонента <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Добро пожаловать в наше приложение!</h1>
    </T>
  );
}

Для динамического контента используйте переменные компоненты, например <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Здравствуйте, <Var>{user.name}</Var>!</p>
    </T>
  );
}

См. руководство по использованию компонента <T> для получения дополнительных сведений.

Простые строки с `useGT`

Для атрибутов, ярлыков и обычного текста с использованием хука useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Введите адрес электронной почты')}
      aria-label={t('Поле для ввода электронной почты')}
    />
  );
}

Для серверных компонентов используйте getGT вместо useGT.

Подробнее см. руководство по переводу строк.

Тестирование приложения

Проверьте переводы, переключая язык интерфейса:

Добавьте селектор локали (выпадающий список) с помощью <LocaleSelector>:
```
import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}
```

Запустите dev‑сервер:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Откройте localhost:3000 и переключайте язык через селектор локали.

В режиме разработки переводы загружаются по запросу (будет короткая задержка). В продакшене всё уже предПереведено.

Устранение неполадок

Развертывание

В продакшене нужно предварительно переводить контент, поскольку перевод во время выполнения отключен (исключение — функции <Tx> и tx).

Получите продакшен‑ключ API на dash.generaltranslation.com.

Продакшен‑ключи начинаются с gtx-api- (в отличие от dev‑ключей, которые начинаются с gtx-dev-). Подробнее о различиях окружений.
Добавьте переменные в ваше окружение CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Никогда не добавляйте префикс NEXT_PUBLIC_ к продакшен‑ключам — они должны оставаться только на стороне сервера.
Выполните команду translate, чтобы перевести контент:
```
npx gtx-cli translate
```
Поведение команды translate настраивается в файле gt.config.json.

См. справочник по CLI Tool для дополнительной информации.
Обновите скрипт сборки, чтобы перевод выполнялся до сборки:
package.json
```
{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

Дальнейшие шаги

Руководство по компоненту <T> — подробный разбор компонента <T> и перевода JSX
Руководство по переводу строк — использование useGT и getGT
Компоненты для переменных — работа с динамическим контентом через <Var>, <Num> и др.

Предварительные требования: Next.js App Router, базовые знания JavaScript

Установка

Установите пакеты gt-next и gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Настройка

`withGTConfig`

Функция withGTConfig инициализирует SDK в вашем приложении Next.js. Добавьте её в файл next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ваша текущая конфигурация Next.js
};

export default withGTConfig(nextConfig, {
  // Дополнительные опции конфигурации GT
});

`GTProvider`

Добавьте GTProvider в корневой(ые) layout(ы):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Создайте файл gt.config.json в корне проекта:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Настройте локали для своего проекта. См. поддерживаемые локали для доступных вариантов.

Переменные окружения

Добавьте в файл .env.local, чтобы включить горячую перезагрузку при разработке:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Получите бесплатные API‑ключи на dash.generaltranslation.com или выполните:

npx gtx-cli auth

Использование

Теперь вы можете приступить к интернационализации контента. Есть два основных подхода:

JSX-контент с `<T>`

Оборачивайте JSX-элементы для перевода с помощью компонента <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Добро пожаловать в наше приложение!</h1>
    </T>
  );
}

Для динамического контента используйте переменные компоненты, например <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Здравствуйте, <Var>{user.name}</Var>!</p>
    </T>
  );
}

См. руководство по использованию компонента <T> для получения дополнительных сведений.

Простые строки с `useGT`

Для атрибутов, ярлыков и обычного текста с использованием хука useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Введите адрес электронной почты')}
      aria-label={t('Поле для ввода электронной почты')}
    />
  );
}

Для серверных компонентов используйте getGT вместо useGT.

Подробнее см. руководство по переводу строк.

Тестирование приложения

Проверьте переводы, переключая язык интерфейса:

Добавьте селектор локали (выпадающий список) с помощью <LocaleSelector>:
```
import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}
```

Запустите dev‑сервер:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Откройте localhost:3000 и переключайте язык через селектор локали.

Устранение неполадок

Развертывание

Получите продакшен‑ключ API на dash.generaltranslation.com.

Продакшен‑ключи начинаются с gtx-api- (в отличие от dev‑ключей, которые начинаются с gtx-dev-). Подробнее о различиях окружений.
Добавьте переменные в ваше окружение CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Никогда не добавляйте префикс NEXT_PUBLIC_ к продакшен‑ключам — они должны оставаться только на стороне сервера.
Выполните команду translate, чтобы перевести контент:
```
npx gtx-cli translate
```
Поведение команды translate настраивается в файле gt.config.json.

См. справочник по CLI Tool для дополнительной информации.
Обновите скрипт сборки, чтобы перевод выполнялся до сборки:
package.json
```
{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

Дальнейшие шаги

Руководство по компоненту <T> — подробный разбор компонента <T> и перевода JSX
Руководство по переводу строк — использование useGT и getGT
Компоненты для переменных — работа с динамическим контентом через <Var>, <Num> и др.

Предварительные требования: Next.js App Router, базовые знания JavaScript

Установка

Установите пакеты gt-next и gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Настройка

`withGTConfig`

Функция withGTConfig инициализирует SDK в вашем приложении Next.js. Добавьте её в файл next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Ваша текущая конфигурация Next.js
};

export default withGTConfig(nextConfig, {
  // Дополнительные опции конфигурации GT
});

`GTProvider`

Добавьте GTProvider в корневой(ые) layout(ы):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Создайте файл gt.config.json в корне проекта:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Настройте локали для своего проекта. См. поддерживаемые локали для доступных вариантов.

Переменные окружения

Добавьте в файл .env.local, чтобы включить горячую перезагрузку при разработке:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Получите бесплатные API‑ключи на dash.generaltranslation.com или выполните:

npx gtx-cli auth

Использование

Теперь вы можете приступить к интернационализации контента. Есть два основных подхода:

JSX-контент с `<T>`

Оборачивайте JSX-элементы для перевода с помощью компонента <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Добро пожаловать в наше приложение!</h1>
    </T>
  );
}

Для динамического контента используйте переменные компоненты, например <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Здравствуйте, <Var>{user.name}</Var>!</p>
    </T>
  );
}

См. руководство по использованию компонента <T> для получения дополнительных сведений.

Простые строки с `useGT`

Для атрибутов, ярлыков и обычного текста с использованием хука useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Введите адрес электронной почты')}
      aria-label={t('Поле для ввода электронной почты')}
    />
  );
}

Для серверных компонентов используйте getGT вместо useGT.

Подробнее см. руководство по переводу строк.

Тестирование приложения

Проверьте переводы, переключая язык интерфейса:

Добавьте селектор локали (выпадающий список) с помощью <LocaleSelector>:
```
import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}
```

Запустите dev‑сервер:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Откройте localhost:3000 и переключайте язык через селектор локали.

Устранение неполадок

Развертывание

Получите продакшен‑ключ API на dash.generaltranslation.com.

Продакшен‑ключи начинаются с gtx-api- (в отличие от dev‑ключей, которые начинаются с gtx-dev-). Подробнее о различиях окружений.
Добавьте переменные в ваше окружение CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Никогда не добавляйте префикс NEXT_PUBLIC_ к продакшен‑ключам — они должны оставаться только на стороне сервера.
Выполните команду translate, чтобы перевести контент:
```
npx gtx-cli translate
```
Поведение команды translate настраивается в файле gt.config.json.

См. справочник по CLI Tool для дополнительной информации.
Обновите скрипт сборки, чтобы перевод выполнялся до сборки:
package.json
```
{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

Дальнейшие шаги

Руководство по компоненту <T> — подробный разбор компонента <T> и перевода JSX
Руководство по переводу строк — использование useGT и getGT
Компоненты для переменных — работа с динамическим контентом через <Var>, <Num> и др.

Быстрый старт с Next.js

Что, если я не хочу использовать платформу General Translation?

Язык моего приложения не меняется, хотя я изменил язык браузера.

Почему в dev языки загружаются долго?

Почему некоторые переводы неточны?

Что делать, если я не использую платформу General Translation?

На этой странице

Быстрый старт с Next.js

Что, если я не хочу использовать платформу General Translation?

Язык моего приложения не меняется, хотя я изменил язык браузера.

Почему в dev языки загружаются долго?

Почему некоторые переводы неточны?

Что делать, если я не использую платформу General Translation?

На этой странице

Быстрый старт с Next.js

Что, если я не хочу использовать платформу General Translation?

Язык моего приложения не меняется, хотя я изменил язык браузера.

Почему в dev языки загружаются долго?

Почему некоторые переводы неточны?

Что делать, если я не использую платформу General Translation?

На этой странице

GitHubПоставить звезду на GitHub

GitHubПоставить звезду на GitHub

Поставить звезду на GitHub

Поставить звезду на GitHub