ITFB Consulting

Autor: pablonolascoo

  • NextJS

    NextJS Logo

    NEXTJS

    NextJS es un framework basado en React que permite desarrollar aplicaciones web rápidas y eficientes con renderizado del lado del servidor (SSR). Este enfoque mejora el rendimiento y el SEO de tus aplicaciones. Además, NextJS facilita la creación de rutas automáticas y la integración con servicios como Vercel para un despliegue sencillo. Además, con la integración de NextUI, puedes construir interfaces de usuario atractivas y funcionales de manera rápida y sencilla.

    0. Instalación de herramientas

    Node.js Logo

    Node.js

    Descarga e instala desde:
    https://nodejs.org/

    Git Logo

    Git

    Descarga e instala desde:
    https://www.git-scm.com/

    Visual Studio Code Logo

    Visual Studio Code

    Descarga e instala desde:
    https://code.visualstudio.com/

    Estas herramientas van a permitirte ejecutar Javascript en tu ordenador, gestionar las actualizaciones de código y editar los archivos de programación de una forma cómoda, sencilla y completa.

    0.0. Introducción a Visual Studio Code

    Visual Studio Code es una herramienta que permite navegar las carpetas de los proyectos que programes, así como crear los proyectos, modificarlos y probarlos.

    Para poder hacer esto contramos con tres secciones principales:

    1. Terminal

    La terminal permite ejecutar órdenes, estas órdenes permiten iniciar un proyecto, modificar carpetas, configurar opciones y demás. Hay varios tipos, así que tu interfaz se puede ver distinta, no es problema.

    2. Explorador

    Permite navegar por las carpetas y archivos de nuestro proyecto, ya que una app no es más que un conjunto de carpetas y archivos de texto.

    Una vez creado el proyecto, es simplemente abrir la carpeta que lo contiene. Siempre deberá verse algo similar, donde se identifican los archivos de configuración «.json», «.js» y similares. Y las carpetas que contendrán el resto de archivos de nuestra aplicación.

    3. Editor de Código

    Esta sección te permite visualizar y editar los archivos que conforman tu aplicación, es decir, aquí vamos a realizar todos los cambios y desarrollos de nuestra app.

    1. Configuración del proyecto NextJS

    Estas herramientas van a permitirte ejecutar Javascript en tu ordenador, gestionar las actualizaciones de código y editar los archivos de programación de una forma cómoda, sencilla y completa.

    1.1. Navegar a la carpeta de GitHub

    Usa la terminal para ejecutar los comandos que permiten navegar a la carpeta de GitHub. En windows reemplaza «TuUsuario» por el nombre de usuario que tengas.

    				
					# Mac y Linux
cd ~/Documents/GitHub
				
			
    				
					# Windows 
cd C:\Users\TuUsuario\Documents\GitHub

    1.2. Crea el proyecto NextJS

    Ejecuta el comando npx para comenzar la instalación del proyecto. Puedes sustituir my-next-app por cualquier nombre, usa minúsculas y no uses espacios, solo guión-medio. Te pedirá definir una configuración, en nuestro caso te recomendamos para iniciar:

    • Typescript: No
    • ESLint: Yes
    • Tailwind CSS: Yes
    • src/ directory: Yes
    • App Router: Yes
    • import alias: No

    Typescript es una capa sobre Javascript que permite definir tipos en las variables, haciéndolo algo más complejo pero facilitando la revisión de errores y la comprensión para otros programadores.

    ESLint permite revisar errores de escritura en código https://eslint.org/.

    Tailwind es una librería que permite hacer el diseño en cada línea de cada elemento (debemos usarlo para usar NextUI) https://tailwindcss.com/.

    src/ directory es para la estructura de proyecto, preferimos guardar las pantallas, componentes, módulos y demás en una misma carpeta https://nextjs.org/docs/getting-started/project-structure.

    App Router permite gestionar de una forma unificada la estructura de la app, más info en https://nextjs.org/docs/app.

    				
					npx create-next-app@latest my-next-app

    2. Instalación de módulos

    Vamos a utilizar el comando npm para instalar módulos React y Next, esto permite ampliar la funcionalidad y lógica de nuestra app, permitiendo hacer fácilmente todo lo que queramos.

    Componentes de NextUI

    NextUI https://nextui.org/ es una librería muy completa que facilita la integración de elementos gráficos de estilo minimalista, existen otras librerías muy conocidas como TailwindUI https://tailwindui.com/, MUI https://mui.com/ o React UI https://react-ui.dev/components.

    2.1. Instalación del módulo

    Usa la terminal para descargar NextUI en los módulos de tu proyecto.

    				
					npm install @nextui-org/react

    2.2. Configuración de NextUI

    Vamos a definir con un comentario siempre la ruta donde se debe encontrar este archivo y el tipo de archivo que es.

    Con esta configuración importamos la librería y luego envolvemos la app en el módulo que importamos.

    				
					// src/pages/_app.js
