如何基于Next.js+Tauri开发桌面待办应用并适配离线数据库

针对你的桌面任务管理应用，这些离线数据库完全适配Next.js+Tauri技术栈：

• SQLite
  桌面端离线存储的首选，轻量、稳定、支持复杂SQL查询。通过Tauri的Rust层集成rusqlite库，能将数据库文件存在桌面本地（比如用户的应用数据目录），数据安全性和性能都有保障，适合存储结构化的任务数据（比如任务标题、截止时间、状态、标签等）。

• IndexedDB（搭配Dexie.js）
  浏览器原生离线数据库，Next.js可直接集成，无需依赖Tauri的Rust后端。用Dexie.js封装后，API更简洁易用，适合快速开发中小规模的任务存储场景。缺点是查询能力不如SQLite，但胜在无需跨层交互，开发成本低。

• LocalForage
  基于IndexedDB、WebSQL的封装库，提供键值对存储API，使用门槛极低。适合存储简单的任务元数据或偏好设置，比如用户的主题选择、最近打开的任务列表等，不适合复杂的结构化查询。

• DuckDB
  轻量列式数据库，适合需要对任务数据做统计分析的场景（比如按周/月统计完成任务数量）。同样通过Tauri的Rust层集成，性能优于SQLite在大规模数据下的分析操作，日常任务管理可选，但学习成本略高。

根据数据库的类型，分两种集成路径：

方案一：纯前端侧集成（IndexedDB/LocalForage） #

以Dexie.js为例：

1. 在Next.js项目中安装依赖：npm install dexie
2. 创建数据库实例：

// utils/db.js
import Dexie from 'dexie';

const db = new Dexie('TaskManagerDB');
db.version(1).stores({
  tasks: '++id, title, dueDate, completed' // 定义任务表结构
});

export default db;

3. 在Next.js组件中直接调用：

import db from '../utils/db';

// 添加任务
async function addTask(task) {
  await db.tasks.add(task);
}

// 获取所有未完成任务
async function getPendingTasks() {
  return await db.tasks.where('completed').equals(false).toArray();
}

这种方式无需修改Tauri的Rust代码，开发速度快，适合中小规模应用。

方案二：Tauri Rust侧集成（SQLite/DuckDB） #

以SQLite为例：

1. 在Tauri项目的src-tauri/Cargo.toml中添加依赖：

[dependencies]
rusqlite = { version = "0.29", features = ["bundled"] }
tauri = { version = "1.5", features = ["api-all"] }

2. 在src-tauri/src/main.rs中创建数据库连接并定义Tauri命令：

use rusqlite::{params, Connection, Result};
use tauri::command;

#[command]
fn init_db() -> Result<(), String> {
    let conn = Connection::open("task_manager.db").map_err(|e| e.to_string())?;
    conn.execute(
        "CREATE TABLE IF NOT EXISTS tasks (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL,
            due_date TEXT,
            completed BOOLEAN NOT NULL DEFAULT 0
        )",
        [],
    ).map_err(|e| e.to_string())?;
    Ok(())
}

#[command]
async fn add_task(title: &str, due_date: Option<&str>) -> Result<i64, String> {
    let conn = Connection::open("task_manager.db").map_err(|e| e.to_string())?;
    let id = conn.execute(
        "INSERT INTO tasks (title, due_date) VALUES (?1, ?2)",
        params![title, due_date],
    ).map_err(|e| e.to_string())?;
    Ok(id)
}

#[command]
async fn get_pending_tasks() -> Result<Vec<serde_json::Value>, String> {
    let conn = Connection::open("task_manager.db").map_err(|e| e.to_string())?;
    let mut stmt = conn.prepare("SELECT id, title, due_date FROM tasks WHERE completed = 0")
        .map_err(|e| e.to_string())?;
    let tasks = stmt.query_map([], |row| {
        Ok(serde_json::json!({
            "id": row.get(0)?,
            "title": row.get(1)?,
            "dueDate": row.get(2)?
        }))
    }).map_err(|e| e.to_string())?
        .collect::<Result<Vec<_>, _>>().map_err(|e| e.to_string())?;
    Ok(tasks)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![init_db, add_task, get_pending_tasks])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

3. 在Next.js中调用Tauri命令：

import { invoke } from '@tauri-apps/api/tauri';

// 初始化数据库
await invoke('init_db');

// 添加任务
await invoke('add_task', { title: '完成项目文档', dueDate: '2024-05-30' });

// 获取未完成任务
const pendingTasks = await invoke('get_pending_tasks');

这种方案适合需要复杂查询、数据量大或追求数据安全性的场景，数据存储在桌面本地文件，脱离浏览器沙箱限制。

通用建议 #

• 数据迁移：提前规划数据库版本，比如Dexie.js支持版本升级时的schema变更，SQLite需要手动写迁移脚本。
• 错误处理：在数据库操作前后添加错误捕获，给用户友好的提示（比如“保存任务失败，请重试”）。
• 性能优化：对常用查询字段添加索引（比如SQLite的CREATE INDEX，Dexie.js的索引定义），避免全表扫描。
• 备份策略：可以添加手动备份功能，将数据库文件导出到用户指定目录，防止数据丢失。

内容的提问来源于stack exchange，提问作者Amanullah Amini