Next.js
Next.js 是一个基于 React 的元框架。要了解更多关于 Next.js 的信息,请访问 https://nextjs.org 。本指南适用于 Next.js 14.2.3 版本。
检查清单
- 通过设置
output: 'export'
来使用静态导出。Tauri 不支持基于服务器的解决方案。 - 在
tauri.conf.json
中将frontendDist
设置为out/
。
示例配置
-
src-tauri/tauri.conf.json {"build": {"beforeDevCommand": "npm run dev","beforeBuildCommand": "npm run build","devUrl": "http://localhost:3000","frontendDist": "../dist"}}src-tauri/tauri.conf.json {"build": {"beforeDevCommand": "yarn dev","beforeBuildCommand": "yarn build","devUrl": "http://localhost:3000","frontendDist": "../dist"}}src-tauri/tauri.conf.json {"build": {"beforeDevCommand": "pnpm dev","beforeBuildCommand": "pnpm build","devUrl": "http://localhost:3000","frontendDist": "../dist"}} -
更新 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 = {// 确保 Next.js 使用 SSG 而不是 SSR// https://nextjs.org/docs/pages/building-your-application/deploying/static-exportsoutput: '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; -
更新 package.json 配置
"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint","tauri": "tauri"}
© 2024 Tauri Contributors. CC-BY / MIT