tauri nextjs template
1.0.0
이것은 create-next-app 결합하고 create tauri-app 부트 스트랩 된 Next.js를 사용하는 Tauri 프로젝트 템플릿입니다.
이 템플릿은 pnpm node.js 종속성 관리자로 사용합니다.
처음으로 복제 된 후 Git Pre-Commit 후크를 설정하십시오.
pnpm prepare타우리 창에서 프론트 엔드를 개발하고 실행하려면 :
pnpm dev localhost:3000 에서 개발 서버를 시작하는 것 외에도 Tauri WebView 창에 다음으로 다음.js 프론트 엔드를 직접로드합니다.
SSG를 통해 다음.js 프론트 엔드를 내보내고 출시를 위해 Tauri 응용 프로그램을 구축하려면 :
pnpm build 기본값은 릴리스 용 응용 프로그램을 구축하지 못하게하는 오류가 발생하므로 tauri.conf.json > tauri > bundle > identifier 에서 번들 식별자를 변경하십시오.
Next.js Frontend 소스 파일은 src/ 에 있으며 Tauri Rust 응용 프로그램 소스 파일은 src-tauri/ 에 있습니다. 두 기술과 관련된 질문은 각각 Next.js 및 Tauri 문서를 참조하십시오.
Next.js는 정적 사이트 생성 (SSG 또는 사전 렌더링)뿐만 아니라 서버 측 렌더링 (SSR)을 지원하는 훌륭한 React Frontend 프레임 워크입니다. Tauri Frontend를 작성하기 위해 SSR에는 활성 Node.js 서버가 필요하기 때문에 SSG 만 사용할 수 있습니다.
Next.js와 SSG를 사용하면 빠르고 성능이 좋은 단일 페이지 적용 (SPA) 프론트 엔드 경험을 제공하는 데 도움이됩니다. 이에 대한 자세한 내용은 https://nextjs.org/docs/basic-features/pages#pre-rendering을 참조하십시오
next/image next/image 구성 요소는 추가 최적화가 내장 된 일반 <img> HTML 요소를 향상시키는 것입니다. 그러나 Frontend를 직접 직접 배치하지 않기 때문에 일부 최적화는 SSG를 통해 프론트 엔드를 올바르게 빌드하고 내보내려면 비활성화되어야합니다. 따라서 next/image next.config.js 요소에 대해 unoptimized 속성이 true로 설정됩니다. 이를 통해 이미지는 품질, 크기 또는 형식을 변경하지 않고 소스에서 제공 할 수 있습니다.
#![feature] 안정적인 릴리스 채널에서 사용되지 않을 수 있습니다. pnpm tauri dev 실행하려고 할 때이 문제가 발생하는 경우 불안정한 기능을 사용하는 최신 버전의 Rust Dependency가있을 수 있습니다. pnpm tauri build 여전히 생산 빌드에 대해 작동하지만 Dev 명령을 작동시키기 위해서는 종속성을 다운 그레이드하거나 rustup override set nightly .
JavaScript 내에서 Tauri의 invoke 함수 또는 OS 관련 Tauri 함수를 사용하는 경우 글로벌 비 브라우저 컨텍스트에서 기능을 가져올 때이 오류가 발생할 수 있습니다. 이는 SSR 용 Node.js 서버를 효과적으로 실행하고 HMR (Hot Module Replacement)을 효과적으로 실행하는 Next.js의 Dev Server의 특성으로 인해 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 에서 호출 함수를 가져오고 Pass는 InvokeFunction 인수로 LoadXXX 기능으로 invoke . 이를 통해 실제 Tauri API는 React 구성 요소의 컨텍스트 내에서만 번들로 연결 될 수 있으므로 브라우저가 페이지로드를 완료 할 때까지 초기 시작시 Next.js에 의해로드되지 않아야합니다.
import() 뒤에 Tauri API를 랩 Tauri API는 브라우저의 window navigator 객체에서 읽어야 하므로이 데이터는 Node.js에 존재하지 않으므로 SSR 환경에 있습니다. 동적 런타임 import() 호출 뒤에 Tauri 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" 에서 invoke를 사용하십시오.
JS에 대한 자세한 내용은 다음 리소스를 살펴보십시오.
Tauri에 대한 자세한 내용은 다음 자료를 살펴보십시오.
