.jsundefined .cssundefined 使用 Next JS 刷新页面时的 webpack 块答案

【问题标题】：.jsundefined .cssundefined webpack chunks on page refresh using Next JS.jsundefined .cssundefined 使用 Next JS 刷新页面时的 webpack 块
【发布时间】：2020-08-12 18:13:03
【问题描述】：

在这个问题上，不仅仅是寻找解决方案，我希望你能引导我走向正确的方向。

我正在使用 Next JS。

我的问题出现在生产中，第一次到达像pages/product.tsx 这样的页面可以正常工作。 Capture 2 显示 html 脚本链接格式正确。

但是，刷新同一页面会产生所有 css 或 js 扩展名变成.jsundefined 或.cssundefined。

项目部署在我自己的 digitalocean 服务器上。当我将同一个项目部署到 Vercel（部署 Next JS 项目的最佳方式）时，它解决了这个问题。

请指导我了解可能导致此问题的原因。

next.config.js

const withCss = require("@zeit/next-css");
const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
});

module.exports = withCss(
  withMDX({
    pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
  })
);

.babelrc

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

capture 1: chunks with jsundefined cssundefined

capture 2: normal chunks

【问题讨论】：

标签： webpack static next.js

【解决方案1】：

我找到了一个临时解决方案。我的项目是在最新的 Next JS 版本（9.5）上，它实现了增量静态生成。这引起了问题。我只需要降级到 Next JS 9.4，现在问题已解决，但我仍然不明白为什么。

编辑：2020 年 8 月 12 日

好的，我终于发现了真正的问题。我在我的网址中做了这样的事情：

import Link from "next/link"

...
<Link href="product/[productId]" as={`product/${id}`} passHref >
    <a href={`product/${id}`}>
        ...
    </a>
</Link>
...

最坏的

...
<Link href={`product/${id}`} passHref>
    <a href={`product/${id}`}>
        ...
    </a>
</Link>
...

我再次阅读了文档，现在我这样做了

import Link from "next/link"

...
<Link href="/product/[productId]" as={`/product/${id}`}>
    <a>
        ...
    </a>
</Link>
...

现在我可以毫无问题地安全安装最新版本的 Next JS (9.5)。

【讨论】：