构建与本地开发的Next.JS问题

Question

Bug description，我正在使用一个名为react的库，它来自于NextJS中的brainhubeu。即使当我使用带有ssr:false的动态导入时，构建UI看起来也很奇怪，但是dev UI是非常好的。

dev UI -

​

​

我也在Codesandbox中重新创建了它(这是因为dev环境正在运行npm run dev)- https://codesandbox.io/embed/suspicious-volhard-460q8?fontsize=14&hidenavigation=1&theme=dark

但是，当我构建它，然后使用npm run build && npm run start运行构建时-

​

​

在密码箱里重现这一切-

1. 在底部右击+签署一个新的终端
2. npm运行构建
3. npm运行启动(我已经在-p文件中添加了" start "："next package.json 8080“，以便为沙箱创建一个新的选项卡，并可以以https://460q8-8080.sse.codesandbox.io/的形式访问，其中8080表示端口号)

期望的行为 UI应该与npm中看到的行为相同。

问题

1. 为什么我的dev UI工作得很好，但是当我构建和服务时，UI是奇怪的。npm和npm之间到底有什么区别& npm在NextJS的上下文中？
2. 这个问题有什么解决办法吗？

我的尝试

1. 我一直在努力解决这个问题，并在关于NextJS的官方讨论中提出了这个问题。找不到任何答案。
2. 我甚至在“反应”(React)上制造了一个吉顿虫的问题--旋转木马的吉特比，他们帮不上什么忙。

谢谢你帮忙。

Answer 1

我解决了这个问题。在我的例子中，这是由于我如何设置(dev)和next build & next start之间的差异。注意一些事情来解决这个问题-

1. 如果您使用了外部库，则很可能它不支持服务器端呈现。我用的是Brainhubeu的反应传送带，它有一些问题。通过下一个/带有ssr的动态导入:false选项导入库来解决这个问题。
2. 另一个问题是，我正在使用/遵循一个过时的Tailwind和NextJS的样板代码。因此，postcss.config.js的配置方式容易出错。这是问题的症结所在。至少对我-在开发期间，一切都很好，因为postcss没有清除我导入的任何第三方插件/库类，但是，当我执行npm运行构建和npm运行启动时，它们就被清除了。

现在让我们快速看看你如何解决这个问题-

1. 使用TailwindCSS提供的内置清除选项。为了这个，使用NextJS团队的正式初学者代码/样板代码。正如上面提到的，为了控制生成的样式表的文件大小，本例使用Tailwind的清除选项来删除未使用的CSS。
2. 或者，如果你不想走上一条路，你可以试着修补这个问题。我只会建议这个方法，如果你几乎完成了这个项目，只是想让这个工作，因为这绝不是一个好的解决方案。您将不得不白名单一堆css文件被清除。这就是我所做的，但您可能也可以将丢失的更多CSS类白名单-

// postcss.config.js 
  
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: [
      "./node_modules/@brainhubeu/react-carousel/lib/style.css",
      "./node_modules/@brainhubeu/react-carousel/lib/style.css.map",
      "./node_modules/react-toastify/dist/*.css",
      "./components/**/*.js",
      "./pages/**/*.js",
    ],
    defaultExtractor: (content) => {
      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
      const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
      return broadMatches.concat(innerMatches);
    },
  },
];
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

不过，我还是建议你走第一条路，把你的代码从旧的回购系统复制到新的，使用SSR:false来使用客户端的库，这些库讨厌SSR，你应该做得很好。

如果你需要帮助的话，你可以联系我的推特@韧皮年。