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

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

Git

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

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>
  );
}