Next.js 链接预取在生产中导致 404答案

【问题标题】：Next.js Link prefetch results in 404 in productionNext.js 链接预取在生产中导致 404
【发布时间】：2020-11-03 10:17:09
【问题描述】：

我正在用这个项目练习 Next.js https://github.com/YuLogun/nextjs-app-coctails（在线 - https://nextjs-app-coctails.vercel.app/）我现在似乎无法解决的问题如下：当我在输入字段中输入任何鸡尾酒名称时，路由和链接工作，新内容出现，但我在控制台中收到此错误

GET https://nextjs-app-coctails-git-addssr.yulogun.vercel.app/_next/static/rRHX14sSLtcEaeP7a3OxS/pages/cocktails/lemonade.js net::ERR_ABORTED 404

当我点击标题返回主页时，我也收到此错误

GET https://nextjs-app-coctails.vercel.app/_next/static/AQ4yeVJG3tT4bLQUfG4RY/pages/cocktails.js net::ERR_ABORTED 404

在我看来，这个错误只发生在 production 因为它试图获取 [input_value].js 文件。我不明白是什么原因造成的，我应该如何解决它。

index.js 中的链接代码

      <Link
        href="/cocktails/[cocktailId]"
        as={`/cocktails/${inputValue.toLowerCase()}`}
        passHref
      >
        <Button
          className={classes.button}
          component={MyLink}
          variant="outlined"
          color="primary"
        >
          go cocktails
        </Button>
      </Link>

【问题讨论】：

标签： next.js

【解决方案1】：

我想我自己解决了。我也在使用 Material UI 中的 Button，如上所示，我还向它传递了一个特殊配置的 Link 组件。如果我将代码更改为下面的代码，错误似乎消失了

      <Button
        className={classes.button}
        component={MyLink}
        naked
        href="/cocktails/[cocktailId]"
        as={`cocktails/${search.toLowerCase()}`}
        variant="outlined"
        color="primary"
      >
        go cocktails
      </Button>

【讨论】：