生产中带有链接组件的下一个 JS 路由

Question

我有一个简单的 NextJS 14 应用程序（我是 NextJS 的新手）我设置了一个简单的 Web 应用程序，其中包含 3 条测试路线我已经开发了路线页面，它包含 1 个背景视频和一些图像。 我确实使用 Vercel CLI 33.0.1 部署了应用程序。

对于路线之间的导航，我使用下一个链接组件，没什么太花哨的。

<Link href="/about">About</Link>

在开发模式下，导航非常完美。但是当我在生产模式下部署到 vercel 时，/about 页面会在几分钟（3 分钟）内加载，同时整个应用程序会冻结...

我尝试使用简单的 Anchor 标签来解决该问题，但不，我想坚持使用 Link 组件并理解为什么需要 5 分钟才能渲染一个简单的页面。

https://sea-lab.vercel.app/

你可以去那里看看

关于页面：

function About() {
    return (
      <div>
        <h1>About</h1>
        <p>We are testing this route :/ </p>
      </div>
    )
  }
  
export default About

标题组件（导航栏）

import Link from "next/link";
import { ModeToggle } from "../theme-toggler";

const Header = () => {
    return (
        <header className="...">
            <Link href="/" className="...">
                Quantum
            </Link>
            <div className="...">
                <Link href="/service" className="...">Service</Link>
                <a href="/team" className="...">Team</a>
                <Link href="/about" className="...">About</Link>
                <Link href="/contact" className="...">Contact</Link>
                <ModeToggle />
            </div>
        </header>
    );
}

export default Header;

主页面组件

import Header from "@/components/Header/Header";

return (
      <div>
        <Header />
      </div>
    )

再次在本地使用

npm run dev

这工作正常，但一旦我部署到 firebase 或 vercel 它不再适用于更详细的代码 你可以克隆我的github

https://github.com/Ahmed-UPEC/sea-lab

感谢您的帮助

Answer 1

好吧，对于任何使用 Framer 和 NextJS 的人来说，请小心，我正在使用 svg 动画来使一些动画永远运行，我在登陆页面上使用了 while true 循环。处理 NextJS 路线时，请确保没有任何动画在无限循环中运行。

因此，为了解决这个问题，我将 while true 替换为具有 X 次迭代的 for 循环。 这样链接组件就可以正常工作了。