Next.js

Next.js 是一个基于 React 的元框架。要了解更多关于 Next.js 的信息，请访问 https://nextjs.org 。本指南适用于 Next.js 14.2.3 版本。

检查清单

• 通过设置 output: 'export' 来使用静态导出。Tauri 不支持基于服务器的解决方案。
• 使用 internal-ip 以实现移动设备兼容性，这样您就可以配置 assetPrefix。这是必需的，以便服务器正确解析资源。
• 在 tauri.conf.json 中将 frontendDist 设置为 out/。

示例配置

1. 安装 internal-ip 版本 7 以进行移动端开发。

   版本 8.0.0 无法运作！

   npm

   npm install --save-dev internal-ip@7.0.0

   yarn

   yarn add -D internal-ip@7.0.0

   pnpm

   pnpm add -D internal-ip@7.0.0

2. 更新 Tauri 配置

   npm

   src-tauri/tauri.conf.json

   {
     "build": {
       "beforeDevCommand": "npm run dev",
       "beforeBuildCommand": "npm run build",
       "devUrl": "http://localhost:3000",
       "frontendDist": "../dist"
     }
   }

   yarn

   src-tauri/tauri.conf.json

   {
     "build": {
       "beforeDevCommand": "yarn dev",
       "beforeBuildCommand": "yarn generate",
       "devUrl": "http://localhost:3000",
       "frontendDist": "../dist"
     }
   }

   pnpm

   src-tauri/tauri.conf.json

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

3. 更新 Next.js 配置

   next.conf.mjs

   /** @type {import('next').NextConfig} */
   const isProd = process.env.NODE_ENV === 'production';
   
   let internalHost = null;
   
   if (!isProd) {
     const { internalIpV4 } = await import('internal-ip');
     internalHost = await internalIpV4();
   }
   
   const nextConfig = {
     // 确保 Next.js 使用 SSG 而不是 SSR
     // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
     output: 'export',
     // 注意：在 SSG 模式下使用 Next.js 的 Image 组件需要此功能。
     // 请参阅 https://nextjs.org/docs/messages/export-image-api 了解不同的解决方法。
     images: {
       unoptimized: true,
     },
     // 配置 assetPrefix，否则服务器无法正确解析您的资产。
     assetPrefix: isProd ? null : `http://${internalHost}:3000`,
   };
   
   export default nextConfig;

4. 更新 package.json 配置

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "tauri": "tauri"
   }