# General Translation React SDKs (gt-react, gt-next): Быстрый старт Next.js Pages Router
URL: https://generaltranslation.com/ru/docs/react/nextjs-pages-router-quickstart.mdx
---
title: Быстрый старт Next.js Pages Router
description: Добавьте несколько языков в приложение Next.js Pages 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 Pages Router

К концу этого руководства ваше приложение Next.js на Pages Router будет отображать содержимое на нескольких языках, а пользователи смогут переключать язык через соответствующий переключатель.

В Pages Router `gt-next` работает через `getServerSideProps`: при каждом запросе сервер определяет локаль пользователя, загружает снимок переводов и передаёт их в `<GTProvider>` в `_app.tsx`, чтобы содержимое уже при первом рендере было переведено.

Точка входа `gt-next/server` предназначена только для App Router и не работает с Pages Router.

**Предварительные требования:**

* Приложение Next.js, использующее **Pages Router**
* Node.js 18+

<Callout type="info">
  **Примечание:** Если вы используете App Router, вместо этого следуйте руководству [Быстрый старт Next.js App Router](/docs/react/nextjs-quickstart). В нём используются серверные компоненты, и настройка `getServerSideProps` не требуется.
</Callout>

## Быстрый старт [#quickstart]

### 1. Установите пакеты

`gt-next` — библиотека, которая отвечает за переводы в вашем приложении. `gt` — это CLI-инструмент, который подготавливает переводы для Production.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i gt-next
    npm i -D gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-next
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-next
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-next
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 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);
```

Этот плагин считывает ваши настройки перевода и автоматически связывает всё воедино. Для URL с префиксом локали см. [руководство по middleware для Pages Router](/docs/react/nextjs/pages-router-middleware).

### 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="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  try {
    const translations = await import(`./public/_gt/${locale}.json`);
    return translations.default;
  } catch {
    return {};
  }
}
```

`withGTConfig` автоматически обнаруживает файл `loadTranslations.[js|ts]` в корне проекта или в каталоге `src/` — никакой дополнительной настройки не требуется.

<Callout type="info">
  **Примечание:** Локальные переводы входят в бандл приложения, поэтому загружаются мгновенно и не зависят от внешних сервисов. Подробнее о преимуществах и компромиссах см. в разделе [Хранение переводов](/docs/react/guides/storing-translations).
</Callout>

### 5. Оберните getServerSideProps на страницах

Оберните `getServerSideProps` каждой страницы в **`withGTServerSideProps`**. При каждом запросе он определяет локаль пользователя — из cookie-файла `generaltranslation.locale`, если он задан, иначе из заголовка `Accept-Language` — загружает снимок переводов для этой локали и передаёт и то и другое в пропсы страницы:

```tsx title="pages/index.tsx"
import type { GetServerSideProps } from 'next';
import { withGTServerSideProps } from 'gt-next';

export const getServerSideProps: GetServerSideProps = withGTServerSideProps(
  async (context) => {
    return {
      props: {
        // ваши пропсы
      },
    };
  }
);
```

Если для страницы не нужны собственные серверные пропсы, вызовите её без аргументов:

```tsx title="pages/about.tsx"
import { withGTServerSideProps } from 'gt-next';

export const getServerSideProps = withGTServerSideProps();
```

`withGTServerSideProps` добавляет `locale` и `translations` в ваши пропсы (а также внутренний флаг `enableI18n`). Если внутренняя функция возвращает `redirect` или `notFound`, результат передаётся без изменений, а переводы не загружаются.

### 6. Добавьте GTProvider в приложение

Компонент **`GTProvider`** даёт всему приложению доступ к переводам. В `_app.tsx` извлеките внедрённые пропсы из `pageProps` и передайте их в провайдер. Тип **`WithGTServerSideProps`** описывает внедрённую структуру:

```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import { GTProvider, WithGTServerSideProps } from 'gt-next';

export default function App({
  Component,
  pageProps,
}: AppProps<WithGTServerSideProps>) {
  const { locale, translations, ...restPageProps } = pageProps;

  return (
    <GTProvider locale={locale} translations={translations}>
      <Component {...restPageProps} />
    </GTProvider>
  );
}
```

Поскольку локаль и переводы приходят вместе с ответом сервера, уже при первом рендере интерфейс отображается на языке пользователя — без client-side loading state.

### 7. Пометьте текст для перевода

Теперь оберните любой текст, который нужно перевести, в компонент **`<T>`**. `<T>` означает &quot;translate&quot;:

```tsx title="pages/index.tsx"
import { T } from 'gt-next';

export default function Home() {
  return (
    <main>
      <T>
        <h1>Welcome to my app</h1>
        <p>This content will be translated automatically.</p>
      </T>
    </main>
  );
}
```

Вы можете обернуть в `<T>` столько JSX, сколько захотите. Всё, что находится внутри — текст, вложенные элементы и даже форматирование, — переводится как единое целое.

### 8. Добавьте переключатель языка

