# General Translation React SDKs (gt-react, gt-next, gt-react-native): Быстрый старт Next.js App Router
URL: https://generaltranslation.com/ru/docs/react/nextjs-quickstart.mdx
---
title: Быстрый старт Next.js App Router
description: Добавьте поддержку нескольких языков в приложение Next.js App Router с General Translation менее чем за 10 минут.
related:
links:
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables
---
К концу этого руководства ваше приложение Next.js сможет отображать контент на нескольких языках, а пользователи — переключать язык через переключатель языка.
**Требования:**
* Приложение Next.js, использующее **App Router** (Next.js 13+)
* Node.js 18+
**Совет:** Выполните `npx gt@latest`, чтобы настроить всё с помощью [мастера настройки](/docs/cli/quickstart). В этом руководстве описана ручная настройка.
**Примечание:** Если вы используете Pages Router, воспользуйтесь [кратким руководством по Next.js Pages Router](/docs/react/nextjs-pages-router-quickstart).
## Быстрый старт [#quickstart]
### 1. Установите пакеты
`gt-next` — библиотека, которая обеспечивает переводы в вашем приложении. `gt` — CLI, который подготавливает переводы для Production.
```bash
npm i gt-next
npm i -D gt
```
```bash
yarn add gt-next
yarn add --dev gt
```
```bash
bun add gt-next
bun add --dev gt
```
```bash
pnpm add gt-next
pnpm add --save-dev gt
```
### 2. Настройте конфигурацию Next.js
`gt-next` использует плагин Next.js **`withGTConfig`** для настройки интернационализации на этапе этап сборки. Оберните им текущую конфигурацию Next.js. В этом фрагменте и приведённых ниже зелёные строки добавлены, а красные удалены; сохраните все параметры, которые уже есть в вашей конфигурации:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config'; // [!code ++]
const nextConfig = {};
export default nextConfig; // [!code --]
export default withGTConfig(nextConfig); // [!code ++]
```
Этот плагин считывает ваши настройки перевода и незаметно связывает всё воедино. Больше никаких изменений в конфигурации Next.js не требуется.
### 3. Создайте файл конфигурации перевода
Создайте файл **`gt.config.json`** в корне проекта. В нём указывается, какие языки поддерживает библиотека:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — язык, на котором написано ваше приложение (исходный язык).
* **`locales`** — языки, на которые вы хотите перевести приложение. Выберите любые из [списка поддерживаемых локалей](/docs/platform/dashboard/reference/supported-locales).
* **`files.gt.output`** — путь, по которому CLI сохраняет файлы перевода. `[locale]` заменяется кодом каждого языка (например, `public/_gt/es.json`).
Добавьте `public/_gt/` в **`.gitignore`** — эти файлы генерируются автоматически, а не создаются вручную:
```txt title=".gitignore"
public/_gt/
```
### 4. Добавьте функцию загрузки для локальных переводов
Создайте файл **[`loadTranslations`](/docs/react/reference/functions/load-translations)** в директории `src/` (или в корне проекта). Так `gt-next` поймёт, как загружать файлы перевода, созданные через CLI:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
}
```
**Предупреждение:** Эти файлы перевода появятся только после того, как вы их создадите, поэтому при первом запуске `npm run dev` сборка завершится ошибкой, а страница вернёт HTTP 500. Выполните [`npx gt generate`](/docs/cli/reference/commands/generate) (API-ключ не нужен) или [`npx gt translate`](/docs/cli/reference/commands/translate) (с учётными данными), либо добавьте пустые файлы `{}` по пути `public/_gt/[locale].json`.
`withGTConfig` автоматически находит файл `loadTranslations.[js|ts]` в каталоге `src/` или в корне проекта — никакой дополнительной настройки не требуется.
**Примечание:** Локальные переводы включаются в бандл приложения, поэтому загружаются мгновенно и не зависят от внешних сервисов. Подробнее о деталях и компромиссах — в разделе [Хранение переводов](/docs/react/guides/storing-translations).
### 5. Добавьте GTProvider в корневой layout
Компонент **[`GTProvider`](/docs/react/reference/components/gt-provider)** предоставляет всему приложению доступ к переводам. Он должен оборачивать приложение на уровне корневого layout. Остальную часть существующего layout (шрифты, метаданные, стили) оставьте без изменений:
```tsx title="app/layout.tsx"
import { GTProvider, useLocale } from 'gt-next'; // [!code ++]
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = useLocale(); // [!code ++]
return (
{/* [!code --] */}
{/* [!code ++] */}
{/* [!code --] */}
{children}
{/* [!code ++:3] */}
{children}
);
}
```
### 6. Пометьте текст для перевода
Теперь оберните любой текст, который хотите перевести, в компонент **[``](/docs/react/reference/components/t)**. [``](/docs/react/reference/components/t) означает "translate":
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}
Welcome to my app
This content will be translated automatically.
{/* [!code ++] */}
);
}
```
Вы можете обернуть в [``](/docs/react/reference/components/t) столько JSX, сколько захотите. Всё внутри — текст, вложенные элементы и даже форматирование — переводится как единое целое.
### 7. Добавьте переключатель языка
Добавьте **[``](/docs/react/reference/components/locale-selector)**, чтобы пользователи могли переключать язык:
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code --]
import { T, LocaleSelector } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}