Next.js Link prefetch results in 404 in production

问题

I'm practising Next.js with this project https://github.com/YuLogun/nextjs-app-coctails (online - https://nextjs-app-coctails.vercel.app/) The thing I can't seem to resolve now is the following: when I type in the input field any cocktail name, the routing and linking works, new content appears, but I get this error in the console

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

When I click the header to return to the home page, I also get this error

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

It seems to me that this error occurs only in production because it's trying to fetch [input_value].js files.. I don't understand what causes it and how I should solve it.

The Link code in 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>

回答1:

I think I solved it myself.. I was also using Button from material UI and as it's shown above I was also passing it a specially configured Link component. If I change the code to the one below, the error seems to go away

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

来源：https://stackoverflow.com/questions/62889063/next-js-link-prefetch-results-in-404-in-production

标签

next.js