Wed. Nov 13th, 2024

Cómo crear una aplicación de escritorio con Next.js y Electron utilizando Nextron

By admin Jan 29, 2024

Next.js es un marco React moderno para crear aplicaciones web. Algunos pueden argumentar que no es adecuado para crear aplicaciones de escritorio, pero están equivocados. Se puede utilizar para potentes aplicaciones de escritorio utilizando Nextron, que es un iniciador para Electron + Next.js.

Electron es un marco de software gratuito y de código abierto para crear aplicaciones de escritorio. Se basa en el motor del navegador Chromium de código abierto como una capa para ejecutar aplicaciones de escritorio utilizando el entorno de ejecución Node.js.

Nextron combina Nex.js en su última versión y Electron para facilitar a los desarrolladores comenzar a crear aplicaciones de escritorio en Next.js sin la necesidad de una configuración extensa.

Características

  1. Proporciona una herramienta sencilla para crear aplicaciones de escritorio para desarrolladores de Next.js.
  2. Código abierto y gratuito
  3. Admite tanto TypeScript como JavaScript
  4. Admite muchos marcos: Tailwind UI, Ant Design UI, Emotion UI
  5. Ofrece varios entrantes y muestras.
  6. Admite NPX, YARN y PNPX
  7. Fácil de configurar
  8. Admite varias opciones de compilación para Windows, Linux, macOS
  9. Objetivo de compilación personalizado
  10. Configuración personalizada
  11. Fácil de agregar, configurar y usar paquetes electrónicos específicos

Configuración

Nextron le permite configurar su proyecto como cualquier otro proyecto Next.js, usando next.config.jspero también puede agregar un paquete web personalizado y crear una configuración usando el nextron.config.js que es similar al archivo de configuración Next.js.

Muchos entrantes

Además, viene con muchos iniciadores de muestra que pueden tener su configuración favorita:

  1. Marco de interfaz de usuario Ant Design React: TypeScript y JavaScript
  2. Marco CSS Tailwind: TypeScript y JavaScript
  3. Marco de emociones: TypeScript y JavaScript
  4. Interfaz de usuario de material en JavaScript y TypeScript
  5. Mecanografiado y JavaScript
  6. Admite recarga en caliente

También ofrece diferentes muestras o iniciadores para construcciones personalizadas.

Nextron es un proyecto activo mantenido por muchos desarrolladores que lo mantienen actualizado con las versiones más recientes de Next.js y Electron.

¿Cómo utilizar Nextron?

Primero debe elegir su iniciador y descargarlo en su máquina de desarrollo, luego, dentro del directorio de su proyecto, instale los paquetes y luego ejecute:

// yarn
yarn dev
// or
npm run dev

Se necesitan varios minutos para ejecutar la aplicación de escritorio y ya está listo para comenzar.

¿Cómo crear su aplicación para Windows, Linux y macOS?

De forma predeterminada, puede ejecutar yarn build que construye su aplicación para el sistema operativo de su máquina actual y genera paquetes empaquetados bajo el dist carpeta. Pero tienes varias otras opciones de compilación que puedes agregar packages.json archivo para otros sistemas operativos:

"scripts": {
"dev": "nextron",
"build": "nextron build",
"build:all": "nextron build --all",
"build:win32": "nextron build --win --ia32",
"build:win64": "nextron build --win --x64",
"build:mac": "nextron build --mac --x64",
"build:linux": "nextron build --linux",
"postinstall": "electron-builder install-app-deps"
},

Ahora, puede crear su aplicación para un sistema operativo específico como yarn build:maco compilar para todos los sistemas operativos como: yarn build:all que genera su paquete empaquetado de acuerdo con su configuración.

Nota del desarrollador

Mientras usaba este proyecto para un proyecto rápido “Aplicación Generador de Facturas”, noté que la configuración de las páginas predeterminadas es lenta para cargar y recuperar datos de fuentes locales y remotas. Recomiendo no utilizar las rutas y páginas predeterminadas de Next.js al crear una aplicación grande.

Licencia

Nextron es un proyecto de código abierto que se publica bajo la licencia MIT.

Recursos

Etiquetas

By admin

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *