Speedrun Next.js
Hagamos una speedrun creando una nueva aplicación e internacionalizándola con GT.
Descripción general
En esta guía, revisaremos dos cosas:
- Crear una nueva aplicación Next.js
- Internacionalizarla con General Translation
En total, esto debería tomar menos de 10 minutos.
Requisitos previos
Asumimos que ya tienes experiencia usando React de alguna manera y estás familiarizado con Typescript.
Paso 1: Crea una nueva app de Next.js
Primero, navega al directorio de tu elección en la terminal y ejecuta el siguiente comando:
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirAparecerá un asistente de configuración; puedes simplemente seleccionar el valor predeterminado para cada opción.
Paso 2: Instala las librerías
Navega al directorio raíz de tu proyecto Next.js y ejecuta:
cd next-quickstart
npm i gt-next
npm i gtx-cli --save-devPaso 3: Agrega tus variables de entorno.
Navega al Dashboard.
Ve a la página Dev Api Keys en la barra de navegación y crea una nueva API key y Project ID.
Luego agrégalas a tu archivo .env.
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"Paso 4: Ejecuta la herramienta CLI
Ejecuta la herramienta CLI para configurar tu base de código para la traducción.
npx gtx-cli setupPaso 5: Modifica el layout raíz
Modifica la prop lang en la etiqueta <html> en el archivo src/app/layout.tsx.
Debe usar await getLocale() para obtener la configuración regional actual.
import { GTProvider, getLocale } from "gt-next";
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale();
return (
<html lang={locale}> // [!code highlight]
<GTProvider>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</GTProvider>
</html>
);
}Paso 6: Inicia tu aplicación
¡Tu aplicación está internacionalizada! 🎉 ¡Vamos a probarla!
Cambiemos la configuración de idioma de tu navegador.
Inicia tu aplicación Next.js.
npm run devAbre tu aplicación en tu navegador preferido (normalmente en http://localhost:3000). Si has configurado todo correctamente, deberías ver tu aplicación en el idioma que configuraste en tu navegador.
Solución de problemas
Notas
- Traduce JSX arbitrario con el componente
<T>. - Si la traducción no funciona cuando cambias tu idioma, revisa las cookies de tu navegador.
Próximos pasos
- Dale una estrella a nuestro repositorio de GitHub gt-next.
- Configura el soporte para idiomas de derecha a izquierda.
- Prueba un ejemplo más avanzado.
¿Qué te parece esta guía?