Usando el componente <T>
¡Vamos a traducir!
Descripción general
¡Por fin es hora de hacer algunas traducciones!
Una vez que configures tus componentes <T>, ¡puedes traducir tu aplicación a cualquier idioma que desees!
En realidad, esto se divide en 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 tiene que hacerse 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>?
El <GTProvider> es responsable de pasar las traducciones del servidor al cliente.
Cada vez que queremos renderizar un componente <T> en el lado del cliente, necesitamos envolverlo en un <GTProvider>.
Puedes leer más sobre el componente <GTProvider> aquí.
Agrega el componente <T>
La parte que has estado esperando...
Ahora todo lo que tenemos que hacer es poner un <T> en la parte superior del contenido y un cierre </T> al final.
No olvides agregar una cadena de identificador única para 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! ¡Ahora estás listo para comenzar a traducir tu aplicación!
¿Qué te parece esta guía?