Использование компонента <T>
Давайте займёмся переводом!
Обзор
Пора заняться переводом!
После настройки компонентов <T> вы сможете перевести приложение на любой язык.
Всё сводится к двум шагам:
Добавить компонент <GTProvider>
Добавить компонент <T>
Добавьте компонент <GTProvider>
Начнём с добавления компонента <GTProvider> в ваше приложение.
Хорошая новость: это нужно сделать всего один раз.
import { GTProvider } from 'gt-next'
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}Зачем нужен компонент <GTProvider>?
<GTProvider> отвечает за передачу переводов с сервера на клиент.
Каждый раз, когда мы хотим отрендерить компонент <T> на клиенте, его нужно обернуть в <GTProvider>.
Подробнее о компоненте <GTProvider> можно прочитать здесь.
Добавьте компонент <T>
Тот самый момент, которого вы ждали...
Теперь всё, что нужно сделать, — поместить <T> в начало контента и закрывающий </T> в конец.
Не забудьте добавить уникальную строку-идентификатор, которая будет использоваться как id перевода.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;Вот и всё! Теперь вы готовы приступить к переводу своего приложения!
Насколько полезно это руководство?