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

Posted 2023-03-30

【中文标题】NextJS <Link> 在生产中不起作用（Vercel）

【英文标题】：NextJS <Link> doesn't work in production (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 上）它不能。不是关于我的导航栏或 s-s-r / 首次加载时的静态渲染吗？

检查控制台是否有任何错误。

控制台没有错误，网络标签也没有。

如果我直接访问 mysite.com/workshop，它甚至无法正确渲染，缺少部件/功能，仅在生产中。

请提供您的源代码（一个 github repo 链接将是理想的）。否则请参考mcve guidelines。

【参考方案1】：

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

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