Speedrun Next.js

Resumen

En esta guía, repasaremos dos cosas:

Crear una nueva aplicación de Next.js
Internacionalizarla con Traducción General

En total, esto debería tomar menos de 10 minutos.

Prerrequisitos

Asumimos que tienes experiencia usando React de alguna manera y estás familiarizado con Typescript.

Paso 1: Crear una nueva aplicación 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-dir

Aparecerá un asistente de configuración, puedes simplemente seleccionar el valor predeterminado para cada opción.

Paso 2: Instalar las bibliotecas

Navega al directorio raíz de tu proyecto Next.js y ejecuta:

cd next-quickstart
npm i gt-next
npm i gtx-cli --save-dev

Paso 3: Añade tus variables de entorno.

Navega al Panel de Control. Ve a la página de Dev Api Keys en la barra de navegación y crea una nueva clave API y un ID de Proyecto. Luego añádelos a tu archivo .env.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Paso 4: Ejecutar la herramienta CLI

Ejecuta la herramienta CLI para configurar tu base de código para la traducción.

npx gtx-cli setup

Paso 5: Modificar el diseño 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.

src/app/layout.tsx

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.

Cambia tu idioma en Chrome
Cambia tu idioma en Firefox
Cambia tu idioma en Edge

Inicia tu aplicación Next.js.

npm run dev

Abre tu aplicación en tu navegador preferido (usualmente 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, verifica 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.

Speedrun Next.js

El idioma de mi aplicación no cambia, aunque he cambiado el idioma de mi navegador.

En esta página