tauri nextjs template

Tauri + Next.js Modelo

Este é um modelo de projeto Tauri usando o Next.js, inicializando combinando create-next-app e create tauri-app .

Este modelo usa pnpm como o Node.JS Dependence Manager.

Recursos de modelo

• Frontend TypeScript usando a estrutura Next.js React
• Tailwindcss como uma estrutura CSS atômica primeiro utilitária
  • A página de exemplo neste aplicativo de modelo foi atualizada para usar apenas Tailwindcsss
  • Embora não esteja incluído por padrão, considere o uso de componentes do React ARIA e/ou componentes sem cabeça para componentes de interface do usuário completamente não sintéticos e totalmente acessíveis, que se integram bem ao Tailwindcsss
• Formatação e linhagem opinativos já configurados e ativados
  • Eslint para React Pure + Lingo Digitoso e Bioma para uma combinação de formatação rápida, linhagem e classificação de importação de JavaScript e código TypeScript
  • clippy e rustfmt para código de ferrugem
• Ações do GitHub para verificar a formatação e o linhagem de código para ambas astigas e ferrugem

Começando

Executando o servidor de desenvolvimento e use a janela Tauri

Depois de clonar pela primeira vez, configure os ganchos Git pré-comprometimento:

pnpm prepare

Para desenvolver e executar o front -end em uma janela de Tauri:

pnpm dev

Isso carregará o Frontend Next.js diretamente em uma janela Tauri Webview, além de iniciar um servidor de desenvolvimento no localhost:3000 .

Edifício para liberação

Para exportar o Frontend Next.js via SSG e construir o aplicativo Tauri para liberação:

pnpm build

Lembre -se de alterar o identificador do pacote em tauri.conf.json > tauri > bundle > identifier , pois o valor padrão produzirá um erro que impede que você crie o aplicativo para liberação.

Estrutura de origem

Os arquivos de origem do front-end a partir de js estão localizados nos arquivos de origem do aplicativo src/ Tauri Rust estão localizados em src-tauri/ . Consulte a documentação Next.JS e Tauri, respectivamente, para perguntas relativas a qualquer tecnologia.

Advertências

Geração estática de geração / pré-renderização

Next.js é uma ótima estrutura de front-end do React, que suporta a renderização do lado do servidor (SSR), bem como a geração estática do site (SSG ou pré-renderização). Para fins de criação de um frontend de Tauri, apenas o SSG pode ser usado, pois o SSR requer um servidor node.js ativo.

O uso do Next.js e o SSG ajuda a fornecer uma experiência de front-end rápida e performente de página única (SPA). Mais informações sobre isso podem ser encontradas aqui: https://nextjs.org/docs/basic-features/pages#pre-rendering

next/image

O next/image é um aprimoramento sobre o elemento regular <img> HTML com otimizações adicionais incorporadas. No entanto, porque não estamos implantando o front -end diretamente, algumas otimizações devem ser desativadas para construir e exportar adequadamente o front -end via SSG. Como tal, a propriedade unoptimized está definida como true para o next/image na configuração next.config.js . Isso permitirá que a imagem seja servida como é da fonte, sem alterações em sua qualidade, tamanho ou formato.

Erro [e0554]: #![feature] não pode ser usado no canal de liberação estável

Se você estiver obtendo esse problema ao tentar executar pnpm tauri dev , pode ser que você tenha uma versão mais recente de uma dependência de ferrugem que use um recurso instável. pnpm tauri build ainda deve funcionar para as compilações de produção, mas para que o comando de desenvolvimento funcione, faça o downgrade da dependência ou use o Rust Nightly via rustup override set nightly .

ReferenceError: Navigator não está definido

Se você estiver usando a função invoke de Tauri ou qualquer função Tauri relacionada ao SO da JavaScript, poderá encontrar esse erro ao importar a função em um contexto global e não navegador. Isso se deve à natureza do servidor dev do Next.js, executando efetivamente um servidor Node.js para SSR e substituição do módulo quente (HMR), e o Node.js não possui uma noção de window ou navigator .

Solução 1 - Injeção de dependência (nem sempre funciona)

Certifique -se de que você esteja chamando essas funções no contexto do navegador, por exemplo, dentro de um componente React dentro de um gancho useEffect quando o DOM realmente existe até então. Se você estiver tentando usar uma função tauri em um arquivo de origem de utilidade generalizada, uma solução alternativa é usar a injeção de dependência para a própria função para adiar a importação real da função real (veja o exemplo abaixo para obter mais informações).

Exemplo usando a função 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 (fixado)

 // 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 ...

Em seguida, ao usar loadFoo / loadBar / loadBaz dentro dos componentes do React, importe a função Invoke da @tauri-apps/api e PASS invoke na função loadxxx como argumento InvokeFunction . Isso deve permitir que a API Tauri real seja agrupada apenas no contexto de um componente React, para que não seja carregada pelo Next.js na inicialização inicial até que o navegador termine de carregar a página.

Solução 2: Wrap Tauri API por trás import()

Como a API Tauri precisa ler a window do navegador e o objeto navigator , esses dados não existem em um ambiente Node.js e, portanto, SSR. Pode -se criar uma função exportada que envolva a API Tauri por trás de uma chamada dinâmica import() .

Exemplo: Crie um 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 )
}

Então, em vez de importar import { invoke } from "@tauri-apps/api/tauri" , use Invoke From import { invoke } from "@/lib/tauri" .

Saber mais

Para saber mais sobre o Next.js, dê uma olhada nos seguintes recursos:

• Documentação Next.JS - Saiba sobre os recursos e API do Next.JS.
• Aprenda Next.js - Um tutorial interativo do próximo.js.

E para saber mais sobre Tauri, dê uma olhada nos seguintes recursos:

• Documentação de Tauri - Guias - Aprenda sobre o kit de ferramentas de Tauri.