# gt-next: General Translation Next.js SDK: Быстрый старт с Next.js
URL: https://generaltranslation.com/ru/docs/next/tutorials/examples/next-speedrun.mdx
---
title: Быстрый старт с Next.js
description: Быстро создадим новое приложение и добавим в него интернационализацию с помощью GT
---
## Обзор
В этом руководстве мы рассмотрим две вещи:
* Создание нового приложения Next.js
* Добавление интернационализации с помощью General Translation
В общей сложности это займет менее 10 минут.
## Предварительные требования
Предполагается, что у вас уже есть некоторый опыт работы с React и вы знакомы с TypeScript.
***
## Шаг 1: Создайте новое приложение Next.js
Сначала перейдите в выбранный каталог в терминале и выполните следующую команду:
```bash copy
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir
```
Появится мастер настройки — просто оставьте значения по умолчанию для всех параметров.
## Шаг 2: Установите библиотеки
Перейдите в корневой каталог проекта Next.js и выполните:
```bash copy
cd next-quickstart
npm i gt-next
npm i gt
```
## Шаг 3: Добавьте переменные окружения.
Перейдите в [панель управления](https://generaltranslation.com/en-US/signin).
В панели навигации откройте страницу Dev Api Keys и создайте новый API-ключ и ID проекта.
Затем добавьте их в файл `.env`.
```bash copy
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"
```
## Шаг 4: Запустите CLI
Запустите CLI, чтобы подготовить кодовую базу к переводу.
```bash copy
npx gt setup
```
## Шаг 5: Измените корневой макет
Измените проп `lang` в теге `` в файле `src/app/layout.tsx`.
Для получения текущей локали используйте `await getLocale()`.
```javascript title="src/app/layout.tsx" copy
import { GTProvider } from "gt-next"; // [!code highlight]
import { getLocale } from "gt-next/server"; // [!code highlight]
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale(); // [!code highlight]
return (
// [!code highlight]
{children}
);
}
```
## Шаг 6: Запустите приложение
Ваше приложение теперь интернационализировано! 🎉
Давайте проверим!
Давайте изменим язык в настройках браузера.
* Измените язык в [Chrome](https://support.google.com/chrome/answer/173424)
* Измените язык в [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language)
* Измените язык в [Edge](https://support.microsoft.com/en-us/microsoft-edge/use-microsoft-edge-in-another-language-4da8b5e0-11ce-7ea4-81d7-4e332eec551f)
Запустите приложение Next.js.
```bash copy
npm run dev
```
Откройте приложение в удобном для вас браузере (обычно по адресу [http://localhost:3000](http://localhost:3000)).
Если всё настроено правильно, приложение должно отображаться на языке, выбранном в браузере.
***
## Устранение неполадок
**Файлы cookie в браузере**
Проверьте файлы cookie вашего приложения в браузере.
General Translation использует файлы cookie для хранения языковых предпочтений пользователя.
Этот файл cookie называется `generaltranslation.locale`, и всё, что нужно сделать, — удалить его.
Он будет находиться в `localhost:3000`.
Затем ещё раз убедитесь, что выбран нужный язык, и
обновите страницу.
После этого очищать файлы 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)
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/delete-cookies-in-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09)
***
## Примечания
* Переводите произвольный JSX с помощью компонента ``.
* Если при смене языка перевод не работает, проверьте файлы cookie в браузере.
## Следующие шаги
* Поставьте звезду нашему репозиторию [gt-next](https://github.com/General-Translation/gt-next) на GitHub.
* Настройте [поддержку языков с письмом справа налево](/docs/next/guides/rtl).