尝鲜 tauri + next.js 开发桌面应用

tauri 是使用rust和前端技术开发跨平台桌面程序的全新技术框架。相比成熟的electron，tauri的特点有：

1. 使用rust语言开发：对用户来说native代码是用rust，UI代码是用js。
2. 不内嵌浏览器内核：最终安装包大小要小很多。

官网是：https://tauri.app/

而next.js是流行的React前端框架，用next.js可以开箱即用，是用TypeScript开发前端。官网是：https://nextjs.org/

本文简单介绍下两者如何配合实现一个桌面客户端。

environment

• install rust

访问 https://rustup.rs/ 安装最新版本rust

或者使用命令 rustup update 更新rust

• install node

访问 https://github.com/nvm-sh/nvm 安装node版本管理器。

然后安装最新lts版本node：

nvm install --lts

create first project

cargo install create-tauri-app

cargo create-tauri-app

cd FirstApp

执行

cargo tauri dev

就看到第一个简单的app啦。

create next.js

参考文档 https://tauri.app/v1/guides/getting-started/setup/next-js

prepare next.js

新建一个目录，执行

npx create-next-app@latest --use-npm --typescript

假设我们刚才输入的项目名称是 findeno

cd findeno

如下修改 next.config.js

修改 package.json

prepare rust

cargo install tauri-cli

现在文件布局如下:

修改 tauri.conf.json beforeBuildCommand :

cargo tauri dev

call rust from js

添加 rust 代码：

添加 js：

npm install @tauri-apps/api

最终效果如下：

debug

https://tauri.app/v1/guides/debugging/application

右键。

release

cargo tauri build

• dmg 2.4M
• app 5.2MB

可见包大小确实很小。（如果使用electron动辄60MB+）

js api

https://tauri.app/v1/api/js/

rust api

https://docs.rs/tauri/1.2.2/tauri/

总结

只需要用rust和javascript（typescript）就能实现桌面客户端。真是一种全新的开发体验。

最终代码可见：https://github.com/everettjf/tauri-next