tauri nextjs template

Tauri + Next.js Template

Ini adalah templat proyek Tauri menggunakan Next.js, bootstrap dengan menggabungkan create-next-app dan create tauri-app .

Template ini menggunakan pnpm sebagai manajer ketergantungan Node.js.

Fitur Template

• Frontend Typescript Menggunakan Next.js React Framework
• TailwindCSS sebagai kerangka kerja CSS atom utilitas-pertama
  • Halaman contoh dalam aplikasi template ini telah diperbarui untuk hanya menggunakan tailwindcss
  • Meskipun tidak termasuk secara default, pertimbangkan untuk menggunakan komponen react aria dan/atau komponen headlessui untuk komponen UI yang sepenuhnya tidak masuk akal dan dapat diakses sepenuhnya, yang terintegrasi dengan baik dengan tailwindcss
• Pemformatan dan serat yang telah disetel dan diaktifkan
  • Eslint untuk linting Type -React + Pure React, dan Biome untuk kombinasi pemformatan cepat, linting, dan impor penyortiran javascript dan kode TypeScript
  • clippy dan rustfmt untuk kode karat
• Tindakan GitHub untuk memeriksa pemformatan kode dan linting untuk naskah dan karat

Memulai

Menjalankan Server Pengembangan dan Gunakan Jendela Tauri

Setelah kloning untuk pertama kalinya, atur kait pra-komit git:

pnpm prepare

Untuk mengembangkan dan menjalankan frontend di jendela Tauri:

pnpm dev

Ini akan memuat frontend berikutnya.js langsung di jendela Webview Tauri, selain memulai server pengembangan di localhost:3000 .

Bangunan untuk rilis

Untuk mengekspor frontend berikutnya.js melalui SSG dan membangun aplikasi Tauri untuk rilis:

pnpm build

Harap ingat untuk mengubah pengidentifikasi bundel di tauri.conf.json > tauri > bundle > identifier , karena nilai default akan menghasilkan kesalahan yang mencegah Anda membangun aplikasi untuk rilis.

Struktur sumber

File Sumber Frontend Next.js terletak di file sumber aplikasi src/ dan Tauri Rust terletak di src-tauri/ . Silakan berkonsultasi dengan dokumentasi Next.js dan Tauri masing -masing untuk pertanyaan yang berkaitan dengan kedua teknologi tersebut.

Peringatan

Pembuatan situs statis / pra-rendering

Next.js adalah kerangka kerja Frontend yang hebat yang mendukung rendering sisi server (SSR) serta pembuatan situs statis (SSG atau pra-rendering). Untuk keperluan membuat frontend Tauri, hanya SSG yang dapat digunakan karena SSR memerlukan server Node.js yang aktif.

Menggunakan Next.js dan SSG membantu memberikan pengalaman frontend single-page-application (SPA) yang cepat dan berkinerja. Informasi lebih lanjut tentang hal ini dapat ditemukan di sini: https://nextjs.org/docs/basic-features/pages#pre-rendering

next/image

Komponen next/image adalah peningkatan atas elemen <img> HTML reguler dengan optimisasi tambahan yang dibangun. Namun, karena kami tidak menggunakan frontend ke Vercel secara langsung, beberapa optimisasi harus dinonaktifkan untuk membangun dan mengekspor frontend melalui SSG. Dengan demikian, properti unoptimized diatur ke true untuk komponen next/image di konfigurasi next.config.js . Ini akan memungkinkan gambar untuk disajikan apa adanya dari sumber, tanpa perubahan kualitas, ukuran, atau formatnya.

Kesalahan [E0554]: #![feature] mungkin tidak digunakan pada saluran rilis yang stabil

Jika Anda mendapatkan masalah ini ketika mencoba menjalankan pnpm tauri dev , mungkin Anda memiliki versi yang lebih baru dari ketergantungan karat yang menggunakan fitur yang tidak stabil. pnpm tauri build masih harus bekerja untuk pembuatan produksi, tetapi untuk membuat perintah dev berfungsi, baik menurunkan ketergantungan atau menggunakan karat setiap malam melalui rustup override set nightly .

ReferenceError: Navigator tidak didefinisikan

Jika Anda menggunakan fungsi invoke Tauri atau fungsi Tauri terkait OS apa pun dari dalam JavaScript, Anda dapat menemukan kesalahan ini saat mengimpor fungsi dalam konteks global, non-browser. Hal ini disebabkan oleh sifat server dev next.js secara efektif menjalankan server node.js untuk SSR dan penggantian modul panas (HMR), dan node.js tidak memiliki gagasan window atau navigator .

Solusi 1 - Injeksi Ketergantungan (mungkin tidak selalu berhasil)

Pastikan Anda memanggil fungsi -fungsi ini dalam konteks browser, misalnya dalam komponen bereaksi di dalam kait useEffect ketika DOM benar -benar ada saat itu. Jika Anda mencoba menggunakan fungsi Tauri dalam file sumber utilitas umum, solusi adalah menggunakan injeksi ketergantungan untuk fungsi itu sendiri untuk menunda impor aktual fungsi nyata (lihat contoh di bawah ini untuk info lebih lanjut).

Contoh Menggunakan fungsi invoke Tauri:

src/lib/some_tauri_functions.ts (bermasalah)

 // 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 (diperbaiki)

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

Kemudian, saat menggunakan loadFoo / loadBar / loadBaz di dalam komponen React Anda, impor fungsi Invoke dari @tauri-apps/api dan pass invoke ke fungsi LoadXXX sebagai argumen InvokeFunction . Ini harus memungkinkan API Tauri yang sebenarnya hanya dibundel hanya dalam konteks komponen React, sehingga tidak boleh dimuat oleh Next.js pada saat startup awal sampai browser selesai memuat halaman.

Solusi 2: Bungkus API Tauri di belakang Dynamic import()

Karena API Tauri perlu dibaca dari window browser dan objek navigator , data ini tidak ada di node.js dan karenanya lingkungan SSR. Seseorang dapat membuat fungsi yang diekspor yang membungkus API Tauri di belakang panggilan import() runtime dinamis.

Contoh: Buat src/lib/tauri.ts untuk mengekspor kembali 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 )
}

Kemudian, alih-alih mengimpor import { invoke } from "@tauri-apps/api/tauri" , gunakan Invoke dari import { invoke } from "@/lib/tauri" .

Pelajari lebih lanjut

Untuk mempelajari lebih lanjut tentang Next.js, lihatlah sumber daya berikut:

• Dokumentasi Next.js - Pelajari Tentang Fitur dan API Next.js.
• Pelajari Next.js - Tutorial interaktif Next.js.

Dan untuk mempelajari lebih lanjut tentang Tauri, lihatlah sumber daya berikut:

• Dokumentasi Tauri - Panduan - Pelajari tentang Tauri Toolkit.