使用Next JS刷新页面上的.jsundefined .cssundefined webpack块

问题描述

在这个问题上，除了寻求解决方案之外，我希望您能引导我朝正确的方向前进。

我正在使用Next JS。

我的问题出在生产中，第一次到达pages/product.tsx之类的页面就可以了。捕获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","presets": ["next/babel"]
    }
  },"plugins": [
    [
      "babel-plugin-styled-components","preprocess": false }
    ]
  ]
}

capture 1: chunks with jsundefined cssundefined

capture 2: normal chunks

解决方法

我找到了一个临时解决方案。我的项目使用的是最新的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）的最新版本了。

static webpack webpack webpack