Next/Link keeps reload in components

Question

It is said that in next js we don't need to install react-router-dom because the path of our pages depend on the pages folder. Well, it actually works when I create button to move to another pages. But when I create components folder and create navbar component, it doesn't work properly as it was. The next/link keeps reloading when it moves to another pages.

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="bg-black flex justify-between p-5 text-white">
      <h1 className="font-bold text-sky-400">
        <Link href="/">Furniture App</Link>
      </h1>
      <div>
        <Link href="about">About</Link>
        <Link href="promos">Promos</Link>
      </div>
    </nav>
  );
}

Do I have to create components in pages folder in order to make Next/Link works without reload the browser?