tauri nextjs template

Tauri + Next.js шаблон

Это шаблон проекта Tauri с использованием Next.js, загруженный путем объединения create-next-app и create tauri-app .

Этот шаблон использует pnpm в качестве диспетчера зависимостей node.js.

Функции шаблона

• Фронта TypeScript с использованием Framework Next.js React
• Tailwindcss как коммунальный атомный CSS-структура
  • Пример страницы в этом приложении для шаблона была обновлена для использования только TailWindcss
  • Несмотря на то, что он не включен по умолчанию, рассмотрите возможность использования компонентов React Aria и/или компонентов без головы для полностью неустановленных и полностью доступных компонентов пользовательского интерфейса, которые прекрасно интегрируются с Tailwindcss
• Самоуверенный форматирование и лининг уже настройка и включено
  • Eslint for Pure React + TypeScript Linting и Biome для комбинации быстрого форматирования, линирования и импорта сортировки JavaScript и TypeScript
  • Clippy и rustfmt для кода ржавчины
• Действия GitHub для проверки форматирования кода и снятия как для TypeScript, так и для ржавчины

Начиная

Запуск сервера разработки и использование окна Tauri

После клонирования в первый раз настройте Git Pre-Commit Hooks:

pnpm prepare

Разработать и запустить фронт в окне Таури:

pnpm dev

Это загрузит Frontend Next.js непосредственно в окно WebView Tauri, в дополнение к запуску сервера разработки на localhost:3000 .

Здание для освобождения

Для экспорта Frontend Next.js через SSG и построить приложение Tauri для выпуска:

pnpm build

Пожалуйста, не забудьте изменить идентификатор пакета в tauri.conf.json > tauri > bundle > identifier , так как значение по умолчанию даст ошибку, которая мешает вам построить заявку на выпуск.

Структура источника

Next.js Frontend исходные файлы расположены в src/ и исходных файлах приложения приложения Tauri Rust расположены в src-tauri/ . Пожалуйста, проконсультируйтесь с документацией Next.js и Tauri соответственно по вопросам, касающимся любой технологии.

Предостережения

Статическое генерация сайта / предварительное использование

Next.js-это отличная фронтальная структура React, которая поддерживает рендеринг на стороне сервера (SSR), а также статическое генерацию сайта (SSG или предварительное использование). В целях создания фронта Tauri можно использовать только SSG, поскольку SSR требует активного Node.js Server.

Использование Next.js и SSG помогает обеспечить быстрый и эксплуатационный опыт работы с одностраничным применением (SPA). Более подробную информацию об этом можно найти здесь: https://nextjs.org/docs/basic-features/pages#pre-rendering

next/image

next/image является улучшением регулярного элемента <img> HTML с встроенными дополнительными оптимизациями. Однако, поскольку мы не развертываем фронт на Vercel напрямую, некоторые оптимизации должны быть отключены для правильной сборки и экспорта фронта через SSG. Таким образом, unoptimized свойство установлено на TRUE для next/image в конфигурации next.config.js . Это позволит подавать изображение, как и из источника, без изменений в его качество, размер или формат.

Ошибка [E0554]: #![feature] не может использоваться на канале стабильного выпуска

Если вы получаете эту проблему при попытке запустить pnpm tauri dev , возможно, у вас есть более новая версия зависимости ржавчины, которая использует нестабильную функцию. pnpm tauri build все еще должна работать для производственных сборки, но для того, чтобы работать команда DEV, либо понизить зависимость, либо использовать ржавчину ночью через rustup override set nightly .

Referenceerror: навигатор не определяется

Если вы используете функцию Tauri's invoke или любую функцию Tauri, связанную с ОС из JavaScript, вы можете столкнуться с этой ошибкой при импорте функции в глобальном, не браузерном контексте. Это связано с характером Dev Server Next.js, который эффективно запускает сервер Node.js для замены SSR и горячего модуля (HMR), а Node.js не имеет представления о window или navigator .

Решение 1 - Инъекция зависимости (не всегда работает)

Убедитесь, что вы называете эти функции в контексте браузера, например, внутри компонента React внутри крючка useEffect , когда DOM действительно существует к тому времени. Если вы пытаетесь использовать функцию Tauri в обобщенном исходном файле утилиты, обходной путь состоит в том, чтобы использовать инъекцию зависимостей для самой функции, чтобы отложить фактический импорт реальной функции (см. Пример ниже для получения дополнительной информации).

Пример с использованием функции Tauri's 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 ...

Затем, используя loadFoo / loadBar / loadBaz в ваших компонентах React, импортируйте функцию Invoke из @tauri-apps/api и пропустите invoke в функцию LoadXXX в качестве аргумента InvokeFunction . Это должно позволить фактическому API Tauri быть связанным только в контексте компонента React, поэтому его не следует загружать Next.js при начальном запуска, пока браузер не закончил загружать страницу.

Решение 2: Оберните API Tauri за Dynamic import()

Поскольку API Tauri должен читать из объекта window и navigator браузера, эти данные не существуют в Node.js и, следовательно, среды SSR. Можно создать экспортируемую функцию, которая завершает API Tauri за вызовом Dynamic Stime 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" , используйте Invoke из import { invoke } from "@/lib/tauri" .

Узнать больше

Чтобы узнать больше о следующем.js, посмотрите на следующие ресурсы:

• Next.js Документация - Узнайте о функциях Next.js и API.
• Узнайте Next.js - интерактивный учебник Next.js.

И чтобы узнать больше о Таури, взгляните на следующие ресурсы:

• Документация Таури - Руководства - Узнайте о инструментарии Таури.