Next JS Routing with Link Component in Production

Question

I have a simple NextJS 14 app (I am new to NextJS) I have set a simple web app with 3 routes for testing I have developed the route page it contains 1 background video and few images. I did deploy the app using Vercel CLI 33.0.1.

For the navigation between routes I am using the next Link component nothing too fancy.

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

In dev mode the navigation is perfect. But when I deploy to vercel in production mode the /about page loads in minutes (3min) In the mean time the whole app freezes...

I have tried to fix the issue using a simple Anchor tag but no I want to stick to the Link component and understand why the hell it take 5 min to render a simple page.

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

you can have a look there

About page :

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

Header component (the navigation bar)

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;

The main page component

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

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

Again in local using

npm run dev

this works fine but as soon as i deploy to firebase or vercel It's not working anymore for more detail code you can clone my github

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

Thanks for the help

Answer 1

Ok for anyone using Framer with NextJS be careful, I was playing with svg animation to make some animation running for ever, I was using a while true loop on the landing page. When dealing with NextJS route make sure to not have any animations running in a Infinite loop.

So address this issue I replace the while true by a for loop with X iterations. This way the Link component was Working fine.