NextJS-Tauri应用构建异常：开发正常但无法生成可用.exe/.msi

1. 修复ReferenceError: navigator is not defined错误 #

你之前修改pageExtensions的方式会直接导致开发环境无法识别页面文件，属于错误的临时绕过方案。正确处理逻辑是避免在服务端渲染（SSR）阶段调用浏览器专属API，以下是三种可靠方案：

方案一：前置浏览器环境判断 #

在调用navigator的代码前，先校验是否处于浏览器环境：

if (typeof window !== 'undefined') {
  // 安全调用navigator的逻辑示例
  const userAgent = navigator.userAgent;
}

方案二：用useEffect延迟客户端执行 #

在React组件中，通过useEffect确保代码仅在客户端渲染完成后执行：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 此处可安全调用navigator
    const devicePlatform = navigator.platform;
  }, []);

  return <div>...</div>;
}

方案三：动态导入禁用SSR的组件 #

若某个组件大量依赖浏览器API，使用Next.js的dynamic导入并关闭服务端渲染：

import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('../components/ClientHeavyComponent'), {
  ssr: false,
  loading: () => <div>加载中...</div>
});

2. 解决打包后无index.html及无法连接localhost问题 #

步骤1：恢复Next.js正确配置 #

修改next.config.mjs，保留默认页面扩展名，确保静态导出正常生成文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  // 恢复默认页面扩展名，不要仅保留icons相关
  pageExtensions: ['tsx', 'ts', 'jsx', 'js']
};

export default nextConfig;

执行next build后，检查项目根目录的out文件夹是否生成index.html及其他静态资源。若未生成，查看next build的终端输出，排查未解决的SSR错误。

步骤2：校验Tauri路径与窗口配置 #

确保tauri.conf.json的build配置正确指向静态导出目录：

"build": {
  "beforeBuildCommand": "next build",
  "beforeDevCommand": "npm run dev",
  "devPath": "http://localhost:3000",
  "distDir": "../out"
}

同时确认窗口配置指向本地静态文件，而非开发服务器：

"windows": [
  {
    "title": "你的应用名称",
    "width": 800,
    "height": 600,
    "url": "index.html"
  }
]

步骤3：打包前预校验流程 #

执行tauri build前，先手动运行next build确认静态导出无错误，再执行Tauri打包命令，避免因前置构建失败导致的资源缺失。

额外注意事项 #

• 所有浏览器专属API（window、navigator、document等）必须确保仅在客户端执行，杜绝SSR阶段调用。
• 若使用Next.js App Router，需确保所有页面均为静态可生成类型，避免依赖动态路由或服务器端渲染功能。

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