next.js 下一篇:JS Routing with Link Component in Production

3wabscal  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(101)

我有一个简单的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


谢谢你的帮助

mgdq6dx1

mgdq6dx11#

好的,任何人使用框架与NextJS要小心,我正在玩svg动画,使一些动画永远运行,我在着陆页上使用了while true循环。当处理NextJS路由时,请确保没有任何动画运行在无限循环中。
因此,为了解决这个问题,我用一个for循环替换了while true,并进行了X次迭代。这样,Link组件就可以正常工作了。

相关问题