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="ваш-dev-api-key"
GT_PROJECT_ID="ваш-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="ваш-dev-api-key"
GT_PROJECT_ID="ваш-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="ваш-dev-api-key"
GT_PROJECT_ID="ваш-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