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

Question

错误描述 我正在 NextJS 中使用来自 Brainhubeu 的名为 React-carousel 的库。即使当我使用 ssr:false 动态导入时，构建 UI 看起来很奇怪，但开发 UI 完全没问题。

开发用户界面 -

我也在 Codesandbox 中重新创建了它（这个用于正在运行的开发环境npm run dev）- https://codesandbox.io/embed/suspicious-volhard-460q8?fontsize=14&hidenavigation=1&theme=dark

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

要在codesandbox中重新创建它 -

1. 在右下角单击+号以创建新终端
2. npm 运行构建
3. npm run start （我已经在 package.json 文件中添加了 "start": "next start -p 8080" ，因此将为沙箱创建一个新选项卡，并且可以通过https://460q8-8080.sse 进行访问。 codesandbox.io/其中 8080 表示端口号）

预期的行为 UI 应与使用 npm run dev 时看到的相同。

问题

1. 为什么我的开发 UI 工作正常，但当我构建和提供服务时，UI 很奇怪。NextJS 上下文中 npm run dev 和 npm run build && npm run start 之间到底有什么区别？

2. 有什么办法解决这个问题吗？

我的尝试

1. 我一直在尝试解决这个问题，并在 NextJS 的官方 Github 讨论中提出了这个问题。找不到任何答案。

2. 我什至在react-carousel的Github上创建了一个Github Bug问题，他们也帮不上什么忙。

感谢您的帮助。

Answer 1

我能够解决这个问题。就我而言，这是由于我的设置（开发）和下一个构建&&下一个启动方式之间的差异所致。请注意一些事项以进行排序 -

1. 如果您使用了外部库，它很可能不支持服务器端渲染。我正在使用 Brainhubeu 的 React-carousel，但它遇到了一些问题。通过使用ssr:false 选项的 next/dynamic 导入来导入库来解决这个问题。

2. 另一个问题是我正在使用/遵循过时的 Tailwind 和 NextJS 样板代码。因此 postcss.config.js 的配置方式很容易出错。问题的关键就在这里。至少对我来说 -在开发期间，一切工作正常，因为 postcss 没有清除我导入的任何第三方插件/库的类，但是，当我执行 npm run build 和 npm run start 时，它们被清除

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

1. 使用 TailwindCSS 提供的内置清除选项。为此，请使用 NextJS 团队的官方起始代码/样板代码。正如他们在那里提到的 - 为了控制生成的样式表的文件大小，此示例使用 Tailwind CSS 的清除选项来删除未使用的 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 的客户端库，这样就可以了。

如果您需要这方面的帮助，可以联系我的 Twitter @toughyear 。