tauri nextjs template

Tauri + Next.js Plantilla

Esta es una plantilla de proyecto Tauri que usa Next.js, Bootstrapped combinando create-next-app y create tauri-app .

Esta plantilla utiliza pnpm como administrador de dependencia node.js.

Características de la plantilla

• TypeScript Frontend usando el marco de reacción de Next.js
• Tailwindcss como un marco CSS atómico de utilidad
  • La página de ejemplo de esta aplicación de plantilla se ha actualizado para usar solo Tailwindcss
  • Si bien no está incluido de forma predeterminada, considere usar componentes React ARIA y/o componentes sin cabeza para componentes de UI completamente no establecidos y totalmente accesibles, que se integran muy bien con Tailwindcss
• Formato de obstáculos y pelusas ya configuradas y habilitadas
  • Eslint para pelusas Pure React + TypeScript, y Bioma para una combinación de formato rápido, pelusa e importación de la clasificación de código JavaScript y TypeScript
  • Clippy y Rustfmt para el código de óxido
• Acciones de GitHub para verificar el formato del código y la pelusa para TypeScript y Rust

Empezando

Ejecutar el servidor de desarrollo y usar la ventana Tauri

Después de clonarse por primera vez, configure Git Precomitar ganchos:

pnpm prepare

Para desarrollar y ejecutar el frontend en una ventana de Tauri:

pnpm dev

Esto cargará el siguiente frontend de la ventana Tauri WebView, además de iniciar un servidor de desarrollo en localhost:3000 .

Edificio para la liberación

Para exportar el siguiente frontend.js a través de SSG y construir la aplicación Tauri para la versión:

pnpm build

Recuerde cambiar el identificador del paquete en tauri.conf.json > tauri > bundle > identifier , ya que el valor predeterminado producirá un error que le impide construir la aplicación para la liberación.

Estructura fuente

Los archivos fuente de Next.js Frontend se encuentran en src/ y los archivos fuente de la aplicación Tauri Rust se encuentran en src-tauri/ . Consulte la documentación Next.js y Tauri respectivamente para preguntas relacionadas con cualquiera de las tecnologías.

Advertencias

Generación de sitios estático / prevenimiento

Next.js es un gran marco React Frontend que admite la representación del lado del servidor (SSR), así como la generación de sitios estática (SSG o pre-retención). Para crear una frontend de Tauri, solo se puede usar SSG ya que SSR requiere un servidor Node.js activo.

El uso de Next.js y SSG ayuda a proporcionar una experiencia frontend de la aplicación de una sola página (SPA) rápida y desempeñada. Se puede encontrar más información al respecto aquí: https://nextjs.org/docs/basic-fature/pages#pre-rendering

next/image

El next/image es una mejora sobre el elemento <img> HTML regular con optimizaciones adicionales incorporadas. Como tal, la propiedad unoptimized se establece en True para el componente next/image en la configuración next.config.js . Esto permitirá que la imagen se sirva como es de la fuente, sin cambios en su calidad, tamaño o formato.

Error [e0554]: #![feature] no se puede usar en el canal de liberación estable

Si tiene este problema al intentar ejecutar pnpm tauri dev , puede ser que tenga una versión más nueva de una dependencia de óxido que use una característica inestable. pnpm tauri build aún debería funcionar para las compilaciones de producción, pero para que el comando Dev funcione, degradar degrada la dependencia o usar Rust Nightly a través rustup override set nightly .

ReferenceError: el navegador no está definido

Si está utilizando la función invoke de Tauri o cualquier función de Tauri relacionada con el sistema operativo desde JavaScript, puede encontrar este error al importar la función en un contexto global sin Browser. Esto se debe a la naturaleza del servidor de desarrollo de Next.js que ejecuta efectivamente un servidor Node.js para SSR y reemplazo del módulo Hot (HMR), y Node.js no tiene una noción de window o navigator .

Solución 1 - Inyección de dependencia (puede que no siempre funcione)

Asegúrese de llamar a estas funciones dentro del contexto del navegador, por ejemplo, dentro de un componente React dentro de un gancho useEffect cuando el DOM realmente existe para entonces. Si está intentando usar una función Tauri en un archivo de origen de utilidad generalizado, una solución es usar la inyección de dependencia para la función misma para retrasar la importación real de la función real (consulte el ejemplo a continuación para obtener más información).

Ejemplo utilizando la función invoke de Tauri:

src/lib/some_tauri_functions.ts (problemático)

 // Generalized file containing all the invoke functions we need to fetch data from Rust
import { invoke } from "@tauri-apps/api/tauri"

const loadFoo = ( ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_foo" )
}

const loadBar = ( ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_bar" )
}

const loadBaz = ( ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_baz" )
}

// and so on ...

src/lib/some_tauri_functions.ts (fijo)

 // Generalized file containing all the invoke functions we need to fetch data from Rust
//
// We apply the idea of dependency injection to use a supplied invoke function as a
// function argument, rather than directly referencing the Tauri invoke function.
// Hence, don't import invoke globally in this file.
//
// import { invoke } from "@tauri-apps/api/tauri"  <-- remove this!
//

import { InvokeArgs } from "@tauri-apps/api/tauri"
type InvokeFunction = < T > ( cmd : string , args ?: InvokeArgs | undefined ) => Promise < T >

const loadFoo = ( invoke : InvokeFunction ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_foo" )
}

const loadBar = ( invoke : InvokeFunction ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_bar" )
}

const loadBaz = ( invoke : InvokeFunction ) : Promise < string > => {
  return invoke < string > ( "invoke_handler_baz" )
}

// and so on ...

Luego, cuando se use loadFoo / loadBar / loadBaz dentro de sus componentes React, importe la función Invoke desde @tauri-apps/api y pase invoke en la función Loadxxx como el argumento de InvokeFunction . Esto debería permitir que la API de Tauri real se agrupe solo dentro del contexto de un componente React, por lo que no debe cargarse en Siguiente.js al inicio inicial hasta que el navegador haya terminado de cargar la página.

SOLUCIÓN 2: API Tauri Wrap detrás de Dynamic import()

Dado que la API de Tauri necesita leer desde la window del navegador y el objeto navigator , estos datos no existen en un entorno de nodo.js y, por lo tanto, SSR. Uno puede crear una función exportada que envuelve la API Tauri detrás de una llamada dinámica import() .

Ejemplo: cree un src/lib/tauri.ts para reexportar invoke

 import type { InvokeArgs } from "@tauri-apps/api/tauri"

const isNode = ( ) : boolean =>
  Object . prototype . toString . call ( typeof process !== "undefined" ? process : 0 ) ===
  "[object process]"

export async function invoke < T > (
  cmd : string ,
  args ?: InvokeArgs | undefined ,
) : Promise < T > {
  if ( isNode ( ) ) {
    // This shouldn't ever happen when React fully loads
    return Promise . resolve ( undefined as unknown as T )
  }
  const tauriAppsApi = await import ( "@tauri-apps/api" )
  const tauriInvoke = tauriAppsApi . invoke
  return tauriInvoke ( cmd , args )
}

Luego, en lugar de importar import { invoke } from "@tauri-apps/api/tauri" , use Invoke de import { invoke } from "@/lib/tauri" .

Obtenga más información

Para obtener más información sobre Next.js, eche un vistazo a los siguientes recursos:

• Documentación Next.JS - Aprenda sobre las funciones de Next.js y la API.
• Aprende Next.js - Un tutorial interactivo Next.js.

Y para obtener más información sobre Tauri, eche un vistazo a los siguientes recursos:

• Documentación de Tauri - Guías - Aprenda sobre el kit de herramientas Tauri.