我有一个简单的NextJS 14应用程序(我是NextJS的新手)我已经设置了一个简单的Web应用程序,有3条测试路线,我已经开发了路线页面,它包含1个背景视频和一些图片。我确实使用Vercel CLI 33. 0. 1部署了该应用程序。
对于路线之间的导航,我使用的是下一个链接组件,没有什么太花哨。
<Link href="/about">About</Link>
字符串
在开发模式下,导航是完美的。但是当我在生产模式下部署到Vercel时,/about页面在几分钟内加载(3分钟),同时整个应用程序冻结了...
我试过使用一个简单的锚标记来修复这个问题,但是不,我想坚持使用链接组件,并理解为什么它需要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
型
谢谢你的帮助
1条答案
按热度按时间mgdq6dx11#
好的,任何人使用框架与NextJS要小心,我正在玩svg动画,使一些动画永远运行,我在着陆页上使用了while true循环。当处理NextJS路由时,请确保没有任何动画运行在无限循环中。
因此,为了解决这个问题,我用一个for循环替换了while true,并进行了X次迭代。这样,Link组件就可以正常工作了。