tauri nextjs template
1.0.0
これは、next.jsを使用したタウリプロジェクトテンプレートであり、 create-next-appとcreate tauri-appを組み合わせてブートストラップします。
このテンプレートは、 pnpm node.js依存関係マネージャーとして使用します。
初めてクローニングした後、GIT Pre-Commitフックをセットアップしました。
pnpm prepareタウリウィンドウでフロントエンドを開発して実行するには：
pnpm devこれによりlocalhost:3000で開発サーバーを起動することに加えて、Tauri WebViewウィンドウにnext.js Frontendを直接ロードします。
SSGを介してNext.js Frontendをエクスポートし、リリースのためにタウリアプリケーションを構築するには：
pnpm build tauri.conf.json > tauri > bundle > identifierのバンドル識別子を変更することを忘れないでください。デフォルト値は、リリースのためにアプリケーションを構築するのを防ぐエラーを生成するためです。
Next.js FrontEndソースファイルはsrc/にあり、Tauri Rustアプリケーションソースファイルはsrc-tauri/にあります。いずれかのテクノロジーに関する質問については、それぞれNext.jsとタウリのドキュメントを参照してください。
Next.JSは、サーバー側のレンダリング（SSR）と静的サイト生成（SSGまたはプレレンダリング）をサポートする優れたReact FrontEndフレームワークです。タウリフロントエンドを作成する目的で、SSRにはアクティブなnode.jsサーバーが必要なため、SSGのみを使用できます。
next.jsとSSGを使用すると、迅速でパフォーマンスのあるシングルページアプリケーション（SPA）フロントエンドエクスペリエンスを提供するのに役立ちます。これに関する詳細については、https：//nextjs.org/docs/basic-features/pages#pre-renderingをご覧ください
next/image next/imageコンポーネントは、追加の最適化が組み込まれた通常の<img> HTML要素の強化です。ただし、SSGを介してフロントエンドを適切に構築およびエクスポートするには、FrontendをVercelに直接展開していないため、いくつかの最適化を無効にする必要があります。そのため、 unoptimizedプロパティは、 next.config.js構成のnext/imageコンポーネントにtrueに設定されます。これにより、品質、サイズ、または形式に変更することなく、ソースからISとして画像を提供できます。
#![feature]安定したリリースチャネルで使用できない場合がありますpnpm tauri devを実行しようとしているときにこの問題が発生している場合、不安定な機能を使用するRust依存関係の新しいバージョンがある可能性があります。 pnpm tauri build 、生産ビルドでも機能するはずですが、DEVコマンドを動作させるには、依存関係をダウングレードするか、毎晩rustup override set nightly錆を使用します。
Tauriのinvoke関数またはJavaScript内からOS関連のTauri関数を使用している場合、グローバルな非ブラウザーコンテキストで関数をインポートする際にこのエラーが発生する可能性があります。これは、next.jsのdevサーバーの性質によるものです。SSRおよびホットモジュール交換（HMR）のnode.jsサーバーを効果的に実行し、node.jsにはwindowまたはnavigatorの概念がありません。
ブラウザのコンテキスト内でこれらの関数を呼び出していることを確認してください。たとえば、DOMが実際に存在するときに、 useEffectフック内のReactコンポーネント内の例：一般化されたユーティリティソースファイルでタウリ関数を使用しようとしている場合、回避策は、関数自体の依存関係注入を使用して、実際の関数の実際のインポートを遅らせることです（詳細については以下の例を参照）。
タウリの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からInvoke関数をインポートし、 InvokeFunction引数としてPass invoke LoadXXX関数にインポートします。これにより、実際のTauri APIをReactコンポーネントのコンテキスト内でのみバンドルできるようにする必要があります。そのため、ブラウザがページの読み込みが終了するまで、最初の起動時にnext.jsがロードしないでください。
import()の背後にタウリAPIをラップタウリAPIはブラウザのwindowとnavigatorオブジェクトから読み取る必要があるため、このデータはnode.js、したがってSSR環境には存在しません。動的なランタイムimport()コールの背後にタウリAPIをラップするエクスポートされた関数を作成できます。
例： 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"を使用します。
next.jsの詳細については、次のリソースをご覧ください。
タウリの詳細については、次のリソースをご覧ください。
