NextJS套殼后體積暴跌99%：300MB變3MB的桌面應用新配方

「Electron的體積問題終于被 Rust 解決了?！埂?這句話在開發者社區流傳已久，但真正動手搭過環境的人才知道，配置過程的坑遠比想象中多。

本文是一份經過驗證的搭建指南，目標是用 NextJS 作為前端框架，配合 Rust 原生容器輸出能在 Windows、macOS、Linux 上運行的桌面應用。核心賣點很明確：安裝包從 Electron 常見的 300MB 壓縮到 3MB 量級，運行時內存占用同步下降。

需要提前說明的是，這套方案要求你對 Node.js 生態和命令行操作有基礎認知。如果你還沒裝過 Rust 工具鏈，預留 30 分鐘給環境配置。

為什么選這對組合

NextJS 是目前 React 生態里最主流的元框架（meta-framework），默認服務于 Web 開發。但配合一個瀏覽器"移植層"，它能被導出為桌面和移動端應用。

這個移植層的技術決策很激進：用操作系統原生 WebView 替代 Chromium，后端邏輯用 Rust 編寫。結果是二進制體積斷崖式下跌——官方對比數據是 300MB vs 3MB，運行時內存同樣顯著降低。

這對需要快速驗證產品想法的團隊有現實意義。你不需要維護兩套代碼庫，Web 端的組件庫、狀態管理、路由邏輯幾乎可以原樣復用。

環境準備階段，直接去官網按操作系統下載依賴。Windows 用戶注意：需要額外安裝 Microsoft Visual Studio C++ 構建工具，這個坑新手常踩。

第一步：初始化 NextJS 項目

打開終端，進入你打算存放項目的目錄。執行：

pnpx create-next-app

NPM 用戶把 pnpx 換成 npx 即可。全程使用默認推薦設置，不需要改配置項。項目創建完成后，用 code [你的項目名] 在 VSCode 中打開。

這里有個細節：2.0 版本目前處于穩定通道，但社區里還有不少 1.x 的老教程。如果你搜到需要手動配置 tauri.conf.json 里 security.csp 的帖子，那是舊版本，直接跳過。

第二步：接入工具鏈

在 VSCode 內置終端中操作，可以實時看到文件變更。建議用 Cargo 安裝 CLI，畢竟底層是 Rust 生態：

cargo install tauri-cli --version "^2.0.0" --locked

--locked 參數確保依賴版本鎖定，避免"在我機器上能跑"的玄學問題。安裝完成后，執行初始化：

cargo tauri init

交互式提示全部選默認即可。這會生成 src-tauri 目錄，包含 Rust 后端代碼和配置文件。

關鍵配置在 src-tauri/tauri.conf.json，需要手動確認以下字段：

{ "build": { "beforeDevCommand": "pnpm dev", "beforeBuildCommand": "pnpm build", "devUrl": "http://localhost:3000", "frontendDist": "../out" } }

beforeDevCommand 和 beforeBuildCommand 告訴后端如何驅動前端構建。devUrl 是開發服務器地址，frontendDist 指向 NextJS 的靜態導出目錄。

第三步：改造 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',