tauri2 + nextjs开发工程搭建

作为一个跨平台的桌面开发框架，tauri在其中承担后端的角色，并且支持与任意前端框架即成。

这里提到的后端，并不是web应用的后端，而是指桌面应用的后端，即负责渲染前端与平台交互的后端，这个概念要先区分出来。

为了方面前端的开发，这里直接选用nextjs作为前端框架。

目前官方提供的有项目开发的脚手架，执行npm create tauri-app@latest按照指引即可创建出项目。不过目前还不支持nextjs，因此这里我们使用tauri cli来手动创建工程。

创建并初始化nextjs工程

npx create-next-app@latest

按照指引初始化好nextjs工程。

安装tauri cli工具

npm install -D @tauri-apps/cli@latest

初始化tauri

也就是创建tauri后端工程，就是src-tauri这个目录

npx tauri init

同样按照指引即可完成tauri后端的初始化

配置nextjs和tauri

使用nextjs+tauri的方案还需要对两者做一些配置

tauri不支持基于服务端的方案，nextjs需要设置静态导出。一个示例配置如下

// next.config.ts
import type { NextConfig } from "next";
 
const isProd = process.env.NODE_ENV === 'production';
 
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
 
const nextConfig: NextConfig = {
  // 确保 Next.js 使用 SSG 而不是 SSR
  // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
  output: 'export',
  // 注意：在 SSG 模式下使用 Next.js 的 Image 组件需要此功能。
  // 请参阅 https://nextjs.org/docs/messages/export-image-api 了解不同的解决方法。
  images: {
    unoptimized: true,
  },
  // 配置 assetPrefix，否则服务器无法正确解析您的资产。
  assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};
 
export default nextConfig;

这种最终build出来的时候会将制品生成到out目录下。

tauri配置中的前端目录和build结果存放的目录保持一致。如果按照前面流程默认创建下来的话其实就是out目录

// tauri.conf.json
 
{
  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
  "productName": "my-app",
  "version": "0.1.0",
  "identifier": "com.tauri.dev",
  "build": {
    "frontendDist": "../out",
    "devUrl": "http://localhost:3000",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  ...
}

运行tauri

npx tauri dev

现在就会成功打开一个桌面程序了。也可以在package.json将tauri命令加入到脚本当中

  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tauri": "tauri"
  },

这样就可以统一通过npm命令执行了npm run tauri dev。

接着就可以基于nextjs和tauri进行开发了

Smarticen Notes

Explorer