# General Translation React SDKs (gt-react, gt-next): Быстрый старт с 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 App Router быстрый старт
К концу этого руководства ваше приложение Next.js сможет отображать контент на нескольких языках, а пользователи — переключать язык через переключатель языка.
**Требования:**
* Приложение Next.js, использующее **App Router** (Next.js 13+)
* Node.js 18+
**Совет:** Выполните `npx gt@latest`, чтобы настроить всё с помощью [мастера настройки](/docs/cli/reference/commands/init). В этом руководстве описана ручная настройка.
**Примечание:** Если вы используете 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';
const nextConfig = {};
export default withGTConfig(nextConfig);
```
Этот плагин считывает ваши настройки перевода и незаметно связывает всё воедино. Больше никаких изменений в конфигурации 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`** в директории `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;
}
```
`withGTConfig` автоматически находит файл `loadTranslations.[js|ts]` в каталоге `src/` или в корне проекта — никакой дополнительной настройки не требуется.
**Примечание:** Локальные переводы включаются в бандл приложения, поэтому загружаются мгновенно и не зависят от внешних сервисов. Подробнее о деталях и компромиссах — в разделе [Хранение переводов](/docs/react/guides/storing-translations).
### 5. Добавьте GTProvider в корневой layout
Компонент **`GTProvider`** предоставляет всему приложению доступ к переводам. Он должен оборачивать приложение на уровне корневого layout:
```tsx title="app/layout.tsx"
import { GTProvider, useLocale } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = useLocale();
return (
{children}
);
}
```
### 6. Пометьте текст для перевода
Теперь оберните любой текст, который хотите перевести, в компонент **``**. `` означает "translate":
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Вы можете обернуть в `` столько JSX, сколько захотите. Всё внутри — текст, вложенные элементы и даже форматирование — переводится как единое целое.
### 7. Добавьте переключатель языка
Добавьте **``**, чтобы пользователи могли переключать язык:
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (