Usando el componente <T>

Resumen

¡Finalmente es hora de hacer algunas traducciones! Una vez que configures tus componentes <T>, ¡puedes traducir tu aplicación a cualquier idioma que desees!

Realmente esto se divide en dos pasos:

Añadiendo el componente <GTProvider>

Añadiendo el componente <T>

Añadir el componente `<GTProvider>`

Comencemos añadiendo el componente <GTProvider> a tu aplicación. Lo bueno es que esto solo tiene que hacerse una vez.

src/app/layout.tsx

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í.

Añadir el Componente `<T>`

La parte que has estado esperando...

Ahora todo lo que tenemos que hacer es poner un <T> al principio del contenido y un </T> al final. No olvides añadir una cadena de identificador única para actuar como el id de la traducción.

src/app/page.tsx

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!

Usando el componente <T>

Resumen

Añadir el componente <GTProvider>

Añadir el Componente <T>

En esta página

Añadir el componente `<GTProvider>`

Añadir el Componente `<T>`