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

Posted 2023-02-22

【中文标题】构建与本地开发的 Next.JS 问题

【英文标题】：Next.JS issue with build vs local dev

【发布时间】：2020-11-01 15:25:54

【问题描述】：

错误说明 我正在使用 NextJS 中的 Brainhubeu 的一个名为 react-carousel 的库。即使我使用带有 s-s-r: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 运行构建时 -

在代码和框中重新创建它 -

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

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

问题

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

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

我的尝试

我一直在努力解决这个问题，并在关于 NextJS 的 Github 官方讨论中提出了这个问题。找不到任何答案。

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

感谢您的帮助。

【参考方案1】：

我能够解决这个问题。就我而言，这是由于我设置 (dev) 和 next build && next start 的方式不同。请注意一些事项以对其进行排序 -

如果您使用了外部库，很可能它不支持服务器端渲染。我使用的是 Brainhubeu 的 react-carousel，但它有一些问题。通过 next/dynamic imports with s-s-r:false option导入库解决。

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

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

使用 TailwindCSS 提供的内置清除选项。为此， use the official starter-code/boilerplate code from the NextJS team。正如他们在那里提到的那样 - 为了控制生成的样式表的文件大小，此示例使用 Tailwind CSS 的清除选项来删除未使用的 CSS。

如果您不想采用以前的方式，也可以尝试修补问题。如果您几乎完成该项目并且只想让它工作，我只会建议这种方法，因为这绝不是一个好的解决方案。您必须将一堆 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] : []),
  ],
;

我仍然建议采用第一种方式，将您的代码从旧仓库复制到新仓库，使用 s-s-r:false 来使用讨厌 s-s-r 的客户端库，您应该一切顺利。

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