sábado 21 septiembre 2024

Cómo crear un proyecto con Next.js y Tauri

Next.js y Tauri son dos tecnologías potentes y modernas que combinan lo mejor del desarrollo web y el desarrollo nativo de escritorio. Next.js es un marco de React utilizado para crear aplicaciones web optimizadas, mientras que Tauri es una herramienta escrita en Rust que permite empaquetar aplicaciones web como aplicaciones de escritorio nativas. En este tutorial, te mostraremos cómo crear un proyecto que combine ambas tecnologías.

¿Qué es Next.js?

Next.js es un marco de desarrollo web que ofrece renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y características como rutas automáticas y optimización de rendimiento. Es muy popular en el ecosistema de React debido a sus capacidades avanzadas y su fácil integración con herramientas modernas.

Características principales de Next.js

SSR y SSG: Permite generar contenido dinámico o estático.
Pre-rendering: Todas las páginas se generan previamente para mejorar el rendimiento.
Rutas automáticas: Solo necesitas agregar archivos en la carpeta pages para crear rutas.
Optimización automática: Incluye optimización para imágenes, fuentes y otros recursos.

¿Qué es Tauri?

Tauri es un marco para crear aplicaciones de escritorio livianas y seguras utilizando tecnologías web como HTML, CSS y JavaScript, empaquetadas con Rust. Comparado con otros marcos como Electron, Tauri es extremadamente eficiente en cuanto al uso de recursos del sistema, lo que lo hace ideal para aplicaciones ligeras.

Características principales de Tauri

Uso mínimo de recursos: Las aplicaciones construidas con Tauri son mucho más pequeñas y rápidas que las de otros marcos.
Seguridad: Gracias a Rust, Tauri ofrece un entorno seguro para el desarrollo.
Cross-platform: Puedes compilar aplicaciones para Windows, macOS y Linux.
Integración con WebView: Usa las capacidades nativas de cada sistema operativo para mostrar contenido web en ventanas nativas.

Creando un Proyecto con Next.js y Tauri

A continuación, vamos a crear una aplicación utilizando Next.js para la parte de la interfaz web y Tauri para empaquetar la aplicación como una app de escritorio.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente instalado en tu máquina:

1. Node.js (para Next.js)

2. Rust (para Tauri)

3. Tauri CLI (herramientas de línea de comandos de Tauri)

4. Un editor de texto como VSCode.

Paso 1: Instalación de Rust y Tauri CLI

Primero, instala Rust en tu máquina. Ejecuta este comando en tu terminal:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Una vez que Rust esté instalado, puedes verificar que esté funcionando correctamente ejecutando:

rustc --version

Ahora, instala Tauri CLI con el siguiente comando:

cargo install tauri-cli

Paso 2: Crear el proyecto Next.js

El siguiente paso es crear tu aplicación Next.js. Abre tu terminal y ejecuta el siguiente comando:

npx create-next-app@latest nombre-del-proyecto

Esto creará un nuevo proyecto Next.js. A continuación, ingresa en el directorio del proyecto:

cd nombre-del-proyecto

Inicia el servidor de desarrollo para verificar que todo esté funcionando:

npm run dev

Accede a http://localhost:3000 en tu navegador, donde deberías ver la página de bienvenida de Next.js.

Paso 3: Configurar Tauri dentro del proyecto

Para integrar Tauri con Next.js, necesitamos configurar Tauri dentro del proyecto de Next.js. Primero, añade la configuración básica de Tauri en tu directorio de Next.js.

3.1. Inicializar Tauri en el proyecto

Ejecuta el siguiente comando para inicializar Tauri dentro de tu proyecto:

npx tauri init

El comando te hará algunas preguntas básicas:

¿Dónde está la carpeta de front-end? Especifica la carpeta donde está tu proyecto de Next.js, en este caso, la carpeta raíz (.).
¿Quieres que Tauri gestione el _dev server_? Elige No ya que Next.js manejará el servidor de desarrollo.
Framework a utilizar: No selecciones ninguno ya que usaremos Next.js.

Después de esto, Tauri habrá generado algunos archivos adicionales, incluyendo la carpeta src-tauri/ que contiene la configuración y el código en Rust para la parte nativa de tu aplicación.

3.2. Actualizar `tauri.conf.json`

En la configuración de Tauri (src-tauri/tauri.conf.json), actualiza la configuración para que apunte correctamente al servidor de desarrollo de Next.js durante el desarrollo y al _build_ en producción.

Para desarrollo, actualiza el campo devPath para que apunte al servidor de desarrollo de Next.js:

{
  "build": {
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  },
  "package": {
    "productName": "nombre-del-proyecto",
    "version": "0.1.0"
  },
  "tauri": {
    "windows": [
      {
        "label": "main",
        "url": "http://localhost:3000",
        "fullscreen": false
      }
    ]
  }
}

En modo producción, asegúrate de que distDir apunte al directorio correcto una vez que hayas hecho el _build_ de Next.js.

Paso 4: Configuración del entorno de desarrollo

Asegúrate de que los servidores de Next.js y Tauri estén sincronizados durante el desarrollo. Primero, inicia el servidor de desarrollo de Next.js en una terminal:

npm run dev

Luego, en otra terminal, ejecuta Tauri:

npm run tauri dev

Esto abrirá tu aplicación Next.js empaquetada dentro de una ventana de Tauri, permitiéndote trabajar en la aplicación web mientras ves los resultados en la app de escritorio.

Paso 5: Construir la aplicación para producción

Una vez que tu aplicación esté lista, puedes compilarla tanto en Next.js como en Tauri. Primero, crea la _build_ de Next.js:

npm run build

Esto generará los archivos optimizados para producción en el directorio out/.

Luego, empaqueta la aplicación como una app de escritorio con Tauri:

npm run tauri build

Este comando generará ejecutables nativos para tu sistema operativo (Windows, macOS o Linux), que podrás distribuir o instalar localmente.

Conclusión

Al combinar Next.js y Tauri, puedes crear aplicaciones web modernas que se ejecuten como aplicaciones nativas de escritorio con un uso mínimo de recursos. Next.js te permite construir aplicaciones web potentes y optimizadas, mientras que Tauri se encarga de empaquetarlas para múltiples plataformas sin necesidad de depender de marcos pesados como Electron.

Este flujo de trabajo es ideal para aquellos que buscan aprovechar sus habilidades en desarrollo web y expandirlas al mundo del desarrollo de aplicaciones de escritorio.

¡Ahora es tu turno! Crea tu primera aplicación con Next.js y Tauri, y disfruta de las ventajas de ambas tecnologías.

Etiquetas:

tauri nestjs javascript rust

Creado por:

Jorge García

Fullstack developer