tauri nextjs template
1.0.0
這是一個使用Next.js的Tauri項目模板，通過組合create-next-app並create tauri-app來引導。
該模板將pnpm用作node.js依賴項管理器。
首次克隆後，設置Git Pre-Commit鉤子：
pnpm prepare在陶裡窗口中開發和運行前端：
pnpm dev除了在localhost:3000 ，這還將直接在Tauri WebView窗口中加載。
要通過SSG導出下一個。
pnpm build請記住要更改tauri.conf.json > tauri > bundle > identifier中的捆綁包標識符，因為默認值將產生一個錯誤，從而阻止您構建發布應用程序以進行發布。
Next.js前端源文件位於src/中，Tauri Rust應用程序源文件位於src-tauri/ 。請分別諮詢Next.js和Tauri文檔，以獲取與任何兩種技術有關的問題。
Next.js是一個很棒的React前端框架，它支持服務器端渲染（SSR）以及靜態站點生成（SSG或Predendering）。為了創建Tauri Frontend，只能使用SSG，因為SSR需要一個Active node.js服務器。
使用Next.js和SSG有助於提供快速而性能的單頁應用程序（SPA）前端體驗。有關此信息的更多信息，請參見：https：//nextjs.org/docs/basic-features/pages#pre-rendering
next/image next/image組件是對常規<img> HTML元素的增強功能，並內置了其他優化。但是，由於我們沒有直接將前端部署到Vercel上，因此必須禁用一些優化來通過SSG正確構建和導出前端。因此，對於next.config.js配置中的next/image組件， unoptimized屬性設置為true。這將使圖像可以從源中提供，而不會改變其質量，大小或格式。
#![feature]不得在穩定版本頻道上使用如果您在嘗試運行pnpm tauri dev時會遇到此問題，則可能是您有使用不穩定功能的Rust依賴性版本的較新版本。 pnpm tauri build仍應用於生產構建，但是要使Dev命令正常工作，請降級依賴性或通過rustup override set nightly使用Rust。
如果您正在使用JavaScript中的Tauri的invoke函數或任何與OS相關的Tauri函數，則在全局，非瀏覽器上下文中導入該函數時，可能會遇到此錯誤。這是由於Next.js的開發服務器有效地運行了用於SSR和熱模塊替換（HMR）的Node.js服務器的性質，而Node.js則沒有window或navigator的概念。
確保您在瀏覽器上下文中調用這些功能，例如，當DOM實際存在時，在useEffect掛鉤內部的React組件中。如果您試圖在廣義實用程序文件中使用Tauri函數，則解決方法是使用依賴項注入該功能本身來延遲實際函數的實際導入（有關更多信息，請參見下面的示例）。
使用Tauri的invoke功能的示例：
src/lib/some_tauri_functions.ts （有問題）
// 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 （固定）
// 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 ...然後，當在您的React組件中使用loadFoo / loadBar / loadBaz時，請從@tauri-apps/api導入Indoke函數，然後將invoke作為InvokeFunction參數傳遞到LOADXXX函數中。這應該允許實際的Tauri API僅在React組件的上下文中捆綁在一起，因此Next.js不應在初始啟動時加載它，直到瀏覽器完成加載頁面為止。
import()由於Tauri API需要從瀏覽器的window和navigator對象讀取，因此該數據不存在於Node.js中，因此不存在SSR環境。可以創建一個導出的功能，該功能將Tauri API包裹在動態運行時import()調用後面。
示例：創建一個src/lib/tauri.ts以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 )
}然後，而不是import { invoke } from "@tauri-apps/api/tauri" ，而是import { invoke } from "@/lib/tauri"使用Invoke。
要了解有關Next.js的更多信息，請查看以下資源：
要了解有關Tauri的更多信息，請查看以下資源：
