# gt-next: General Translation Next.js SDK: Обзор
URL: https://generaltranslation.com/ru/docs/next/introduction.mdx
---
title: Обзор
description: Обзор SDK Next.js от General Translation
---
## Введение
Next.js SDK от General Translation — это библиотека интернационализации (i18n) с открытым исходным кодом для приложений на Next.js.
Она предоставляет полный набор инструментов для интернационализации вашего приложения на Next.js простым и удобным в сопровождении способом, не уступая по возможностям другим популярным библиотекам i18n. SDK построен на базе [React SDK](/docs/react) и предлагает дополнительные возможности, специфичные для Next.js.
SDK можно использовать автономно, без платформы General Translation, и в этом режиме он работает аналогично другим библиотекам i18n.
Однако он также интегрируется с нашей платформой и предоставляет дополнительные возможности:
* Горячая перезагрузка переводов в режиме разработки
* Автоматические переводы с помощью ИИ
* Синхронизация переводов с платформой General Translation
* Нативная интеграция с нашим CDN переводов
* On-demand перевод React-компонентов в продакшене (на стороне сервера)
## Основные понятия
Чтобы работать с SDK, нужно понимать 6 основных концепций.
Инициализация с [`withGTConfig`](/docs/next/api/config/with-gt-config)
Компонент [``](/docs/next/api/components/gtprovider)
Компонент [``](/docs/next/api/components/t)
хук [`useGT`](/docs/next/api/strings/use-gt)
Функция [`msg`](/docs/next/api/strings/msg) для общих строк
(Необязательно) хук [`useTranslations`](/docs/next/api/dictionary/use-translations)
## Инициализация через `withGTConfig`
Функция [`withGTConfig`](/docs/next/api/config/with-gt-config) инициализирует SDK в вашем приложении Next.js.
Добавьте её в файл `next.config.[js|ts]`, чтобы настроить SDK:
```tsx title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// Ваши параметры next.config.ts
};
export default withGTConfig(nextConfig, {
// Ваша конфигурация GT
});
```
Подробнее см. в [справке по API withGTConfig](/docs/next/api/config/with-gt-config).
## Компонент ``
Компонент [``](/docs/next/api/components/gtprovider) предоставляет приложению контекст перевода, включая текущий язык и соответствующие переводы.
```tsx
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Важно:** Провайдер должен оборачивать всё приложение и располагаться как можно выше в дереве компонентов, например в корневом layout.
Провайдер нужен только для функций, работающих на стороне клиента. В приложениях, работающих только на стороне сервера, он не требуется, но при необходимости его всё равно можно использовать.
Подробнее см. в [справке API `GTProvider`](/docs/next/api/components/gtprovider).
## Компонент ``
Компонент [``](/docs/next/api/components/t) — рекомендуемый способ перевода контента в вашем приложении.
Это React-компонент, который можно использовать как обёртку для любого JSX-элемента. Он автоматически отображает содержимое элемента на одном из поддерживаемых языков.
Мы рекомендуем по возможности использовать компонент [``](/docs/next/api/components/t), поскольку он обеспечивает максимальную гибкость при переводе.
В отличие от строк, компонент [``](/docs/next/api/components/t) можно использовать для перевода HTML-контента, что делает его гораздо более мощным инструментом, чем перевод строк.
### Примеры
```tsx
Hello, world!
```
```tsx
Here is an image
```
```tsx
Formatting can be done easily with the `` component.
{1000}{new Date()}{1000}
```
Компонент [``](/docs/next/api/components/t) работает с [переменными компонентами](/docs/next/guides/variables), такими как [``](/docs/next/api/components/num), [``](/docs/next/api/components/datetime) и [``](/docs/next/api/components/currency), для форматирования динамических данных.
См. [руководство по компоненту ``](/docs/next/guides/t), чтобы узнать о разных способах использования компонента [``](/docs/next/api/components/t).
## хук `useGT`
[`useGT`](/docs/next/api/strings/use-gt) — это React хук, который можно использовать аналогично компоненту [``](/docs/next/api/components/t), но с некоторыми компромиссами.
Этот хук возвращает функцию, которую можно использовать для перевода строк.
```tsx
const gt = useGT();
gt('Hello, world!');
```
По сравнению с компонентом [``](/docs/next/api/components/t), хук [`useGT`](/docs/next/api/strings/use-gt) дает больше гибкости в вашей кодовой базе.
Например, если у вас сложная структура данных с вложенными строками, использовать компонент [``](/docs/next/api/components/t) будет труднее.
```tsx
const gt = useGT();
const data = {
title: gt('Hello, world!'),
description: gt('This is a description'),
};
```
См. руководство [по строкам](/docs/next/guides/strings), чтобы подробнее узнать о хуке [`useGT`](/docs/next/api/strings/use-gt).
## Функция `msg`
Функция [`msg`](/docs/next/api/strings/msg) используется, чтобы помечать строки для перевода, если они используются в нескольких компонентах или хранятся в объектах конфигурации.
Это особенно полезно для общего контента, например меток навигации, сообщений форм или любого текста, который встречается в нескольких местах приложения.
```tsx
// Пометить строки для перевода
import { msg } from 'gt-next';
const navItems = [
{ label: msg('Home'), href: '/' },
{ label: msg('About'), href: '/about' },
{ label: msg('Contact'), href: '/contact' }
];
```
```tsx
// Декодируем и используем помеченные строки
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
);
}
```
Функция [`msg`](/docs/next/api/strings/msg) кодирует строки с метаданными перевода, а [`useMessages`](/docs/next/api/strings/use-messages) (или [`getMessages`](/docs/next/api/strings/get-messages) для серверных компонентов) декодирует их.
Используйте [`msg`](/docs/next/api/strings/msg) для общего контента, который должен переводиться единообразно во всём приложении. Для контента, относящегося к конкретному компоненту, лучше использовать [``](/docs/next/api/components/t) или [`useGT`](/docs/next/api/strings/use-gt).
Подробнее см. в руководстве [общие строки](/docs/next/guides/shared-strings), чтобы узнать больше о функции `msg`.
## Хук `useTranslations`
Хук [`useTranslations`](/docs/next/api/dictionary/use-translations) — это React хук, который возвращает функцию для получения переводов по заданному ключу.
```tsx title="dictionary.ts"
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
```
```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```
Это поведение похоже на поведение других библиотек для локализации, таких как [`react-i18next`](https://react.i18next.com/) и [`next-intl`](https://next-intl-docs.vercel.app/).
Мы не рекомендуем использовать хук [`useTranslations`](/docs/next/api/dictionary/use-translations) в приложении. Частое использование хука [`useTranslations`](/docs/next/api/dictionary/use-translations) усложнит поддержку вашей кодовой базы
и приведёт к значительному техническому долгу.
Вместо этого мы рекомендуем использовать компонент [``](/docs/next/api/components/t) или хук [`useGT`](/docs/next/api/strings/use-gt).
Если вы переходите с другой библиотеки i18n, хук [`useTranslations`](/docs/next/api/dictionary/use-translations) является прямой заменой и может быть полезен для поэтапной миграции вашей кодовой базы.
См. руководство [словари](/docs/next/guides/dictionaries), чтобы узнать больше о хуке [`useTranslations`](/docs/next/api/dictionary/use-translations).
Подробнее см. в [справке по API useTranslations](/docs/next/api/dictionary/use-translations).
***
## Дальнейшие шаги
**Посмотрите в действии:** Ознакомьтесь с [рабочими примерами приложений](/docs/next/tutorials/examples), демонстрирующими каждый подход, или просмотрите полный [каталог приложений](https://app-catalog.generaltranslation.dev).
* Узнайте, как настроить проект Next.js с помощью SDK: [Быстрый старт](/docs/next)
* Узнайте, как переводить содержимое JSX с помощью компонента [``](/docs/next/api/components/t): [Руководство по переводу JSX](/docs/next/guides/t)
* Узнайте, как переводить строки с помощью хука [`useGT`](/docs/next/api/strings/use-gt): [Руководство по переводу строк](/docs/next/guides/strings)
* Узнайте, как работать с общими строками с помощью функции [`msg`](/docs/next/api/strings/msg): [Руководство по общим строкам](/docs/next/guides/shared-strings)
