Next.js

Next.js 是一个用于 React 的元框架。更多关于 Next.js 的信息请访问 https://next.nodejs.cn。本指南截至 Next.js 14.2.3 版本的内容。

🌐 Next.js is a meta framework for React. Learn more about Next.js at https://next.nodejs.cn. This guide is accurate as of Next.js 14.2.3.

检查清单

🌐 Checklist

• 通过设置 output: 'export' 使用静态导出。Tauri 不支持基于服务器的解决方案。
• 在 tauri.conf.json 中将 out 目录用作 frontendDist。

示例配置

🌐 Example Configuration

1. 更新 Tauri 配置

   npm

   src-tauri/tauri.conf.json

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

   yarn

   src-tauri/tauri.conf.json

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

   pnpm

   src-tauri/tauri.conf.json

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

   deno

   src-tauri/tauri.conf.json

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

2. 更新 Next.js 配置

   next.conf.mjs

   const isProd = process.env.NODE_ENV === 'production';
   
   const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // Ensure Next.js uses SSG instead of SSR
     // https://next.nodejs.cn/docs/pages/building-your-application/deploying/static-exports
     output: 'export',
     // Note: This feature is required to use the Next.js Image component in SSG mode.
     // See https://next.nodejs.cn/docs/messages/export-image-api for different workarounds.
     images: {
       unoptimized: true,
     },
     // Configure assetPrefix or else the server won't properly resolve your assets.
     assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
   };
   
   export default nextConfig;

3. 更新 package.json 配置

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