# gt-next: General Translation Next.js SDK: Краткое руководство по Next.js
URL: https://generaltranslation.com/ru/docs/next.mdx
---
title: Краткое руководство по Next.js
description: Добавьте поддержку нескольких языков в приложение Next.js менее чем за 10 минут
---
К концу этого руководства ваше приложение Next.js будет отображать контент на нескольких языках, а пользователи смогут переключать язык с помощью переключателя языка.
**Предварительные требования:**
* Приложение Next.js, использующее **App Router** (Next.js 13+)
* Node.js 18+
**Нужен автоматический сетап?** Выполните `npx gt@latest`, чтобы настроить всё с помощью [мастера сетапа](/docs/cli/init). В этом руководстве рассматривается ручной сетап.
***
## Шаг 1: Установите пакеты
`gt-next` — библиотека, которая обеспечивает переводы в вашем приложении. `gt` — CLI-инструмент, который подготавливает переводы для продакшена.
```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/supported-locales).
* **`files.gt.output`** — путь, по которому CLI сохраняет файлы перевода. `[locale]` заменяется кодом каждого языка (например, `public/_gt/es.json`).
Добавьте `public/_gt/` в **`.gitignore`** — эти файлы генерируются автоматически, а не создаются вручную:
```txt title=".gitignore"
public/_gt/
```
***
## Шаг 4: Добавьте GTProvider в ваш корневой layout
Компонент **`GTProvider`** предоставляет всему приложению доступ к переводам. Он должен оборачивать приложение на уровне корневого layout:
```tsx title="app/layout.tsx"
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`GTProvider` — это **серверный компонент**: он загружает переводы на сервере и передаёт их в ваши клиентские компоненты.
***
## Шаг 5: Пометьте контент для перевода
Теперь оберните компонентом **``** любой текст, который нужно перевести. `` означает "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 — от небольшого до очень большого. Всё внутри него — текст, вложенные элементы и даже форматирование — переводится как единое целое.
***
## Шаг 6: Добавьте переключатель языка
Добавьте **``**, чтобы пользователи могли переключать язык:
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (