Next.js onhover Link component gets refreshed - reactjs

Question

I am having an ecommerce application build in next.js. In this I have top bar contains contact and other link information, below that there is a long and search section. This two items are done in 2 components and both are combined.
Now the problem is, on hover any link in components, the particular page in refreshed (not reloading). What may be the problem. For better understanding I have placed a video blow. Please check.
https://www.dropbox.com/s/tlh4e2os1ok2tpr/screen-recording.webm?dl=0
I have given all link as below,
<Link href="/" as="/">
<a className="mr-4">Help Center</a>
</Link>
Please check my below codes,
Top.js
const Top = () => {
return (
<div>
<div className="topBar">
<div className="container">
<div className="row">
<div className="col-sm-4 col-md-6">
<p className="text-center text-sm-left">
<Link href="/" as="/">
<a>Sell in RangerBee</a>
</Link>
</p>
</div>
<div className="col-sm-8 col-md-6">
<p className="text-center text-sm-right">
<Link href="/" as="/">
<a className="mr-4">Gift Card</a>
</Link>
<Link href="/" as="/">
<a className="mr-4">Help Center</a>
</Link>
<Link href="/" as="/">
<a>Download app</a>
</Link>
</p>
</div>
</div>
</div>
</div>
</div>
}
export default Top;
Header.js
const Header = () => {
return (
<div>
<div className="searchBar">
<div className="container-fluid">
<div className="row align-items-center">
<div className="col-8 col-md-2 col-lg-2">
<p>
<Link href="/" as="/">
<a><img src="/vercel.svg" alt="Example" className="img-fluid" /></a>
</Link>
</p>
</div>
<div className="col-4 col-md-2 col-lg-3 col-xl-2">
<div className="menuCategory">
<p className="main" onClick={() => changeMenuCategory()}><span>Shop By Category</span> <FontAwesomeIcon icon={faChevronDown} className="ml-2 pt-1 fa-down"/> <FontAwesomeIcon icon={faBars} className="ml-2 pt-1 fa-bars"/></p>
<ul className={toggleCategory ? "main-nav" : "main-nav d-none"}>
{menus && menus.data.map((cat, index) => (
<li key={index}>
<Link href={"/products/"+cat.cat_slug} as={"/products/"+cat.cat_slug}><a title={cat.cat_name}>{cat.cat_name} <FontAwesomeIcon icon={faChevronRight} className="ml-2 float-right menu-arrow"/></a></Link>
<ul>
{cat.subcategory.map((subcat, index1) => (
<li key={index1+index}><Link href={"/products/"+cat.cat_slug+"/"+subcat.sub_slug} as={"/products/"+cat.cat_slug+"/"+subcat.sub_slug}><a title={subcat.sub_name}>{subcat.sub_name}</a></Link></li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
<div className="col-12 col-md-4 col-lg-4 col-xl-5 mt-3 mb-3 mt-md-0 mb-md-0">
<div className="search-box">
<div className="search-inner">
<input type="text" name="q" placeholder="Search for products, brands and much more" onClick={() => setToggleSearch(b => !b)} onFocus={(e) => trendingSearch(e)} onChange={(e) => startSearch(e)} />
<button><FontAwesomeIcon icon={faSearch}/></button>
</div>
<div className={toggleSearch ? "search-result" : "search-result d-none"}>
<ul ref={dropdown}>
{trending !== null && searched === null && trending.data.length > 0 && <li className="trending">Trending Search</li>}
{trending !== null && searched == null && trending.data.length > 0 &&
trending.data.map((trending, index) => (
<li key={index}><Link href={"/products/"+trending.trending_slug} as={"/products/"+trending.trending_slug}><a>{trending.trending_name}</a></Link></li>
))
}
{searched !== null && searched.data.length > 0 &&
searched.data.map((search, index) => (
<li key={index}>
<Link href={search.search_url} as={search.search_url}>
{search.images.length > 0 ?
<a><img src={api.IMAGE_PRODUCTS+"/"+search.images[0].image_name} alt={search.search_name} /> {search.search_name}</a>
:
<a>{search.search_name}</a>
}
</Link>
</li>
))
}
</ul>
</div>
</div>
</div>
<div className="col-12 col-md-4 col-lg-3">
<div className="text-center text-md-right">
<div className="d-inline loginDrop">
<Link href={!isAuthenticated ? "/login" : "/profile"} as={!isAuthenticated ? "/login" : "/profile"}>
<a className="signinBtn mr-5">{!isAuthenticated ? "Sign In" : "My Account"}</a>
</Link>
<div className={!isAuthenticated ? "login-content" : "login-content logout-content"}>
<p> </p>
<div className="login-inner">
<Link href={!isAuthenticated ? "/login" : "/profile"} as={!isAuthenticated ? "/login" : "/profile"}><a><FontAwesomeIcon icon={faUserCircle} className="mr-2"/> Your Profile</a></Link>
<Link href={!isAuthenticated ? "/login" : "/orders"} as={!isAuthenticated ? "/login" : "/orders"}><a><FontAwesomeIcon icon={faBoxOpen} className="mr-2 orderIcon"/> Orders</a></Link>
<Link href={!isAuthenticated ? "/login" : "/wishlist"} as={!isAuthenticated ? "/login" : "/wishlist"}><a><FontAwesomeIcon icon={faHeart} className="mr-2"/> Whishlist</a></Link>
<div className="otherDrop">
{!isAuthenticated ?
<>
<p className="first">Don't have an account?</p>
<p className="register"><Link href="/register" as="/register"><a>Register</a></Link></p>
<p className="login"><Link href="/login" as="/login"><a>Login</a></Link></p>
</>
:
<p className="login"><a href="#" onClick={deauthenticate}>Logout</a></p>
}
</div>
</div>
</div>
</div>
<Link href="/cart" as="/cart">
<a className="cartBtn"><FontAwesomeIcon icon={faShoppingCart} className="mr-xl-1"/> Cart <span>{carts[0] === null ? 0 : carts.length}</span></a>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
}
export default Header;
Layout.js
import Head from 'next/head';
import * as Main from './Index'
import './styles/Index';
const Layout = ({ children, title }) => (
<div>
<Head>
<title>{ title }</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Main.Top/>
<Main.Header/>
<div>
{ children }
</div>
</div>
);
export default Layout;
next.config.js
const withSass = require('#zeit/next-sass')
module.exports = withSass({
cssLoaderOptions: {
url: false
}
})
Is there any problem with my code?
I am using sass for styling. What may be the issue. I have searched a lot and couldn't find any solution. Actually am new to next.js. So I am not able to find a solution.

Answer 1

As said in their docs, next/Link accept the props href and as, where:
href: The page that it should go for, this path will never change at runtime.
as: Something like a decorator, how the link should appears for the user. It can change in runtime.
Tha been said, lets take a look in one of yours Link's:
<Link href={"/products/"+trending.trending_slug} as={"/products/"+trending.trending_slug}><a>{trending.trending_name}</a></Link>
In this case your href is changing dynamic with your trending and it should be a page that exists in your project, like pages/product/trending and if trending is dynamic you can use pages/product/[trending] and then in the as property you should use the dynamic link, like you are already doing, /products/"+trending.trending_slug.
Take a look into their docs about it: https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes
Here is a issue that look's to be the same problem: https://github.com/vercel/next.js/issues/11157