Question

我正在与此项目https://github.com/YuLogun/nextjs-app-coctails（在线-https://nextjs-app-coctails.vercel.app/）一起练习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>

Answer 1

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

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

Next.js链接预取在生产中产生404

1 个答案: