NextJS <Link> 在生产中不起作用（Vercel）答案

【问题标题】：NextJS <Link> doesn't work in production (Vercel)NextJS <Link> 在生产中不起作用（Vercel）
【发布时间】：2021-09-30 19:01:03
【问题描述】：

所以我刚刚将我的 NextJS 站点部署到 Vercel。在本地，我可以在我的页面之间导航，比如说“/workshop”。但是在生产中当我点击 Workshop 按钮时没有任何反应，它不会重定向。 创意工坊按钮位于 Navbar.js 中。

<Link href="/workshop">
  <button className={styles.button}>Workshop</button>
</Link>

这个也试过

<Link href="/workshop">
  <a>
    <button className={styles.button}>Workshop</button>
  </a>
</Link>

或

<Link href="/workshop" passHref>
   <MyButton />
</Link>

或

<Link href="/workshop">
    <a className={styles.button}>Workshop</a>
</Link>

它不会重定向到生产中的研讨会页面。

文件夹结构：

pages
  _app.js
  _document.js
  index.js
  workshop.js

我的 _app.js：

...
<Navbar />

<Component {...pageProps} />

<Footer />
...

我的 index.js：

export default function Index() {
    return (
        <>
            <Header />
            <Services />
            <Work />
            <Contact />
        </>
    );
}

我的 Workshop.js 看起来几乎一模一样。

我错过了什么？

谢谢。

【问题讨论】：

感谢您的评论，在本地它可以工作，但在生产中（在 Vercel 上）它不能。不是关于我的导航栏或 SSR / 首次加载时的静态渲染吗？
检查控制台是否有任何错误。
控制台没有错误，网络标签也没有。
如果我直接访问 mysite.com/workshop，它甚至无法正确渲染，缺少部件/功能，仅在生产中。
请提供您的源代码（一个 github repo 链接将是理想的）。否则请参考mcve guidelines。

标签： javascript reactjs next.js

【解决方案1】：

我发现了问题...与 Next.js 或 Link 无关。

AOS React 库 (Animate On Scroll) 干扰项目并拒绝加载研讨会页面。

【讨论】：