如何通过Tauri Rust命令实现Next.js动态渲染Chakra UI组件？

1. 编写Tauri IPC命令（Rust端） #

在Tauri项目的src-tauri/src/main.rs里实现数据的保存和读取逻辑，这里以文件存储为例（适合小规模数据）：

use tauri::{command, AppHandle};
use serde::{Serialize, Deserialize};
use std::fs::{File, read_to_string, write};
use std::path::PathBuf;

// 定义可序列化的数据结构，用于存储keys
#[derive(Serialize, Deserialize, Clone)]
struct StoredKeys {
    keys: Vec<String>,
}

// 保存keys到本地文件
#[command]
async fn save_keys(app_handle: AppHandle, keys: Vec<String>) -> Result<(), String> {
    // 获取应用专属数据目录，避免权限问题
    let data_dir = app_handle.path_resolver().app_data_dir()
        .ok_or("无法获取应用数据目录")?;
    std::fs::create_dir_all(&data_dir)
        .map_err(|e| e.to_string())?;
    let file_path = data_dir.join("app_keys.json");

    let stored_data = StoredKeys { keys };
    let json_str = serde_json::to_string(&stored_data)
        .map_err(|e| e.to_string())?;
    write(file_path, json_str)
        .map_err(|e| e.to_string())
}

// 读取本地存储的keys
#[command]
async fn get_keys(app_handle: AppHandle) -> Result<Vec<String>, String> {
    let data_dir = app_handle.path_resolver().app_data_dir()
        .ok_or("无法获取应用数据目录")?;
    let file_path = data_dir.join("app_keys.json");

    if !file_path.exists() {
        return Ok(Vec::new());
    }

    let json_str = read_to_string(file_path)
        .map_err(|e| e.to_string())?;
    let stored_data: StoredKeys = serde_json::from_str(&json_str)
        .map_err(|e| e.to_string())?;
    Ok(stored_data.keys)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![save_keys, get_keys])
        .run(tauri::generate_context!())
        .expect("运行Tauri应用时出错");
}

2. 在React/JSX中调用IPC命令实现动态渲染 #

在Next.js组件里，通过Tauri的invoke方法与Rust层交互，实时读取和更新数据并渲染组件：

import { useState, useEffect } from 'react';
import { invoke } from '@tauri-apps/api/tauri';
import { Input, Button, Box, VStack, Text } from '@chakra-ui/react';

export default function KeyComponentRenderer() {
    const [keys, setKeys] = useState([]);
    const [inputValue, setInputValue] = useState('');

    // 组件加载时读取已存储的keys
    useEffect(() => {
        const loadSavedKeys = async () => {
            try {
                const savedKeys = await invoke('get_keys');
                setKeys(savedKeys);
            } catch (err) {
                console.error('读取keys失败:', err);
            }
        };
        loadSavedKeys();
    }, []);

    // 添加新key并保存
    const addKey = async () => {
        if (!inputValue.trim()) return;
        const updatedKeys = [...keys, inputValue.trim()];
        try {
            await invoke('save_keys', { keys: updatedKeys });
            setKeys(updatedKeys);
            setInputValue('');
        } catch (err) {
            console.error('保存key失败:', err);
        }
    };

    return (
        <Box p={6} maxW="600px" mx="auto">
            <VStack spacing={4} align="stretch">
                <Input
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    placeholder="输入新的Key值"
                />
                <Button onClick={addKey} colorScheme="teal">
                    添加并保存
                </Button>
                <Box mt={4}>
                    {keys.length === 0 ? (
                        <Text color="gray.500">暂无Key数据，请添加</Text>
                    ) : (
                        keys.map((key, idx) => (
                            <Box 
                                key={idx} 
                                p={3} 
                                borderWidth={1} 
                                borderRadius="md" 
                                mb={2}
                                bg="gray.50"
                            >
                                动态组件 {idx + 1}: {key}
                            </Box>
                        ))
                    )}
                </Box>
            </VStack>
        </Box>
    );
}

3. 关键注意事项 #

• 检查tauri.conf.json中的权限配置，确保tauri.allowlist.invoke包含save_keys和get_keys两个命令
• Next.js构建时，为避免SSR报错，可通过typeof window !== 'undefined'判断客户端环境后再调用Tauri API，或在next.config.js中配置externalize Tauri相关依赖
• 若数据量较大，建议替换为SQLite等本地数据库（Rust端可使用rusqlite库），提升数据操作效率

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