tauri nextjs template
1.0.0
Dies ist eine Tauri-Projektvorlage mit Next.js, die durch Kombination create-next-app und create tauri-app .
Diese Vorlage verwendet pnpm als Node.js -Abhängigkeitsmanager.
Nach dem ersten Klonen erstmals Git Pre-Commit-Haken einrichten:
pnpm prepareUm das Frontend in einem Tauri -Fenster zu entwickeln und zu führen:
pnpm dev Dadurch wird das nächste.js Frontend direkt in einem Tauri -Webview -Fenster geladen, zusätzlich zu einem Entwicklungsserver auf localhost:3000 .
So exportieren Sie das nächste.js Frontend über SSG und erstellen Sie die Tauri -Anwendung zur Veröffentlichung:
pnpm build Bitte denken Sie daran, die Bündelkennung in tauri.conf.json > tauri > bundle > identifier zu ändern, da der Standardwert einen Fehler ergibt, der Sie daran hindert, die Anwendung zur Freigabe zu erstellen.
NEXT.JS Frontend-Quelldateien befinden sich in src/ und Tauri Rust Application Source-Dateien befinden sich in src-tauri/ . Bitte wenden Sie sich an die Dokumentation der nächsten.
Next.js ist ein großes React Frontend-Framework, das das Server-Side-Rendering (SSR) sowie die statische Site-Generierung (SSG oder Vorrendern) unterstützt. Um einen Tauri -Frontend zu erstellen, kann nur SSG verwendet werden, da SSR einen aktiven Node.js -Server benötigt.
Die Verwendung von Next.js und SSG trägt dazu bei, ein schnelles und leistungsstärkeres einseitiges Frontend-Erlebnis (Spa) zu bieten. Weitere Informationen dazu finden Sie hier: https://nextjs.org/docs/basic-features/pages#pre-rendering
next/image Die next/image ist eine Verbesserung über das reguläre <img> HTML -Element mit zusätzlichen Optimierungen eingebaut. Da wir das Frontend jedoch nicht direkt auf Vercel einsetzen, müssen einige Optimierungen deaktiviert werden, um das Frontend über SSG ordnungsgemäß zu erstellen und zu exportieren. Daher wird die unoptimized Eigenschaft für die next/image in der next.config.js -Konfiguration auf TRUE eingestellt. Auf diese Weise kann das Bild als IS von Quelle, ohne Änderungen an der Qualität, Größe oder Format, serviert werden.
#![feature] wird möglicherweise nicht im stabilen Release -Kanal verwendet Wenn Sie dieses Problem erhalten, wenn Sie versuchen pnpm tauri dev auszuführen, können Sie eine neuere Version einer Rostabhängigkeit haben, die eine instabile Funktion verwendet. pnpm tauri build sollte weiterhin für Produktionsergebnisse funktionieren, aber um den Entwicklungsbefehl zum Laufen zu bringen, entweder die Abhängigkeit herabzustufen oder Rostnightly über rustup override set nightly .
Wenn Sie die Tauri- invoke Funktion oder eine OS-verwandte Tauri-Funktion aus JavaScript verwenden, können Sie diesen Fehler beim Importieren der Funktion in einem globalen, nicht-Browser-Kontext begegnen. Dies liegt an der Art von Next.js 'Dev -Server, der einen Node.js -Server für SSR und Hot Modul Exetement (HMR) effektiv ausführt, und Node.js hat keinen Vorstellung von window oder navigator .
Stellen Sie sicher, dass Sie diese Funktionen im Browser -Kontext aufrufen, z. B. innerhalb einer React -Komponente innerhalb eines useEffect -Hooks, wenn das DOM bis dahin tatsächlich existiert. Wenn Sie versuchen, eine Tauri -Funktion in einer verallgemeinerten Versorgungsquellendatei zu verwenden, besteht eine Problemumgehung darin, die Abhängigkeitsinjektion für die Funktion selbst zu verwenden, um das tatsächliche Import der realen Funktion zu verzögern (Beispiel unten für weitere Informationen).
Beispiel unter Verwendung von Tauri's invoke -Funktion:
src/lib/some_tauri_functions.ts (problematisch)
// 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 (behoben)
// 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 ... Importieren Sie dann bei Verwendung loadFoo / loadBar / loadBaz in Ihren React-Komponenten die invoke von @tauri-apps/api und geben Sie in die Loadxxx-Funktion als InvokeFunction Argument über. Auf diese Weise sollte die tatsächliche Tauri -API nur im Kontext einer React -Komponente gebündelt werden, sodass sie beim ersten Start nicht durch den nächsten.js geladen werden sollte, bis der Browser das Laden der Seite beendet hat.
import() ein.) Da die Tauri -API aus dem window und dem navigator des Browsers lesen muss, existieren diese Daten nicht in einem Knoten.js und damit in SSR -Umgebung. Man kann eine exportierte Funktion erstellen, die die Tauri -API hinter einem dynamischen Laufzeit import() -Anruf umschließt.
Beispiel: Erstellen Sie einen src/lib/tauri.ts um wieder zu 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 )
} Anstatt import { invoke } from "@tauri-apps/api/tauri" importieren, verwenden Sie auf import { invoke } from "@/lib/tauri" .
Um mehr über Next.js zu erfahren, sehen Sie sich die folgenden Ressourcen an:
Um mehr über Tauri zu erfahren, werfen Sie einen Blick auf die folgenden Ressourcen:
