تنزيل tauri nextjs template - tauri nextjs template تنزيل رمز المصدر

tauri nextjs template

كود الذكاء الاصطناعي

1.0.0

تنزيل

Tauri + Next.js قالب

Tauri نافذة لقطة شاشة

هذا هو قالب مشروع TAURI باستخدام Next.js ، تم الحصول عليه من خلال الجمع بين create-next-app و create tauri-app .

يستخدم هذا القالب pnpm كمدير التبعية Node.js.

ميزات القالب

الواجهة الأمامية TypeScript باستخدام Framework Next.js
Tailwindcss كإطار CSS الذري الأول
- تم تحديث صفحة المثال في تطبيق القالب هذا لاستخدام Tailwindcss فقط
- على الرغم من عدم تضمينه افتراضيًا ، فكر في استخدام مكونات React ARIA و/أو مكونات Headlessui لمكونات واجهة المستخدم غير المليئة بالمراقبة بالكامل والتي يمكن الوصول إليها بالكامل ، والتي تتكامل بشكل جيد مع TailwindCSS
تنسيق الرأي والبناء بالفعل الإعداد والتمكين
- ESLINT لـ Pure React + TypeScript Linting ، و BIOM
- clippy و rustfmt لرمز الصدأ
إجراءات github للتحقق

ابدء

تشغيل خادم التطوير واستخدم نافذة Tauri

بعد الاستنساخ لأول مرة ، قم بإعداد خطاط السنانير قبل الالتزام:

pnpm prepare

لتطوير وتشغيل الواجهة الأمامية في نافذة توري:

pnpm dev

سيؤدي ذلك إلى تحميل الواجهة الأمامية Next.js مباشرة في نافذة Tauri WebView ، بالإضافة إلى بدء تشغيل خادم تطوير على localhost:3000 .

بناء للإفراج

لتصدير الواجهة الواجبة Next.js عبر SSG وإنشاء تطبيق Tauri للإصدار:

pnpm build

يرجى تذكر تغيير معرف الحزمة في tauri.conf.json > tauri > bundle > identifier ، حيث أن القيمة الافتراضية ستؤدي إلى خطأ يمنعك من بناء الطلب للإصدار.

هيكل المصدر

توجد ملفات مصدر الواجهة الأمامية Next.js في ملفات مصدر تطبيق src/ Tauri Rust في src-tauri/ . يرجى الرجوع إلى وثائق Next.js و Tauri على التوالي للأسئلة المتعلقة بأي من التكنولوجيا.

تحذيرات

توليد الموقع الثابت / التقديم المسبق

Next.js هو إطار عمل رائع للواجهة الأمامية التي تدعم عرض الخادم (SSR) بالإضافة إلى توليد الموقع الثابت (SSG أو ما قبل الإيراد). لأغراض إنشاء واجهة Tauri ، يمكن استخدام SSG فقط لأن SSR يتطلب خادم Node.js النشط.

يساعد استخدام Next.js و SSG على توفير تجربة واجهة للاتصالات الواحدة (SPA) السريعة والأداء (SPA). يمكن الاطلاع على مزيد من المعلومات المتعلقة بهذا هنا: https://nextjs.org/docs/basic-features/pages#pre-

`next/image`

مكون next/image هو تعزيز على عنصر <img> HTML المعتاد مع تحسينات إضافية مدمجة. ومع ذلك ، لأننا لا ننشر الواجهة الأمامية على Vercel مباشرة ، يجب تعطيل بعض التحسينات لبناء الواجهة الواجهة وتصديرها بشكل صحيح عبر SSG. على هذا النحو ، يتم تعيين الخاصية unoptimized على TRUE لمكون next/image في تكوين next.config.js . سيسمح ذلك بتقديم الصورة كمصدر ، دون تغييرات على جودتها أو حجمها أو تنسيقها.

خطأ [E0554]: `#![feature]` لا يجوز استخدامها على قناة الإصدار المستقر

إذا كنت تحصل على هذه المشكلة عند محاولة تشغيل pnpm tauri dev ، فقد يكون لديك إصدار أحدث من تبعية الصدأ التي تستخدم ميزة غير مستقرة. يجب أن يظل pnpm tauri build يعمل من أجل بنيات الإنتاج ، ولكن للحصول على أمر DEV ، إما خفض التبعية أو استخدام Rust Nightly عبر rustup override set nightly .

المرجع: Navigator غير محدد

إذا كنت تستخدم وظيفة Tauri's invoke أو أي وظيفة TAURI ذات الصلة بنظام التشغيل من داخل JavaScript ، فقد تواجه هذا الخطأ عند استيراد الوظيفة في سياق عالمي غير تفريغ. ويرجع ذلك إلى طبيعة خادم dev next.js "يعمل بشكل فعال على خادم node.js لاستبدال وحدة SSR واستبدال الوحدة الساخنة (HMR) ، وليس لدى Node.js فكرة عن window أو navigator .

الحل 1 - حقن التبعية (قد لا يعمل دائمًا)

تأكد من استدعاء هذه الوظائف في سياق المتصفح ، على سبيل المثال داخل مكون React داخل خطاف useEffect عندما يكون DOM موجودًا بالفعل بحلول ذلك الوقت. إذا كنت تحاول استخدام وظيفة Tauri في ملف مصدر الأداة المساعدة المعمم ، فإن الحل البديل هو استخدام حقن التبعية للوظيفة نفسها لتأخير الاستيراد الفعلي للوظيفة الحقيقية (انظر المثال أدناه لمزيد من المعلومات).

مثال باستخدام وظيفة invoke Tauri:

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

ثم ، عند استخدام loadFoo / loadBar / loadBaz داخل مكونات React الخاصة بك ، استيراد وظيفة الاستدعاء من @tauri-apps/api invoke في وظيفة loadxxx كوسيطة InvokeFunction . يجب أن يسمح هذا لتجميع واجهة برمجة تطبيقات Tauri الفعلية فقط في سياق مكون React ، لذلك لا ينبغي تحميله بواسطة Next.js عند بدء التشغيل الأولي حتى ينتهي المستعرض من تحميل الصفحة.

الحل 2: لف واجهة برمجة تطبيقات Tauri خلف `import()`

نظرًا لأن API Tauri تحتاج إلى القراءة من window المتصفح وكائن navigator ، فإن هذه البيانات غير موجودة في Node.js وبالتالي بيئة SSR. يمكن للمرء أن ينشئ وظيفة مصدرة تلف واجهة برمجة تطبيقات Tauri خلف 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 )
}