import { NextUIProvider } from '@nextui-org/react';

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

    2.3. Configuración de Tailwind con NextUI

    Si hemos seguido todos los pasos deberíamos tener un archivo en la carpeta raíz llamado «tailwind.config.js» similar a este.

    Lo importante es declarar:

    content: [..., "./node_modules/@nextui-org/...",],

    plugins: [nextui()],

    				
					// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  darkMode: "class",
  plugins: [nextui()],
};

    Componentes de i18next (traducciones e idiomas)

    i18next https://www.i18next.com/ es una biblioteca de internacionalización para aplicaciones web y móviles que facilita la gestión y traducción de contenido en múltiples idiomas. Permite detectar el idioma del usuario, cargar archivos de traducción y utilizar estos recursos para traducir textos en tiempo real. Con i18next, puedes asegurar que tu aplicación sea accesible y fácil de usar para una audiencia global, proporcionando traducciones dinámicas y adaptadas al contexto de uso.

    2.1. Instalación del módulo

    Usa la terminal para descargar NextUI en los módulos de tu proyecto.

    				
					npm install react-i18next i18next next-i18next i18next-http-backend i18next-browser-languagedetector

    2.2. Configuración de i18next

    Creamos un archivo en la carpeta raíz llamado «next-i18next.config.js» .

    Vamos a definir español e inglés, con el inglés como predeterminado.

    				
					// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
  },
};

    2.3. Configuración del proveedor

    Necesitamos configurar el proveedor en la ruta principal para que pueda realizar la traducción en cualquier momento.

    				
					// src/pages/_app.js
import '../styles/globals.css';
import { NextUIProvider } from '@nextui-org/react';
import { appWithTranslation } from 'next-i18next';
import nextI18NextConfig from '../../next-i18next.config';

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default appWithTranslation(MyApp, nextI18NextConfig);

    2.4. Mensajes de prueba

    Cada idioma se configura en un archivo «.json» que contiene todos los títulos, descripciones y demás.

    Estos archivos estarán en sus respectivas carpetas de traducción «/public/locales/idioma/common.json» en idioma se pone un código identificativo del mismo.

    				
					// public/locales/es/common.json
{
    "welcome": "¡Mensaje de bienvenida en español!"
}

    2.5. Cargar la traducción

    Podríamos poner texto plano como tenemos en el botón «Hola Mundo» sin embargo, vamos a usar la función «useTranslations» de i18next, ahí ponemos la referencia del texto a la traducción, «{t('welcome')}» .

    				
					// src/pages/index.js
import { Button } from '@nextui-org/react';
import { useTranslation } from 'react-i18next';

export default function Home() {
  const { t, i18n } = useTranslation('common');

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
        {t('welcome')}
      </h1>
      <div className="mt-4 flex space-x-2">
        <Button auto onClick={() => changeLanguage('en')}>
          <span role="img" aria-label="English">🇬🇧</span> English
        </Button>
        <Button auto onClick={() => changeLanguage('es')}>
          <span role="img" aria-label="Español">🇪🇸</span> Español
        </Button>
      </div>
    </div>
  );
}

  • Angular

  • React