Speedrun de Next.js
Hagamos un speedrun para crear una app nueva e internacionalizarla con GT.
Descripción general
En esta guía, veremos dos cosas:
- Crear una nueva app de Next.js
- Internacionalizarla con General Translation
En total, esto debería llevar menos de 10 minutos.
Requisitos previos
Suponemos que ya tienes experiencia usando React de alguna forma y que estás familiarizado con TypeScript.
Paso 1: Crea una nueva app de Next.js
Primero, ve al directorio de tu preferencia 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 por defecto para cada opción.
Paso 2: Instala las librerías
Ve al directorio raíz de tu proyecto de Next.js y ejecuta:
cd next-quickstart
npm i gt-next
npm i gtx-cliPaso 3: Agrega tus variables de entorno.
Ve al dashboard.
En la barra de navegación, abre la página de Dev API Keys y crea una nueva clave de API y un Project ID.
Luego añádelos 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 preparar tu código para la traducción.
npx gtx-cli setupPaso 5: Modificar el layout raíz
Modifica la prop lang en la etiqueta <html> del archivo src/app/layout.tsx.
Debe usar await getLocale() para obtener el locale 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 app
¡Tu app ya está internacionalizada! 🎉 ¡Probémosla!
Cambiemos la configuración de idioma de tu navegador.
Inicia tu app de 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 establecido en tu navegador.
Solución de problemas
Notas
- Traduce JSX arbitrario con el componente
<T>. - Si la traducción no funciona al cambiar el idioma, verifica las cookies del navegador.
Próximos pasos
- Dale una estrella a nuestro repositorio de GitHub gt-next.
- Configura la compatibilidad con idiomas de derecha a izquierda.
¿Qué te ha parecido esta guía?