Добавьте **`<LocaleSelector>`**, чтобы пользователи могли переключать язык:

```tsx title="pages/index.tsx"
import { T, LocaleSelector } from 'gt-next';

export default function Home() {
  return (
    <main>
      <LocaleSelector />
      <T>
        <h1>Welcome to my app</h1>
        <p>This content will be translated automatically.</p>
      </T>
    </main>
  );
}
```

`LocaleSelector` отображает выпадающий список с языками из вашего `gt.config.json`. Когда пользователь выбирает язык, `gt-next` сохраняет этот выбор в cookie-файл `generaltranslation.locale` и перезагружает страницу, чтобы сервер заново отрисовал всё в новой локали.

### 9. Настройте переменные окружения (необязательно)

Чтобы видеть переводы во время разработки, вам понадобятся ключи API от General Translation. Они включают **перевод по запросу** — приложение будет переводить контент в реальном времени по мере разработки.

Создайте файл **`.env.local`**:

```bash title=".env.local"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```

Получите бесплатные ключи на [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) или выполнив команду:

```bash
npx gt auth
```

<Callout type="warn">
  **Предупреждение:** Для разработки используйте ключ, начинающийся с `gtx-dev-`. Рабочие ключи (`gtx-api-`) предназначены только для CI/CD.

  Никогда не раскрывайте `GT_API_KEY` в браузере и не сохраняйте его в системе контроля версий.
</Callout>

### 10. Посмотрите, как это работает

Запустите сервер разработки:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dev
    ```
  </Tab>
</Tabs>

Откройте [http://localhost:3000](http://localhost:3000) и используйте выпадающий список выбора языка, чтобы переключаться между языками. Вы должны увидеть переведённый контент.

<Callout type="info">
  **Примечание:** В режиме разработки переводы выполняются по запросу, поэтому при первом переключении на новый язык вы можете ненадолго увидеть состояние загрузки. В продакшене переводы генерируются заранее и загружаются мгновенно.
</Callout>

### 11. Переводите строки, а не только JSX

Для обычных строк — например, атрибутов `placeholder`, значений `aria-label` или текста `alt` — используйте **хук `useGT`**:

```tsx title="pages/contact.tsx"
import { useGT } from 'gt-next';

export default function ContactPage() {
  const gt = useGT();

  return (
    <form>
      <input
        placeholder={gt('Enter your email')}
        aria-label={gt('Email input field')}
      />
      <button type="submit">{gt('Send')}</button>
    </form>
  );
}
```

### 12. Разверните приложение в production

В production переводы генерируются заранее на этапе сборки (без API-вызовов в реальном времени). Добавьте команду translate в скрипт сборки:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && next build"
  }
}
```

Настройте переменные окружения **production** у вашего хостинг-провайдера (Vercel, Netlify и т. д.):

```bash
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```

<Callout type="warn">
  **Предупреждение:** Рабочие ключи начинаются с `gtx-api-` (не `gtx-dev-`). Получить такой ключ можно на [dash.generaltranslation.com](https://dash.generaltranslation.com). Никогда не добавляйте к нему префикс `NEXT_PUBLIC_`.
</Callout>

Вот и всё — теперь ваше приложение поддерживает несколько языков. 🎉

## Устранение неполадок [#troubleshooting]

<Accordions>
  <Accordion title="Нужен ли `withGTServerSideProps` на каждой странице?">
    Да — `<GTProvider>` требует пропсы `locale` и `translations`, и они доступны только на страницах, где обёрнут `getServerSideProps`. Для страниц, которые не загружают собственные данные, экспортируйте вариант без аргументов:

    ```tsx
    export const getServerSideProps = withGTServerSideProps();
    ```
  </Accordion>

  <Accordion title="Можно ли вместо этого использовать `getStaticProps`?">
    Да. Оберните страницу с помощью `withGTStaticProps` и продолжайте передавать сгенерированные пропсы в `GTProvider` в `_app.tsx`. Полную настройку см. в [руководстве по Static Site Generation для Pages Router](/docs/react/nextjs/pages-router-static-site-generation).
  </Accordion>

  <Accordion title="Язык не меняется, когда я использую выпадающий список">
    `gt-next` хранит языковые предпочтения пользователя в cookie-файле с именем `generaltranslation.locale`. Если вы раньше тестировали другой язык, этот cookie-файл может переопределять ваш выбор. Очистите cookie-файлы и попробуйте снова.

    * [Chrome](https://support.google.com/chrome/answer/95647)
    * [Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
    * [Safari](https://support.apple.com/en-mn/guide/safari/sfri11471/16.0/mac/11.0)
  </Accordion>

  <Accordion title="Переводы работают медленно в режиме разработки">
    Это ожидаемо. В режиме разработки переводы выполняются по запросу (ваш контент переводится в реальном времени через API). Эта задержка **не возникает в production-среде** — все переводы предварительно генерируются с помощью `npx gt translate`.
  </Accordion>
</Accordions>
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables