Nextjs - link to '/' without refreshing - next.js

Question

// import Link from "next/link";
<Link href="/">Home</Link>
A link to / refreshes the page. Is there anything I can do to stop the page from refreshing, whenever the user navigates to the homepage?

Answer 1

The docs states this: When linking between pages on websites, you use the HTML tag. In Next js you use the Link Component from next/link to wrap the tag. it allows you to do client-side navigation to a different page in the application.
Just do
<Link href="/">
<a>
Home
</a>
</Link>

Answer 2

Use this hook and you'll never have to use Link ever again. Just use regular HTML anchors and they'll work as you would expect.
// useNextClickHandler.ts
import type { Router } from 'next/router'
import { useEffect } from 'react'
/**
* Place this in a Next.js's _app.tsx component to use regular anchor elements
* instead of Next.js's <code>Link</code> component.
*
* #param router - the Next.js router
*/
export default function useNextClickHandler(router: Router): void {
useEffect(() => {
async function onClick(event: MouseEvent) {
// Only handle primary button click
if (event.button !== 0) {
return
}
// Use default handling of modifier+click events
if (
event.metaKey ||
event.ctrlKey ||
event.altKey ||
event.shiftKey
) {
return
}
const anchor = containingAnchor(event.target)
// Only handle anchor clicks
if (!anchor) {
return
}
// Use default handling of target="_blank" anchors
if (anchor.target === '_blank') {
return
}
// If the link is internal, prevent default handling
// and push the address (minus origin) to the router.
if (anchor.href.startsWith(location.origin)) {
event.preventDefault()
await router.push(anchor.href.substr(location.origin.length))
}
}
window.addEventListener('click', onClick)
return () => window.removeEventListener('click', onClick)
}, [router])
}
function containingAnchor(
target: EventTarget | null
): HTMLAnchorElement | undefined {
let parent = target
while (
parent instanceof HTMLElement &&
!(parent instanceof HTMLAnchorElement)
) {
parent = parent.parentElement
}
return parent instanceof HTMLAnchorElement ? parent : undefined
}
// _app.tsx
export default function App({
Component,
pageProps,
router,
}: AppProps): JSX.Element {
useNextClickHandler(router)

Answer 3

Other alternative is by using next/router and utilise onClick event.
import Router from "next/router";
<a onClick={() => Router.push("/")}">
Home
</a>