【已解决】部署NextUI到cloudflare样式错误问题解决

问题复现

跟着NextUI的官方教程一步一步创建的，然后发现使用npm run dev时页面样式是正确的。如下

但是当使用npm run build 后，我看到生成的静态html在.next/server/app/ 目录下，直接点开发现样式错误。

NextUI原文档中没有提到相关build部分内容，github issues中没有找到类似问题

解决办法

后来想到NextUI其实使用的是next.js，那么应该找的解决方案是next.js deploy to cloudflare, 果然cloudflare是有说明:

deploy a static site Next.js project with static exports ↗.

根据文档说的，如果你要以静态站点部署在Cloudflare

需要对你的next.config.js 增加配置

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,

  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

接着使用Cloudflare部署你的应用，需要设置的配置：

Configuration option	Value
Production branch	main
Build command	npx next build
Build directory	out

对应的cloudflare的配置：

再重新部署就可以了！！！