Uso del componente <T>
¡Vamos a traducir!
Descripción general
¡Por fin llegó el momento de traducir!
Una vez que configures tus componentes <T>, ¡podrás traducir tu app a cualquier idioma que quieras!
En realidad, esto se reduce a dos pasos:
Agregar el componente <GTProvider>
Agregar el componente <T>
Agrega el componente <GTProvider>
Comencemos agregando el componente <GTProvider> a tu aplicación.
Lo bueno es que esto solo hay que hacerlo una vez.
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>
);
}¿Por qué necesitamos el componente <GTProvider>?
<GTProvider> se encarga de pasar las traducciones del servidor al cliente.
Cada vez que queramos renderizar un componente <T> en el cliente, debemos envolverlo en un <GTProvider>.
Puedes obtener más información sobre el componente <GTProvider> aquí.
Agrega el componente <T>
La parte que estabas esperando...
Ahora, lo único que tenemos que hacer es colocar un <T> al inicio del contenido y su cierre </T> al final.
No olvides agregar una cadena de identificador única que actúe como id de la traducción.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;¡Eso es todo! ¡Ahora estás listo para empezar a traducir tu aplicación!
¿Qué te ha parecido esta guía?