Cómo usar el componente <T>
¡Manos a la traducción!
Descripción general
¡Por fin llegó el momento de traducir!
Una vez que configures tus componentes <T>, podrás traducir tu aplicación a cualquier idioma que quieras.
En esencia, esto se reduce a dos pasos:
Agregar el componente <GTProvider>
Agregar el componente <T>
Agrega el componente <GTProvider>
Empecemos por agregar 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="es">
<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í.
Añade el componente <T>
La parte que estabas esperando…
Ahora solo tenemos que colocar un <T> al inicio del contenido y un cierre </T> al final.
No olvides añadir una cadena identificadora única que actúe como el id de la traducción.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;¡Y eso es todo! ¡Ya estás listo para empezar a traducir tu app!
¿Qué te parece esta guía?