Next.js链接预取导致404投入生产

我正在用这个项目练习Next.js（在线-） 现在我似乎无法解决以下问题：当我在输入字段中键入任何鸡尾酒名称时，路由和链接工作，新内容出现，但我在控制台中遇到此错误

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

在我看来，这个错误只发生在产品中，因为它试图获取[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>

去喝鸡尾酒

我想我自己解决了。。我还使用了MaterialUI中的按钮，如上所示，我还向它传递了一个特殊配置的链接组件。如果我将代码更改为下面的代码，错误似乎会消失

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

去喝鸡尾酒

我想我自己解决了。。我还使用了MaterialUI中的按钮，如上所示，我还向它传递了一个特殊配置的链接组件。如果我将代码更改为下面的代码，错误似乎会消失

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

去喝鸡尾酒