Configuración

Introducción

Este es un tutorial más detallado sobre cómo configurar un proyecto muy simple de NextJS usando gt-next. Te llevaremos desde el principio hasta el final, incluyendo la configuración del proyecto y luego su traducción. A lo largo de este tutorial, construiremos nuestro camino desde conceptos simples hasta más avanzados. Este tutorial asume que tienes un entendimiento general de Typescript, Next.js y React.

Aquí hay una lista de elementos que cubriremos en este tutorial:

Configuración de un nuevo proyecto de Next.js
Uso del componente <T> para traducir una aplicación
Uso de componentes de variable como <Var>, <Currency>, <DateTime>, y <Num> para traducir contenido dinámico
Uso de componentes de rama como <Plural>, y <Branch> para traducir contenido condicional
Uso de enrutamiento i18n en tu aplicación

Nuestra aplicación será una aplicación simple que nos permitirá verificar la tasa de conversión entre monedas. Solo usaremos estilos en línea y solo la biblioteca gt-next para mantener las cosas lo más simples posible. Este ejemplo fue construido basado en el tutorial de Currency Converter en GeeksforGeeks.

Configura Tu Próxima Aplicación

Primero, vamos a crear una nueva aplicación NextJS. Puedes hacerlo ejecutando el siguiente comando:

npx create-next-app@latest

Esto te llevará al asistente de configuración, donde puedes elegir el nombre de tu aplicación y la plantilla que deseas usar. Para este tutorial, usa el nombre currencies y selecciona Sí cuando se te pregunte si deseas usar TypeScript.

Navega al directorio del proyecto, ¡y comencemos la aplicación!

cd currencies
npm install
npm run dev

Esto iniciará la aplicación en http://localhost:3000.

¡Agreguemos Algo de Contenido!

Ahora que tenemos nuestra aplicación configurada, vamos a sobrescribir el contenido de nuestra aplicación para mostrar un simple convertidor de divisas. Simplemente copia y pega el siguiente código en los archivos src/app/page.tsx y src/app/layout.tsx.

No te preocupes demasiado por cómo funciona por ahora. Todo este código hace es simular una obtención de datos de una API de intercambio de divisas y muestra la tasa de cambio entre dos monedas.

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
 
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
 
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});
 
export const metadata: Metadata = {
  title: "Currency Converter",
  description: "A simple currency converter",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Conclusión

Ahora tienes una aplicación normal de NextJS configurada y lista para ser traducida usando gt-next.

Configuración

Introducción

Configura Tu Próxima Aplicación

¡Agreguemos Algo de Contenido!

Conclusión

En esta página