「300MB的桌面应用，现在能压到3MB。」这不是营销话术，是Tauri和NextJS组合后的真实体积对比。
本文是一份可复现的技术教程：如何把现有的NextJS项目，塞进这个Rust编写的运行时，生成跨平台的原生桌面应用。没有冗余概念，只有配置步骤和踩坑记录。
为什么选这对组合
NextJS是React生态的事实标准。它原本只服务Web，但配合这个轻量框架后，能导出为桌面端和移动端原生应用。
这个工具的定位是"浏览器移植层"。核心卖点就两个：体积和内存。传统方案动辄300MB，它能压到3MB量级；运行时内存占用也更低。底层用Rust编写，这是轻量的根本原因。
这对组合解决的是一个具体痛点：开发者想用React技术栈，但不想背负沉重的体积包袱。尤其是做工具类小应用时，用户下载300MB安装包和下载3MB，转化率差距肉眼可见。
环境准备与项目初始化
开始前需要安装官方列出的依赖。建议直接去官网对照系统版本下载，避免版本错位。
终端操作步骤：
1. 打开终端，进入目标目录
2. 运行pnpx create-next-app（或NPM），全程选默认推荐配置
3. 用code [项目名]在VSCode中打开项目
这里有个细节：建议用pnpm（高性能Node包管理器）而非npm，但两者均可。默认配置意味着不用碰TypeScript设置、ESLint规则这些选项，保持最简。
手动接入的完整配置
选择手动安装而非自动化脚本，目的是"看清每一步改动"。以下是逐条配置：
第一步：安装CLI工具
运行cargo install tauri-cli --version "^2.0.0" --locked
建议用Cargo（Rust的包管理器）安装，毕竟后端就是Rust。版本锁定在2.0.0，避免API变动导致配置失效。
第二步：初始化项目
运行cargo tauri init，跟随默认提示完成。
这会生成src-tauri目录，包含Rust源码和配置文件。
第三步：修改配置文件
核心配置块如下：
{"build": {"beforeDevCommand": "pnpm dev","beforeBuildCommand": "pnpm build","devUrl": "http://localhost:3000","frontendDist": "../out"}四个字段各司其职：beforeDevCommand是开发时启动NextJS的命令；beforeBuildCommand是构建前执行的命令；devUrl指定开发服务器地址；frontendDist指向静态导出目录。
注意frontendDist用的是../out而非dist，这是NextJS静态导出的默认路径。
第四步：修改next.config.ts
这是最容易出错的环节。完整配置：
const isProd = process.env.NODE_ENV === 'production';const internalHost = process.env.TAURI_DEV_HOST || 'localhost';/** @type {import('next').NextConfig} */const nextConfig = {output: 'export',images: {unoptimized: true,},assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,};关键设置解析：output: 'export'强制静态生成（SSG），禁用服务端渲染；images.unoptimized关闭图片优化，因为静态导出不支持Image组件的默认优化；assetPrefix处理开发环境下的资源路径问题。
开发调试与构建
配置完成后，运行cargo tauri dev启动开发服务器。首次编译Rust后端需要几分钟，后续会快很多。
构建生产版本用cargo tauri build。最终产物在src-tauri/target/release/bundle目录，包含各平台的安装包。
体积对比与取舍
3MB vs 300MB的代价是什么？这个方案不提供完整的Node.js环境，调用系统API需要通过Rust层封装。对于纯展示型应用或工具类应用，这完全够用；如果需要大量原生Node模块，仍需评估迁移成本。
但多数场景下，这个取舍是划算的——用户不会为了用一个待办清单工具，愿意等待300MB的下载。
热门跟贴